live-embeds

2 posts

figma

Bringing live Figma embeds to your team’s favorite tools | Figma Blog (opens in new tab)

Figma introduced live embeds for private design files, allowing teams to view current designs directly inside tools such as Notion, Dropbox Paper, Jira, Trello, Coda, and internal documentation sites. The feature addresses the friction caused by designers and developers working across separate tools, replacing outdated screenshots with embeds that update automatically. Figma’s broader goal is to keep designs available in context throughout product planning, development, and documentation. ## Private Embeds Improve Cross-Functional Collaboration - Previously, Figma embeds supported public files, but many teams needed to keep designs private. - Private embeds let authorized teammates view organizational files without leaving their existing workflows. - Embedded files provide context during handoff and reduce the effort of locating and maintaining the latest design version. - Unlike screenshots, live embeds automatically reflect design changes. ## Product Specs and Requirements - Teams can embed designs, prototypes, user journeys, and idea boards alongside product briefs and roadmaps. - Developers can review requirements and the corresponding designs in tools such as Coda, Notion, and Dropbox Paper. - Figma highlighted reusable Coda templates for product requirements and roadmaps. - Keeping designs inside specifications helps ensure that concepts and prototypes remain current. ## Project and Task Management - Embedding designs in Jira issues and Trello cards keeps design and development work connected. - Product teams can reference current designs while planning work, managing sprints, triaging requests, and tracking tasks. - Figma provides integrations through the Figma for Jira app and Figma for Trello power-up. ## Documentation and Internal References - Teams can include private Figma files in documentation systems such as Storybook and internal knowledge sites. - The Figma Live Embed Kit enables organizations to add private embeds to custom documentation platforms. - Embedded designs serve as an up-to-date reference and help establish a single source of truth for UI standards and product behavior. - Prototype embeds also respect settings that hide the Figma toolbar and footer, which is useful for user-testing tools such as Maze. Figma recommends trying private embeds in existing workflows and encourages users to request support for additional tools. The practical takeaway is to embed live Figma files wherever design context is needed, rather than relying on manually maintained screenshots.

figma

Introducing Figma’s Live Embed Kit | Figma Blog (opens in new tab)

Figma’s Live Embed Kit lets anyone place continuously updated Figma designs and prototypes on websites or inside third-party tools. Embeds use a simple iframe and remain synchronized with the original file, eliminating repeated exports and uploads. Figma presents the kit as a way to improve team communication and signals future platform tools, including a planned API. ## Simple Embedding for Websites and Tools - Users can select **Share → Public embed** in a Figma file and copy the generated iframe code. - Developers can integrate Live Embeds into their own products using Figma’s embed documentation. - Third-party platforms such as Trello, JIRA, and Dropbox Paper can enable Figma embeds for their users. ## Always-Up-to-Date Designs - Because Figma runs on the web, embedded files stay synchronized with the source document. - Small changes—such as adjusting padding or replacing an icon—appear automatically in every embed. - Teams no longer need to re-export designs or upload updated files manually. ## Collaboration Use Cases - Internal wikis can display live designs alongside project and feature documentation. - Team messaging apps can let users share the latest design versions in conversations. - Blogs and project pages can show designs that remain current for readers. ## Broader Platform Direction - Figma aims to reduce the confusion caused by outdated files scattered across email, Slack, and file-sharing services. - The Live Embed Kit is described as an early step in expanding Figma’s platform. - Figma planned to release an API for retrieving additional information from files and incorporating it into new workflows. The kit is recommended for teams and developers that want design updates to flow automatically into the places where people communicate, document, and build products.