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...

Workflow

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

Figma

  • 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
  • Paste into the URL field at the top of the Figma converter
    • 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
  • Locate the desired frame and download a JSON file
  • Drag this JSON file into the AEUX panel After Effects

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.

Targeting specific layers within a frame is possible by hiding unwanted layers (the eyeball icon). Hidden layers will be skipped when converting a frame.

After Effects

  • Install and open AEUX inside of After Effects
    • Located in the top menu Window>Extensions
  • Set your desired comp options
  • Click to build layers automatically from Sketch or drag a JSON file from Figma/Sketch into the panel
  • Watch those layers build 😬

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 necessary, images are generated on the Figma servers and URLs are zipped up and downloaded with the JSON file. 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.

Ae Options

Customize the way layers are built

New Comp

While most design apps are able to work at a lower resolution for different pixel densities Ae needs real pixel values. 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. Limit conversions by transfering shapes the way you want.

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

Enabling this option will create layers as soon as they are available from Sketch using the other currently selected options.

Download and Install

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

 

Download AEUX v {{ downloadVersion }}

After Effects

Requirements: After Effects CC2014+

  • 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