Figma to AE

Figma to AE · Free

Your Figma frames, in After Effects, in one click

Select a frame, press one button, and the same artwork rebuilds itself in your open comp as real layers. Shapes keep their paths. Text stays text. Groups arrive as groups, ready to rig.

Download Figma Plugin Download AE Plugin

Install both. They are two halves of one tool: the Figma plugin reads the frame you select and sends it, the After Effects panel receives it and builds the layers. Neither does anything on its own, and both have to be open at the same time for a frame to arrive.

Free, with no account. The transfer runs on your own machine, so nothing is uploaded. Full setup steps

Set it up in four steps

Figma sends, After Effects receives. The two halves install separately, and both have to be open at the same time for anything to arrive.

  1. Run the plugin in Figma

    Open the listing below in the Figma desktop app and press Open, or Save it so it stays in your Plugins menu under Figma to AE. This is the sending half. It reads the frame you select and hands it to After Effects.

    Get it on the Figma Community

    It has to be the desktop app. A browser tab cannot reach a program running on your own computer.

  2. Download the After Effects plugin

    This is the receiving half. It is a separate download, because an After Effects panel cannot be installed from inside Figma.

    Download the After Effects plugin

    It downloads a zip. Unzip it and you get one folder, Figma to AE. That folder is what goes into After Effects in the next step.

  3. Drag the folder into Adobe's extensions folder

    Close After Effects first. Then drag the Figma to AE folder, the one with a CSXS folder inside it, into the extensions folder for your system below. If the CEP or extensions folder does not exist yet, create it. When it is right, the path ends at CEP/extensions/Figma to AE/CSXS/manifest.xml.

    Windows

    C:\Program Files (x86)\Common Files\Adobe\CEP\extensions

    Paste it into the File Explorer address bar and press Enter. When you drop the folder in, Windows asks for administrator permission. Choose Continue.

    macOS

    /Library/Application Support/Adobe/CEP/extensions

    In Finder open the Go menu, choose Go to Folder, paste it and press Return. When you drop the folder in, macOS asks for your password.

  4. Start After Effects and open the panel

    Open After Effects, open a comp, then open the Window menu and choose Extensions, then Figma to AE. Leave the panel open. It is the listener: while it is open, After Effects is waiting for Figma, and when it is closed nothing can arrive.

    Now go back to Figma, select a frame and press Send selection to Ae. It lands in your open comp as editable layers.

    Figma to AE is not in the Extensions menu

    If you have installed an Adobe panel before, this is very likely already switched on. If not, run the line for your system once, then restart After Effects.

    Windows, PowerShell

    9..12 | ForEach-Object { reg add "HKCU\Software\Adobe\CSXS.$_" /v PlayerDebugMode /t REG_SZ /d 1 /f }

    macOS, Terminal

    for v in 9 10 11 12; do defaults write com.adobe.CSXS.$v PlayerDebugMode 1; done; killall cfprefsd

    In plain words, before you paste it

    Adobe will not load a panel unless a setting called PlayerDebugMode is on. The line turns that one setting on, for CEP versions 9 to 12, which is what covers whichever After Effects you open. That is the whole job.

    • Changes one Adobe preference, inside your own user account
    • Installs nothing, downloads nothing, contacts nothing
    • Needs no administrator rights, and touches no other program
    • Reversible: run it again with the 1 changed to 0

    On macOS the killall cfprefsd at the end only tells the system to reread its preferences, so you do not have to log out for the change to register.

One copy of the folder serves every version of After Effects you have installed.

You already designed it once

You can build a whole product interface in Figma in an afternoon. Then the motion work starts, and none of it comes with you.

What usually happens What you actually wanted

Paste, and the artwork lands as a flat image

One button that says send this to After Effects

Redraw the rectangles by hand to animate anything

Shape layers with their own paths, not a screenshot

Retype the copy and match the font by eye

Live text you can retype and restyle

Rebuild the grouping so there is something to parent to

Groups that arrive as groups you can rig

Do it again when the design changes on Thursday

A second press when the design changes

What lands in your comp

Nothing is flattened. Everything below arrives as a layer you can open, animate and parent like any other.

  1. 1

    Shape layers

    Rectangles, ellipses, polygons, stars and vector paths arrive as real shape layers with their own paths and fills.

  2. 2

    Live text

    Text comes across as text layers, not outlines, so you can retype a word without redrawing anything.

  3. 3

    Groups and frames

    Nesting survives the trip. Groups and frames become precomps, which is what gives you something to rig against.

  4. 4

    Masks

    Clipped content keeps its mask rather than arriving pre-cropped into a bitmap.

  5. 5

    Images in position

    Anything that has to be a raster is exported and placed where it belongs, at the right size.

  6. 6

    Components and instances

    Components, instances and boolean operations are read the same way as ordinary layers.

What you need

Both halves have to be running

That is the one rule. The plugin open in Figma, the panel open in After Effects. They meet on localhost, which is why there is no account, no upload and no cloud service in the middle, and why it still works with the wifi off.

If Figma says it cannot connect

Almost every report comes down to one of these five, in roughly this order.

The panel is not open

If the Figma to AE panel is closed there is nothing listening. Open it from Window, Extensions, Figma to AE.

Figma is running in a browser

A browser tab cannot reach a server on your own machine. Use the Figma desktop app.

The panel is missing from the menu

Debug mode did not take. Run the command for your system again and restart After Effects fully.

Something else is on the ports

The transfer uses ports 7240 and 7250 on localhost. Both need to be free.

Two versions of After Effects are open

Whichever one you opened first owns the connection. Close it, or send to that one.

Something new

Shift click the send button to save the selection as JSON, and send it with your report.

Still stuck? Tell us and it goes on the list.

1

Select, then press one button

The whole plugin is one button and two options. Pick a frame in Figma, press Send selection to Ae, and watch the bar underneath while it runs.

  • Export a reference image alongside the layers if you want one
  • Rasterise a layer deliberately, when that is what you need
  • Shift click to save the selection as JSON for a bug report
Figma to AEFigma to AE?Send selection to AeReady. Select a frame to send.Sending 5 layers to After EffectsLaunch card sent. 5 layers, all editable.OPTIONSExport reference imageRasterize layer on export*v1.0.1Shift click to save JSON
2

The other half, sitting in After Effects

This panel is the receiving end, and it has to be open for anything to arrive. Send into a New Comp or straight into the Current one, and it builds the layers there.

  • Set where exported images are written, or point it at a folder beside your project
  • Choose the comp size multiplier, frame rate and duration for a new comp
  • Precomp groups on the way in, or precomp and un-precomp afterwards
  • Detect parametric shapes rather than importing every rectangle as a path
Figma to AEListeningNew CompCurrentOPTIONSImage save path:Project folderC:/Projects/launch/images1xComp size multiplierFrame rate: 60 fpsComp duration: 5 secondsDetect parametric shapesPrecomp groupsGROUPSPrecompUn-PrecompToggle guide layer visibilityDelete group layersLaunch card: 5 layers builtv1.0.1, built on AEUX by Google motion design

And when the design changes on Thursday, you select the updated frame and press the button again. That is the part that pays for the install.

Where this came from

Not a new idea.
A repaired one.

The original is AEUX, built by the motion design team at Google and released as open source. For years it was the way designers got work out of Sketch and Figma and into After Effects.

Then it stopped. The last release, 0.8.2, went out in September 2022. Figma changed, After Effects changed, and the transfer quietly broke. People kept opening issues about it and nobody picked them up.

Because it was open source, it did not have to end there. We repaired it. The connection works again, the panel was rebuilt, the host script runs on every After Effects from 2019 through 2026, and the local server no longer holds a port it has finished with.

We keep this alive, and we fix it based on what you report. If it breaks against a new version of Figma or After Effects, tell us and it gets looked at. That is the whole arrangement, and it is why this is free.

All the original work, and the credit for it, belongs to the AEUX authors. This is their code, repaired and maintained, offered to the same community it was written for. Not affiliated with or endorsed by Google or Adobe.

Last updated