Embedding Figma Prototypes
Table of Contents
I’m a huge fan of Figma prototypes. They have proven to be a great way to share interactions (rather than static designs) with peers and clients. Developers and clients often have trouble inferring interaction and animation from static designs since they don’t have declarative knowledge of UI design patterns1. Figma prototypes are a great way to bridge that gap with minimal effort.
A prototype of a spreadsheet modal. Try clicking the “Download” button.
Figma’s “smart animate” mode is particularly useful for prototyping animations. It essentially generates a tween2 between two artboards based on the position and size of the layers in each frame. Sometimes results are surprisingly good. While it tends to perform pretty poorly on complex animations, it’s great for simple interactions that do add polish to a design.
Embedding Figma Prototypes
Figma prototypes can be shared via a link, but it’s also possible to embed them in a webpage. It’s awesome for quick demos within a website or blog post without writing a lot of one-off code. MDX makes it even easier to embed Figma prototypes in a blog post.
There’s no great off-the-shelf solution for styling the embed, but Figma provides a couple options to hide their baked-in UI and iframe-ing in the prototype itself.
This is how an embed from Figma looks by default:
Already, there are a few annoying things about this embed:
- The iframe is not responsive
- The Figma embed UI is too busy over the prototype
If we’re embedding a lot of prototypes, it’s nice to have a reusable component that handles these issues. I wanted this component to:
- Be responsive to the container width
- Bring my own UI for metadata and controls
- Link to the original Figma file
Given the constraints, here’s the API I came up with:
I’ll admit that having to provide an aspect ratio is pretty awkward, but it’s the only way to make the embed responsive. The content is not only cross-origin but rendered on a canvas inside of Figma’s app code, so aspect ratio inference is not possible.
Given the aspect ratio, we can calculate the height of the embed based on the width of the container.
As for getting a link to the Figma file, we can parse the
url parameter to extract the file id and construct a link to the editor page.
I wanted to create a floating link to the Figma file and have it positioned over the prototype itself. This link needs to always be readable, and we don’t know what the background of the embed’s artboard will be until runtime.
There are a few solutions to this problem, but I decided to use CSS mix-blend-mode and background-blend-mode to maintain contrast. Most of the time the link will be over a pure color, so
darken work well to provide basic readability and a background for a hover state.
Putting it all together
Here’s the final React component made to fit with the rest of this site:
There is also a productivity boost, even without this context loss. I am usually developing my own designs, but even with Framer Motion, I just find it easier to iterate on flows and interactions with prototyping animations in Figma. ↩