Bringing live Figma embeds to your team’s favorite tools

To deliver great products, designers need to work closely with their developers. But collaboration isn’t always so easy. They each spend their days in different tools, and as a result, need to dedicate additional time providing context and connecting work across platforms. 

To make this workflow better, we want to help designers bring their designs to spaces where teammates can view them in context, such as product specs, project plans, or documentation. 

While we’ve supported the ability to embed public Figma files into other tools for a while, many of you shared that more often than not, the files you want to embed need to remain private to your organization. We heard you. Today, we’re excited to share that you can now embed private Figma files into the tools your developers use to stay on track and ship successful products.

Embedded design files streamline project communication, simplify handoff, and eliminate the overhead that comes with finding and maintaining the latest designs. Here are a few ways your product teams will benefit: 

Product specs and requirements

Developers refer to product requirements and specifications in tools like Dropbox Paper and Coda to ensure they’re building the right things. With the latest design files embedded in these artifacts, developers can access requirements and designs in context, without worrying about finding the right design file. Unlike screenshots, these embeds automatically reflect the latest changes, saving designers from making constant updates. 

Coda is one of the tools we use in our product development process at Figma. Our VP of Product, Yuhki, has templatized our approach with copyable Coda docs for product requirements and product roadmaps that teams can try out themselves. These templates allow teams to embed mocks, user journeys, or idea boards alongside their briefs and roadmaps. 

You can also check out Figma embeds in the product spec templates available in Notion and Dropbox Paper. By embedding Figma files instead of screenshots, you can ensure the concepts and prototypes within your team’s specs are always up-to-date

Project and task management

Product planning and tracking is critical across the product lifecycle. Product teams need a way to plan upcoming work and execute on sprints, including triaging and tracking ongoing work and requests. Tools like Jira and Trello bring order and organization to a project, and embedding the latest designs in issues and tasks keeps designers and developers in sync. 

To get started, you can install the Figma for Jira app in the Atlassian marketplace or enable the Figma for Trello power-up.

Documentation

Structured and organized documentation allows development teams to manage standards and consistency across products. For example, teams that use Storybook to document UI components can now embed private design files for reference. In addition, teams that maintain internal sites for documentation can use the Figma Live Embed Kit to support private embeds in these sites. Embedding Figma files into documentation ensures that it is up-to-date and can be counted on as a single source of truth.

Along with these updates to file embeds we also recently added the ability to hide the Figma toolbar and footer in prototypes—we wanted to call out that this behavior is respected when a prototype is embedded in any of the above tools. Teams have found this particularly useful when embedding public prototypes into tools like Maze for user testing. 

We’re eager for you and your team to try out private Figma embeds. We’re already working to bring private embeds to additional tools, but we’d also love to hear from you—let us know if there’s a tool that you’d like to see Figma embed support for. Check out the recording of last week’s livestream to hear more about embeds and other product highlights from Yuhki Yamashita, VP of Product at Figma.