Figma to After Effects: 5 ways compared

Figma to After Effects

6 min read

After Effects can't open Figma files. Five ways to get your designs in, from PNG exports to plugins that keep text, shapes and effects editable.

What you’ll learn

After Effects can't open .fig files, so every route is an export or a plugin.
PNG and SVG exports are free but lose live text and effects.
AEUX is free but no longer maintained; Overlord costs $75 once.
MotionUI keeps text, shapes, shadows and groups editable and animates them in the same panel.

After Effects can't open a Figma file, and Figma has no After Effects export. So every way from Figma to After Effects is a detour: you export files and rebuild the scene, or a plugin carries the layers across for you. Which detour fits depends on one question. Do you want to show the design, or animate it?

Here are the five routes motion designers use, what survives each of them, and when a plugin is worth paying for.

The short answer

You only need the look: export the frame as a PNG at 2x and animate it as one picture.
You need editable vectors and have no budget: export SVG and convert it to shape layers in After Effects.
You need text, shapes and groups as real After Effects layers: use a plugin. AEUX is free but no longer maintained, Overlord costs $75 once, MotionUI is part of MotionUI Pro and comes with the animation tools.

What a good import keeps

A screenshot of a dashboard looks right in After Effects. The trouble starts when the client changes a number. Before you pick a route, think about what you will have to touch later:

Text as editable text layers, with the right font, size and line height.
Shapes as shape layers, so fill, stroke and corner radius stay animatable.
Structure: groups that arrive as precomps, named like in Figma.
Effects: drop shadows, blur and background blur.
Position and size: everything where it sat in the frame.

1. Export PNG and animate pictures

Select the frame, or each element you want to move on its own, export it as PNG at 2x and import the files into After Effects. It takes a minute, and every detail looks exactly like in Figma.

The catch is that nothing stays editable. Text is pixels, a card is one flat image, and every change in Figma means exporting again. Fine for a quick social post or a background. Painful for a product demo that will go through three rounds of feedback.

2. Export SVG and convert it to shape layers

Export the frame as SVG and import it into a recent version of After Effects. Right-click the layer and choose Create Shapes from Vector Layer to get editable shape layers.

You get real vectors for free and lose most of the rest. Figma outlines text in SVG exports by default, so headlines arrive as shapes instead of text. Shadows and blurs drop out, images need a separate export, and icons with holes can come out filled in, because the conversion ignores the fill rule of the SVG. Good for logos and icon sets, slow for whole screens.

3. AEUX: free, open source, no longer maintained

AEUX is a free Figma plugin with a panel for After Effects, written by Adam Plouff for Google. It sends shapes and text across as layers you can edit, which is a lot for a free tool.

Its changelog stops in 2022. Many files still come across fine, but what Figma added since then may not, and bugs stay where they are. Worth a try if your budget is zero and your designs are simple.

4. Overlord: the long-standing professional option

Overlord by Battle Axe connects Illustrator, Figma and Photoshop to After Effects. Figma frames come in as editable shapes, text layers, gradients, masks and layer styles. It costs $75 per user as a one-time license.

If your work moves between Illustrator and Figma, Overlord is a strong pick. It gets the design into After Effects; the animation is still up to you.

5. MotionUI: import and animate in one place

MotionUI is our tool, so weigh this part accordingly. It is a desktop app for Mac and Windows with a Figma plugin from the Figma Community and a panel in After Effects. You select frames or layers in Figma, click Send selection, and they arrive in the comp that is open in After Effects. With no comp open, each frame gets its own comp in the frame size.

With the default detail setting, Editable, this comes across:

Every text, shape, icon and image as its own layer. Text stays live text, also at partial opacity or with a gradient.
Drop shadows, blur and background blur as effects you can change, including Figma's glass effect.
Icons with their holes, and logos with several colors as vectors.
Groups as nested precomps when you set Layers to Groups, with their opacity and effects.

Only what After Effects can't rebuild, like masks or blend modes, turns into an image. Simplified brings busy parts such as long tables in as one image, which keeps big screens light. Rasterize sends flat pictures when you only need the look, and Frame from comp goes the other way: it puts a frame in the size of your open comp into Figma.

The real difference starts after the import. The same panel animates what just arrived, with text effects, easing, staggered sequences, Proximity, Pins & Grid and Matchcut. If you work with Claude Code or Codex, they can build the animation with the same tools, and every keyframe stays yours to edit.

The Figma import is part of MotionUI Pro at $19 a month, and you can cancel any time. The animation basics are free.

Which route should you take?

A static screen for a few seconds: PNG. A logo or a set of icons: SVG. Whole screens you want to edit, with no budget: AEUX, and plan for some cleanup. Work that moves between Illustrator and Figma: Overlord. UI and product videos where the import is only the start: MotionUI.

Figma to After Effects with MotionUI, step by step

Download MotionUI for Mac or Windows from the getting started page and open it. It installs the panel in After Effects for you.
In Figma, open MotionUI in the Figma Community and run it in your file. A green dot and "Connected to MotionUI" tell you it reached the app.
In After Effects, open the comp you want to fill. Leave none open if every frame should get its own comp.
In the plugin, choose how layers arrive (Single or Groups) and the detail (Editable or Simplified).
Select frames, or layers inside a frame, and click Send selection.
Check the layers in After Effects, then animate them with the MotionUI panel.

Going deeper: editable or rasterized layers, groups as precomps, fonts and text wrapping and frame and comp size.

Tips for a clean import

Install the fonts on your computer. Figma loads fonts from the web, After Effects needs them installed, or it swaps them for something else.
Name your layers. The names come across, and "Rectangle 48" is hard to find in a comp with 200 layers.
Match the sizes. Send into a comp the size of your frame, or let MotionUI create one, so nothing lands cropped or tiny.
Flatten what you won't animate. A background pattern or a long table as one image keeps the comp fast.

Frequently asked questions

Can After Effects open Figma files?

No. After Effects has no importer for .fig files, and Figma has no After Effects export. You need an export such as PNG or SVG, or a plugin that carries the layers across.

Is there a free way to get Figma into After Effects?

Yes. PNG and SVG exports cost nothing, and AEUX is a free plugin. Each gives something up: PNGs aren't editable, SVGs lose live text and effects, and AEUX is no longer maintained.

Does the text stay editable?

With PNG and SVG exports, no. With AEUX, Overlord and MotionUI, text arrives as text layers. Install the same fonts on your computer before you import.