The first step to bringing your Figma design to life is to connect it. To do so, simply click on the [+] button at the top of the library panel. 

You can also connect it by clicking the [Figma] button under "Library".

Behind the scenes, we convert all your Figma design's groups, frames, slices, components, and elements with the "Mark for Export" option into individual assets that may be independently composed and animated on stage.

To get an asset on stage, just drag and drop it!

Read more about importing assets from Figma here.


This one's self-explanatory: to get an item from the Library to the Stage, simply drag and drop. The new element will show up on the stage where you drop it, and a new row will show up in the Timeline representing the new element.


What if you need to make a change to the Figma file? That's fine! We'll take care of bringing your new changes into Animator and onto any assets you've placed on the stage.

To make changes to your Figma-linked assets, just edit your Figma file and click the refresh button in Animator's library to pull the latest changes from your Figma project.


If you're having trouble getting your Figma assets into Animator, check the following:

  • Ensure that is installed in your /Applications folder.

  • Ensure that you've marked your Figma assets for export, or sliced, or grouped them. Read more here.

  • Ensure that you've clicked the refresh button in Animator's Library to pull the latest changes from your Figma project.

Did this answer your question?