Figma file URL
Connecting to Figma...
Options
Page: {{ figmaTree[figmaPage].name }}
  • {{page.name}}

{{ frame.name }}

{{ frame.size.x | round }} x {{ frame.size.y | round }}
Generating images...

Security Notes

Privacy

AEUX does not track user data, and does not view or store your designs in any way. It's a blind robot that converts designs into the AEUX JSON format. Your top secret design is safe.

Images

If needed, images are generated on the Figma servers and URLs are downloaded in the JSON file. When importing JSON into Ae, the panel will downloads these images directly to a directory you specify. This process allows direct access to your images without granting the converter app or Google any access to your data.

Authorization

For security, AEUX uses OAuth2 to gain access to your Figma account. Figma manages the authentication of 3rd party plugins.

Deauthorizing

Access tokens are generated per machine. Logging out removes the access token on this machine. To revoke access to your Figma account for AEUX, login to Figma, navigate to Account Settings, AEUX will be under Connected Apps.

Workflow

Download Figma layers as JSON then drop it into the AEUX panel

Figma

1. Copy Figma file URL

  • Open a Figma file in the browser and copy the whole URL
  • or in Figma, click SHARE in the top right, then click Copy Link

2. Paste into the URL field at the top of this page

  • A list of frames within the file will load
  • Select from the available pages directly above the frames list
  • An option to download thumbnails is available but disabling will speed things up

3. Locate the desired frame and download a JSON file


Note: At this time, it is not possible to add a plugin panel to the Figma interface. Unlike the Sketch AEUX plugin, it is not yet possible to select individual layers from a frame. Instead, all layers within an artboard will be downloaded.

After Effects

1. Install and open AEUX inside of After Effects

  • Located in the top menu Window>Extensions

2. Set your desired comp options

3. Import the downloaded AEUX.json file

  • Drop the file onto the AEUX panel
  • or click the to navigate to file

4. Watch those layers build 😬

Ae Options

Customize the way layers are built

New Comp

Design apps are able to work at a lower resolution for different pixel densities but Ae needs a fixed size. The size of the new comp is defined by the Comp size multiplier. When creating a new comp, a comp size multiplier dropdown will be visible.

Current Comp

When adding new layers to an existing comp, the current comp’s width is measured and used to define the comp size multiplier of the incoming artboard. The comp size multiplier will scale the new layers so the width of the artboard and the width of the comp match.

Layer build options

Detect parametric shapes

You may prefer rectangles and ellipses or you may love paths. Work the way you want with limited conversions.

Precomp groups

By default, groups are created as invisible parent layers to the visible layers in the main comp. This option will automatically precomp these grouped layers. Precomps may also be ungrouped with the Grouping buttons.

Auto build artboards

(SKETCH only) Enabling this option will hide the Build button and create layers as soon as they are available using the other currently selected options.

Ae Groups

Organizing layers into groups just like all the other design apps

Ae Layer Grouping

Group and ungroup

Precomping avoids a long list of layers in a single comp but creates multiple inaccessible comps. It is now possible to precomp and un-precomp groups with a click.

Show and hide

Group layers are rectangle guide layers that do not render but can help transform multiple elements. Interacting with these is possible by switching layer visibility eyeball. Toggle all guild layer visibility with a click.

Delete all guide layers

If groups aren’t your thing and you end up with a bunch of unnecessary layers, clicking will remove all guide layers from the comp.

Install

The Figma exporter runs online but you need the Ae extension to import

After Effects

Requirements: After Effects CC2014+ (2018+ for Figma image downloading)

  • Download ZXP Installer from aescripts + aeplugins
  • Drag AEUX.zxp into ZXP Installer
  • Close and reopen After Effects
  • Open the Window menu, find the Extension group and will see AEUX

Troubleshooting

If you follow all the instructions of the standard installation and AEUX still isn't showing up in the AE Window>Extensions menu you're gonna need to do a manual install. You didn't do anything wrong, it just happens sometimes wth extensions.

  • Change the extension of the AEUX.zxp file to .zip. It might give you a dialog warning about changing the file type but ignore it.
  • Unzip this file to get a folder called AEUX
  • Navigate to the Adobe extensions folder:
    • [Mac]: /Users/**username**/Library/Application Support/Adobe/CEP/extensions/
    • [Win]: C:/Users/**username**/AppData/Roaming/Adobe/CEP/extensions/
  • Copy this AEUX folder to the /extensions/ folder
  • Restart Ai/Ae and look for AEUX in the Window>Extensions folder

App status

  • OAuth2 Figma authentication
  • Input file ID
  • Ping API and retreive JSON of file
  • Generate thumbnails of file frames (artboards)
  • Select frames to be exported
  • AEUX converter for each layer type
    • Rectangle
    • Ellipse
    • Filled Path
    • Stroked paths with no fill - Working but requires a bit of a workaround that tends to misalign shapes if transformed before being grouped.
    • Group
    • Boolean shapes
    • Nested Booleans
    • Boolean shapes that have been flattenened inside of boolean shapes that have been flattened again 🙄
    • Component
    • Text - Works but will be misaligned vertically. Waiting on new API hooks.
    • Images - Links are generated on the server and downloaded inside of Ae (be sure you have AEUX v0.6.6+)
  • Download JSON to disk
  • Download images to disk
  • Affordance for art on different pages