How to export Figma to After Effects in one click using Convertify

Video Transcript

Today I’m going to be showing you how to export your Figma designs to Adobe After Effects using the Convertify Figma plugin.

The first thing we need to do really quickly is just jump into the Figma Community, search for the word “Convertify”, and you’ll see Convertify pop-up under the “Plugins” tab. If you go ahead and click on the “Install” button on the right-hand side, that’ll be installed, and then we can get started.

I’m just going to jump into my Figma file which I’ve grabbed from the Figma Community, it’s just a handful of vector character illustrations and what I want to do is basically get these out of Figma and I want to get them into Adobe After Effects, so that I can animate them or do some motion design with them. I want to do that without having to manually recreate these elements or copy/paste them and kind of nudge them around, I want this all to be automatic. We’re going to do that today, and if you follow along, I’ll show you how it’s done.

If you just right-click anywhere and go down to “Plugins”, click on the “Convertify” Figma plugin, which is the one we just installed, that’s just going to open up the Figma plugin. The first thing to note is that the Adobe export options in the Convertify Figma plugin only support single pages; unlike the Sketch exports which I’ve covered in other tutorials, Adobe only supports one page, so you can change the page that you’re converting by just switching in the pages panel on the left, and you can see here it’s going to change in brackets the page that it’s going to export.

The way that this is going to work is we’re going to actually export this Figma design to first an XD file, we’re going to open up that XD file, and then we’re going to convert that from XD into After Effects; this is a really simple process, and I’m just going to walk you through step by step right now. The first thing to do is just click on the “Convert to After Effects” button in the Convertify Figma plugin, so I’m going to click on that now and that’s going to convert all the layers on our Figma page. It has just finished, this is a really simple Figma file, so it only takes a couple of seconds.

As I mentioned, we’re just going to download the file now open it up in XD, export an artboard to After Effects, and I’m going to show you how that works. If you go ahead and click on the “Download XD file (for exporting to After Effects)” button, so click on that button, and I’m just going to save it to my desktop by clicking “Save”; and on my desktop I’m just going to double click on that file, which is going to open it first in Adobe XD. You can see here Adobe XD has just fired up and loaded in our exported file that we just exported from Figma, and you can see here it’s carried over all of our vector layers, all of our Figma layers have been exported over, but of course we don’t want to use it in XD; in this case, we do want to get all of these layers into an After Effects file so that we can actually animate them.

The way that we can do that, is just by clicking on the artboard that you want to export into After Effects, so you could either click on this one which would export all of these layers, but for today I’m just going to do a single character. I’m going to click on the character frame or artboard, and I’m going to click on the “File” menu in the top menu up here in XD, and I’m going to go all the way down to “Export”, and under the “Export” menu, you’ll see this item at the bottom that just says “After Effects”; go ahead and click on “After Effects”, and this is going to instantly export your artboard into After Effects.

It’s just automatically opened up After Effects for us and we can see here that the artboard that we just exported from XD has been carried over to our Adobe After Effects file. All of our Figma layers are here, you can see them in the timeline, we’ve got all of our vector layers our groups, and of course these can be moved, and you can transform them. I’m not going to embarrass myself by trying to animate these layers, as I’m not not an After Effects expert, but of course if you are, this would be super handy, as you don’t have to recreate all those layers from Figma. Effectively, all of your Figma layers have been converted from Figma to Adobe After Effects using the native XD export feature. That’s what it looks like, it’s a really simple process as I said, and this is this is everything you basically want. Of course, this was a really simple file, so if you do have a much larger file or have a lot of bitmap images or lots of different layers on your artboard, this might take a little bit longer, especially if you’re using a an older computer; but if you’re already doing motion design, you’ve probably got a pretty specced out computer or PC anyway, and if you’re going to the trouble of exporting your Figma files to use in After Effects, then I’m sure you probably won’t run into too many performance issues based on that.

That’s the whole process, you can you can do this for as many artboards as you want, we could do it for this one as well if we wanted to try that out; just again click on the artboard, go down to “File”, then “Export”, click on “After Effects”, and once again this will open up the file in After Effects. There we go, we’ve got the other layers imported into Adobe XD, and then exported from XD to After Effects. Again, this was much quicker because it’s just a bunch of vector layers, but as I mentioned, if you do have larger files it might take a little bit longer, but this should be essentially everything you need to animate those vector layers, those individual layers from Figma in After Effects, as I said, without having to manually recreate them, which is a big pain, if you’ve ever tried doing it before.

That’s basically it; you can apply this process to any of your Figma files that you want to use in Adobe After Effects, it works perfectly for vector files, as I mentioned, and it’ll work just as well with with other types of files, too. Vectors are always really nice for exporting from Figma to Adobe After Effects, especially if you’re going to be using them to then export to something like a Lottie file or a Lottie format ,then this is usually the style that you would do that in After Effects for.

That’s it, that’s the whole tutorial, it’s a reasonably short one today; just wanted to run through this new feature that we’ve shipped into the Convertify Figma plugin and walk through the steps on how to do it. If you’ve been wanting to export your Figma designs from Figma to After Effects, this is as far as I know the easiest way to do it without having to manually recreate all those layers, especially for complex designs. To the the people out there have requested this, I’m glad to say that it’s all working now, and you can go ahead and try this in your own projects and workflows. As always, thank you for tuning in and watching this video, and we’ll be back very soon with more Figma tutorials like this one very soon.