After Effects and Figma are fantastic tools in their own right, but moving from one program to the next can sometimes prove challenging. Specifically, preparing Figma files for animation isn’t an automatic process, and requires specific steps.
Lucky for you, we’ve done the hard work so you don’t have to! Here are some tips for how to best prepare your Figma files for animation.
1. Create and organize your illustrations in Figma:
Start by creating or importing your illustrations into Figma. Make sure that your layers are properly organized, and each element is on a separate layer.
2. Group and name your layers:
Group your layers by element or section, and give each group a descriptive name. This will make it easier to import your illustrations into After Effects and keep track of your layers.
3. Export your illustrations from Figma:
Export your illustrations as SVG files from Figma. When exporting, make sure that “Export text as outlines” is checked, and “Preserve vector data” is enabled.
4. Import your illustrations into After Effects:
Open After Effects and import your SVG files. You can do this by selecting “File” > “Import” > “File” and selecting your SVG files. When prompted, make sure to select “Composition – Retain Layer Sizes” from the “Import As” dropdown menu.
5. Convert your layers to shapes:
Select your imported layers and right-click to choose “Create Shapes from Vector Layer” from the context menu. This will convert your layers to shapes, which can be animated in After Effects. To understand the benefit of converting your layers to shapes, check out our blog post about it here.
6. Start animating:
Use After Effects’ powerful animation tools to create animations for your shapes. You can use keyframes, effects, and other tools to create dynamic and engaging animations.
Properly preparing files by following these steps can save you headache further down the road, and make your animation journey even easier. As an added bonus, you can follow our tips on how to create a Lottie animation file from your Figma illustrations to complete the circle of (web) life!
In the meantime, happy animating!
