Skip to content
— 5 minute read

Embed Figma designs in Stately

Nick Perich

We already kicked off 2024 with several major updates to Stately such as inspecting live XState code, syncing with GitHub, and writing code for actions and actors in the Studio. Today we’re excited to announce that we’ve also launched an integration with Figma!

You can now attach Figma frames to states in Stately.

Three Figma frames displayed in three Stately states for a music player. The ready state shows a record stack app view, following the openAlbum event, the viewingAlbum state shows the Wild Winds album coverart and information, from the viewingAlbum state, there’s a play event that takes you to the playingAlbum state which shows the album list for the Wild Winds album and a player progress bar. The pause event returns from the playingAlbum state to the viewingAlbum state.Three Figma frames displayed in three Stately states for a music player. The ready state shows a record stack app view, following the openAlbum event, the viewingAlbum state shows the Wild Winds album coverart and information, from the viewingAlbum state, there’s a play event that takes you to the playingAlbum state which shows the album list for the Wild Winds album and a player progress bar. The pause event returns from the playingAlbum state to the viewingAlbum state.

Improve your team workflows by combining Stately and Figma​

Embedding Figma into Stately can significantly streamline and enhance a team’s workflow.

Being able to view mockups of the states you are discussing makes it easy to see what might be missing and to identify potential improvements. It allows team members to view designs directly as part of the app logic itself.

Two examples of how this can work are:

  • Engineers can import state machine code, then designers can fill out images for each state of the actual logic in the code.

  • Designers, PMs, and other stakeholders can create the expected behavior by embedding Figma frames into a Stately diagram, then engineers can continue adding the functionality from the automatically scaffolded code.

This seamless integration can speed up the design process and ensure all team members are on the same page. Team members can easily share design details, run critiques, and iterate with people across different specializations.

It also ensures that everyone is always looking at the most up-to-date design, as changes made in Figma are reflected in the embedded view. And with GitHub Sync enabled, changes to the code can even automatically update how the Figma frames are organized in Stately.

How to embed Figma frames​

Figma embedding is part of our Pro plan. You can try all our premium features for free with our free trial.

To embed Figma frames in Stately, first you need to authenticate using a personal access token.

  1. Get a personal access token from Figma. Set "File content" to "Allow Read-only access" so Stately can get the images.
  2. Enter this token in Stately by opening a project, finding the Stately menu in the top left, selecting Account, opening Settings, and clicking the Figma tab.

Then you can link frames to states.

  1. In Figma, right click on the frame you want to embed, select Copy/Paste as, then Copy link.
  2. In Stately, select a state, open the + menu, choose Embed Figma, and paste your link.

Watch a video of how embedding Figma frames works from our recent Office Hours.

Frame inside Figma showing the menu for copy/paste as, and copy link. Alongside a frame in Stately showing the plus menu and the Embed Figma option.

Now any changes to this frame in Figma will be automatically reflected in Stately after each page load.

You can delete the embed or adjust the size of the image by selecting the state and finding the controls at the top right of the embedded image.

A few more details to get you rolling:

  • Stately supports linking to any type of Figma node that you can get, not just frames. But we recommend generally using frames due to how well they correspond to states.
  • Figma embeds are a new type of asset in Stately. We also support attaching images, videos, documents, and PDFs to states as assets. You can feature a single asset on the canvas at a time. To feature a different asset, open the state details panel and drag that asset to the first position in the assets list.
  • Stately embeds Figma frames as SVG images. This means fast load times and great scaling quality across different sizes. However, a few features of Figma (like background blur) are not supported in svg exports. When you notice an issue and high visual fidelity is important, you can export the frame as a PNG image and then attach the image itself as an image asset to the Stately state (rather than as a Figma embed from a link). It just won’t be automatically synced.

Try it out!​

We are excited to see what you do with this feature. There is a lot of potential for reducing silos between roles and helping make communication smoother.

Please share your feedback with us on our social platforms or in our regular office hours live streams. If you want help getting started with embedding Figma frames or getting your team set up with Stately and XState, the Stately team is available for workshops and consulting, and you can book a demo call with us to learn more about how Stately can work for your team.

Tags:

Edit this page on GitHub