From FIGMA to AFTER EFFECTS with one FREE PLUGIN in 2024! - Web Design Tutorial

I've wasted so many hours just trying to replicate the designs that I had in figma into After Effects because I didn't know any solution to go from one program to the other one seamlessly just with one click or with one plugin just like you do with adob XD and finally I discovered a way to go from figma to the after effects with just one plugin it changed my entire workflow it saved me a lot of time and I've made a video about it just like one year ago if not more but I saw some comments under that video that said that the entire process wasn't working anymore because of some figma updates so today I want to give you an updated version of these tutorials and that way you can apply everything in 2024 with the latest figma updates you're not going to have any problems anymore and the entire process is completely free so let's jump right into it and let's see how it works now the very first step that we need to do is to go on the A.O website and under the download section you can see that we have sketch figma the download button where you can download the entire folder with all the files that we need in order to install the plugin and by the way I highly recommend you to download the latest version of the plugin just because in that way you're going to make sure that the entire plugin is going to be compatible with the latest version of figma the very last thing that we need to do on this website is to go under the install section and under After Effects you can see that we have download zxp installer which is the program that allows you to install the plugin specifically for After Effects so just click the link and it's going to redirect you to the website of the program and based in your machine if you're running Mac OS or Windows and if you're a designer and you're working on Windows there are some problems guys there are some problems I've already downloaded it for Mac OS and let's jump right into the installation process just a quick tip to save you some time in the installation process make sure to quit After Effects now that we are in the download folder and if you're wondering why it is empty it is simply because I'm trying to declutter my computer from all the unnecessary files that I have that I never use or that I extremely old I don't even know if you were wondering this thing but it's I think this is a good trick to declare your computer and to work better and faster so whatever here it is back on track we have the files that we've just downloaded and in AIX I have all the files for the plugin a ex pigma sketch everything is perfectly dissected for you the first step is to install the EXP installer just to next install the plugin for After Effects double click on it if I can just drag the pro in the application folder and your entire program is installed I love mechos it is because it's super easy guys I don't even know why people hate it to be honest but whatever preferences next step is to open ZX installer make sure again that after effects is not open on your computer go in the after effects folder and you can see that we have a zxp file dragging into the program and you're going to see that the plugin is going to be installed on your on your After Effects super easy straightforward just two seconds now we have finished with with After Effects it's time to move on with figma and just click on the menu icon on the top left corner PL under plugins development and you can see that we have import plugin from manifest and don't worry that we have all the files necessary because in the a folder again instead of you clicking on After Effects just click on figma and you can see that we have this manifest that Json file just click on it and the entire plugin is going to be ready to use in figma and this plugin is also super easy to use guys I can't stress this enough but it saved me a lot of times let's let's see how it works instead of talking and rambling around just click a frame in your composition in your figma file and this plugin only works with frames so select your frame right click plugin you can see that we have the development section again click on AIX and you can see that we have these three buttons usually I only use send selection two After Effects click the button and select a location for your files and your assets because you need to save the assets in order to link everything from figma to after effects for the moment I just use desktop because I'm a good designer and I only use the desktop for my projects and my files and as you can see guys we have everything set up in a matter of seconds in after facts with all the layers selectable layers that you can animate you can do whatever you want you can move them basically you have an entire After Effects project for you to animate it required one second guys so one second one click my mind is blown away cuz I to waste a lot of time I would definitely throw myself out of the window if I had to go back doing everything by hand step by step pixel by pixel element by element replicating everything it required me hours now as you can see super easy one click one plugin everything set it up and you're good to go now I wanted to give you an updated version of the entire process and to show you that actually this plugin works with the latest version of figma because next week I'm going to I want to show you how to recreate and word- winning scroll interaction in After Effects and this plug-in is going to come in handy if just to straightforward the entire process of creating the design in figma and moving it into After Effects so you can focus just on the animation side of things so hopefully you found this video helpful if so smash the like button subscribe to the channel if you're new don't forget to subscribe guys and leave a comment down below if the entire process is super helpful for you if it's changed your entire process because at least for me it was a game changer at the time that I discovered it it's saved me a lot of time so let me know in the comments down below if you new this plugin smash the like button subscribe to the channel again and I'll see you in the next one go I hope that I've explained everything in a super clear way

Channel: Matteo Valentino

Views: 7,055

Keywords: web design, matteo valentino, web designer, freelance web designer, freelance designer, web design tutorial, how to design a website, how to make a website, how to create a website, free web design course, figma plugin, best figma plugins, from figma to after effects, how to animate my websites with no code, ui animations with no code, after effects, how to animate my designs, easy website animations, after effects tutorial

Id: 4pZmqIeu2ws

Length: 5min 43sec (343 seconds)

Published: Sun Feb 04 2024