Loading...
New in 2.4.0
The core mechanic of Overlord is moving layer into After Effects and the first button slot is dedicated to this action. The button changes based on which app you are working in:
pushselections from Figmapulla selection into Ae
The main workflow in Illustrator pretty much the same.
From inside of Figma, push selected shapes to After Effects. From inside After Effects, pull selected layers from Figma.
Grouped shapes will be build as individual layers
Loose shapes on an frame will be built as individual layers
Text layers will be created as individual layers
The way layers are built may be modified by click-and-holding the button to select one of the other options.
An alternate to the standard transfer method is to Split all elements into their own Ae layer. The grouping hierarchy of Illustrator will be recreated in After Effects with a parenting chain and empty group layers (kinda like Voids).
This process intentionally creates a lot of layers to provide the most flexibility for animation. Manage the group layers with actions in the Groups section.
New in 2.4.0
Build up layers in Ae as needed by combining multiple selected shapes into single layers from multiple vector shapes. Select multiple elements and Overlord will do it's best to create a single layer in Ae.
Gotchas
Vector shapes typically work great when combined into a single shape layer, but it is not always possible to create a single shape layer in After Effects. Layers that cannot be combined:
Text
Image
Masks
Look for the ⚙️ icon at the bottom of the plugin to open settings.
Precomp frames
Figma uses the concept of Frames to organize different screens. One of the options for frames is Clip Contents. This will trim layers to the edges of the frame.
By default, Overlord will create frames as groups so that you have all layers in the main comp. This means layers will not be trimmed, and this can change the look of a design in Ae.
Enabling Precomp frames will create all selected frames as Ae precomps so that the art is trimmed.
Because Figma can nest frames inside of other frames, any nested frames within nested precomps.
Note: to trim the edges of a precomp, it is important that these precomps have Collapse Transformations disabled. If it is enabled (with the 🔆 icon), the precomp will not trim the edges.
Relative to AEP
With relative path enabled, images will be generated in a path relative to the After Effects AEP file.
With relative path disabled, it will ask you where to save each time.
Select this path inside of the After Effects Overlord panel. With an AEP saved, click the relative path field (default ./Overlord) to select a folder relative to the open project file.
Image export scale
It's pretty common in the UI world to work inside of frames with native pixels that are 2x, 3x times pixel density when displayed. By default, Overlord will export images a 2x their size from Figma. This means that imported images will be set to 50% scale inside of Ae.
It is possible to set this from 1-4x to best support your project.
