Exporting from Figma to After Effects
Find out how to export your projects from Figma to After Effects the right way.
Figma is quite capable on its own when it comes to animating interfaces. As of recently, you can also make use of the excellent Smart Animations for an additional layer of polish. It’s one of the things that makes Figma so awesome — it lets you carry the project from early wireframes all the way up to prototypes and handoff. There may come a time however when even the most diehard Figma believers will be required to leave the comfort of their favorite design environment.
When you need to deliver a smoothly animated presentation of a product or make it clear to your front end devs how to handle animations that are a little more complex than what Smart Animations can handle I find that there’s no better tool than Adobe After Effects. This might be especially true when you’re stuck on the Windows platform.
AE could be considered a bit of an overkill for the job as it’s not strictly geared towards animating interfaces. It’s probably the most complex animation tool and UI animation happens to be one of the many things it can do.
There’s at least one tool out there that lets you easily move your projects from Figma to After Effects. Unfortunately the easiest method is not always the best, and the coherence of the converted project with the original one is inversely proportional to its complexity. That is why my team and I opt for exporting screens manually.
To do that you need to approach every screen as a separate project and disassemble it into many pieces. The pieces don’t need to correspond with the groups and layers of your original project. What’s important is to think about them in the context of the animation.
Take the above wireframe as an example. Let’s say we want the light gray background color to fill the screen first and then have the rest of the elements appear in a sequence. First the tabs from left to right, then the underscore, and then the text boxes (A) all as a single group. Sure, this is not something you normally need AE for, but for the sake of the example, we should keep things simple.
We’re going to focus on the headline, the paragraph, and the link below first (1, 2, 3). Say you want them brought into existence through animation as a single element. That means you need to treat them as a group (A) that’ll end up as a layer in After Effects.
What you need to do is create a new frame with the same size as the size of the project and put the aforementioned layers in it (make sure you paste while the new frame is selected to retain the elements’ position) or duplicate your project frame and delete everything but the layers you need.
Of course to put together an animation in After Effects you’re going to need a bunch of other frames in Figma, all containing some parts of your project. In the case of the above example, we need 6 layers: the background, the tabs (all kept in separate frames), the underscore, and the text group we’ve already talked about.
Any kind of complex animation will naturally require a good amount of preplanning. Only when you have at least a rough idea of how you’re going to go about animating your project can you start slicing it into pieces. I’ll explain how to put together a simple interface animation in After Effects in my next article.
