Skip to content
Version: XState v4

Embed Figma

You can embed Figma frames in your states to keep your design and code sources of truth in sync. Embedded Figma frames will stay up to date with the latest changes in your Figma files. Figma frames are a special type of asset.

In Nick’s blog post, read about how you can improve your team workflows with Stately and Figma.

How to embed Figma frames​

  1. Generate a Figma personal access token and add it to your user Settings in Stately Studio.
  2. In Figma, right-click the frame you want to embed and select Copy/Paste as > Copy link.
  3. Use the plus menu and Embed Figma on any selected state.
  4. Paste the Figma link into the Figma URL field and click Add Figma Asset.

As Figma frames are a special type of asset, you can change the display size of your Figma frame like any other asset and change the order of your state’s assets to choose which asset is displayed on the state.

Syncing Figma frames​

Your embedded Figma frame will stay up to date with the latest changes in your Figma file unless:

Refresh the page in the Stately Studio to see the latest changes from your embedded Figma frame.

Locked machines with Figma frames​

When your machine is locked, updates to your Figma frames will not be synced to your machine. You can unlock your machine to sync your Figma frames again.

Figma personal access token​

You need a Figma personal access token to embed Figma frames. You can create a personal access token in your Figma account settings under Personal access tokens.

To ensure Embed Figma works correctly, you must grant the following permissions to your personal access token:

  • File content: Allow Read-only access so Stately Studio can sync your embedded Figma frames to your machines.

You can update your Figma personal access token from your user Settings in Stately Studio anytime.

Revoking your Figma personal access token​

If you need to revoke your Figma personal access token, you can do so from your Figma account settings.

When you revoke your Figma personal access token or your token expires, Stately Studio will no longer be able to sync your embedded Figma frames to your machines. The last synced version of your embedded Figma frames will remain in your machines for 14 days. After 14 days, Figma will entirely revoke access to the frame.