Related Videos

• Embed files and prototypes

  Before you start

  Who can use this feature

  Users on any Figma team or plan can use Figma Live Embeds

  Users with View access to the file can interact with a file embed.

  Users with View access to the file can interact with a prototype embed.

  Want to build support for Figma embeds into your website or application? Check out our developer documentation for more information on the Figma Live Embed kit.

  Figma Live Embeds allow you to add live Figma files or prototypes into other websites or applications. Use embeds to:

  • Link design files to product specifications
  • Add relevant resources to project or task management tools
  • Showcase use cases and examples within documentation
  • Share presentations, templates, or resources
  • Extend the functionality a Design System

  Embeds appear alongside any existing content, making them a seamless addition to any website or application.

  

  You can only add Figma Live embeds to websites or browser-based applications. It's not possible to embed live files or prototypes within native applications.

  Embed a file or prototype

  Before you start

  You can embed any file or prototype, regardless of the file's link sharing settings.

  When you're logged into Figma and open a page with an embed, Figma will also add you to the file or prototype in Figma. Your permissions on the file will depend on:

  • Your access to the team or Organization the file lives in
  • The link sharing settings of the specific file

  We strongly advise against embedding a file or prototype on a public website. Figma has a limit of 50 active Editors on a file, beyond this you may encounter performance issues.

  Embed files

  When you embed a file, you have the option to link to a specific page or frame within the file.

  1. In Figma, open the file and go to the page you want to embed.
  2. Select the frame you'd like the embed to show (optional).
  3. Click the Share button in the toolbar.
  4. To show the current selection in the embed, check Link to selected frame.
  5. Click Get embed code to open the embed code window.
  6. Click Copy to add the embed code to your clipboard.
  7. Paste the embed code in your application of choice.

  

  Embed prototypes

  You can only have one active prototype per page in Figma, you can have as many pages as you want within a file.

  When you embed a prototype, you will need to choose which prototype you would like to show.

  1. In Figma, open the file and page the prototype lives on.
  2. Click the Present icon in the toolbar to open the prototype in Presentation view.
  3. Click the Share button in the toolbar.
  4. Click the Get embed code link to open the embed code window.
  5. Click Copy to add the embed code to your clipboard.
  6. Paste the embed code in your application of choice.

  Add Figma Live Embeds to other applications

  Some applications will allow you to embed a Figma file or prototype using just the Figma URL. Embed Figma files and prototypes into any of the following applications:

  • Trello and Figma
  • Jira and Figma
  • Coda and Figma
  • Notion and Figma
  • Dropbox and Figma
  • Storybook and Figma
  • Zeroheight and Figma

  View embeds

  Interact with embeds based on your team or Organization permissions, and the file's link sharing settings.

  • If link sharing is on (Public file): you can view the embed, regardless of your permissions on the file.
  • If link sharing is off (Private file): you need to be a Viewer or Editor on the file to view the embed. Or be a part of the team or Organization the file lives in.

  Learn how to interact with embeds.

• Interact with embeds

  Before you start

  Who can use this feature

  Users on any Figma team or plan can embed files and prototypes.

  Users with can view access to the file can interact with a file embed.

  Users with can edit access to the file can interact with a prototype embed.

  Want to embed a file or prototype? Check out our Embed files and prototypes article.

  Figma Live Embeds allow you to add live Figma files or prototypes into other websites or applications. Use embeds to:

  • Link design files to product specifications
  • Add relevant resources to project or task management tools
  • Showcase use cases and examples within documentation
  • Share presentations, templates, or resources
  • Extend the functionality a Design System

  Embeds appear alongside any existing content, making them a seamless addition to any website or application.

  View embeds

  You can interact with each embed based on your team or Organization permissions, and the file's link sharing settings.

  If link sharing is on (Public file): view the embed regardless of your permissions on the file.

  If link sharing is off (Private file): you need to be a Viewer or Editor on the file, team, or Organization to view the embed. 

  Learn more about link sharing:

  • Starter, Education, and Professional teams: Share public and private files
  • Organizations: Share files in an Organization

  Authentication

  If you're already logged in to Figma, you can see and interact with any embeds you have access to.

  If you're not logged in to Figma—or are on a website that blocks browser cookies—Figma will prompt you to log in before you can interact with the embed. You may be redirected to the browser to log in.

  

  If you don't have access, you'll see another message on the embed. We recommend reaching out to the file owner so they can add or update your access.

  • Figma Organization: Figma will show a You don't have access to the file message.
  • Professional teams: Figma will show a File not found message.

  

  Logged in with the wrong email address? Figma will display the email address you are currently logged in with. Click the Sign out button to log out of the account.

  File embeds

  You can only view file embeds. There is no way to select individual layers or make any edits to the file. To edit a file, click on the file name to open it in Figma.

  1. Use the viewport to view the file and pan around the canvas
  2. Enter full screen mode
  3. Zoom in or out in the viewport
  4. Click on the file name to open the file in Figma
  5. See when the file was last edited
  6. View the file's link sharing settings

  

  Prototype embeds

  Interact with a prototype embed as if you are viewing the prototype in Presentation View.

  1. View and interact with the hotspots in the viewport
  2. Enter full screen mode
  3. Use the arrow keys to move between screens in the prototype
  4. Restart the prototype to go back to the starting screen
  5. Click on the file name to open the file in Figma
  6. See when the file was last edited
  7. View the file's link sharing settings

  

• Confluence and Figma

  Confluence is a team workspace where knowledge and collaboration meet. Equipped with the right information, teams can make quick decisions, gain alignment, and transform the way they work together.

  Figma Live Embeds allow you to add live Figma files or prototypes into other websites or apps. Add Figma links to your Confluence Pages documents to:

  • Embed Figma files inside your meeting notes or design specs
  • Share your designs with teammates
  • Collect design feedback from collaborators

  Create a Confluence account and learn more about Pages at atlassian.com.

  Embed a file or prototype in Confluence

  You can embed any file or prototype, regardless of the file's link sharing settings.

  Collaborators can interact with Figma Live Embeds based on:

  • Their team or Organization permissions
  • The file's link sharing permissions

  In Figma

  1. Open the file you want to embed in your Confluence doc.
  2. To link to a specific frame in the Figma file, select the frame.
  3. Click the Share button in the toolbar.
  4. Check the box to Link to selected frame (Optional).
  5. Update your link sharing permissions to determine who can view and interact with the file embed (Optional).
  6. Click Copy link when you're ready to embed the file.

  In Confluence

  1. Open the Confluence page you want to embed the file or prototype in.

  2. Paste the copied link in your page. Connect your Figma and Confluence accounts if needed.

  3. By default, Confluence posts external links inline within your page. Click the link to use the dropdown menu to display your link as a card or embed.
     

  4. Select Display card to provide your team with information on the file including an image thumbnail, comments, time last updated, and a preview.
     

  5. Select Display embed to interact with the file or prototype from your Confluence page.
     

  Tip! Learn more about using links in Confluence.

• Bubble and Figma

  Before you start

  Who can use this feature

  Users on any Figma team or plan.

  This feature is available to all Bubble users and creating an account is free at bubble.io

  Bubble lets you create interactive, multi-user apps for desktop and mobile web browsers, without having to write a single line of code.

  Turn your designs into working prototypes and full-fledged applications. Import your Figma frames into Bubble, then add logic, workflows, and database capabilities to your designs. No coding required.

  Bubble's Figma integration will:

  • Import Figma frames as new pages of your app in Bubble
  • Upload images from your Figma file to your app in Bubble
  • Label the newly created Bubble elements with the same names as your Figma file

  This feature is available to all Bubble users and creating an account is free at bubble.io

  Tip! For more information about how the import works, known limitations, and tips for setting up your Figma file for best results with this import, visit the Bubble Manual.

  Connect Bubble to Figma

  The import tool exists in the Bubble editor and will ask for your Figma API Key. This is so Bubble can access the Figma file you specify and see all its contents. This integration can only access the specific files you tell it to, and will not make any changes to those files in Figma.

  Note: This is a one-time import. Bubble does not maintain any kind of open connection with Figma. If you want to import the same file again, repeat the steps below.

  In Figma

  To import a Figma file to Bubble, you'll need:

  • Your account's Figma API Key
  • The ID of the file you want to import

  To add a Figma API key in Bubble, you will need to generate a Personal Access Token in Figma.

  1. Go to the File Browser.
  2. Click your name at the top left and go to the Settings tab.
  3. Under Personal Access Tokens, click Create a new personal access token.
  4. Copy this token. This is your Figma API key.

  Each Figma file has a unique URL containing its ID. The file ID is the string of random alphanumeric characters found in the section of the URL after figma.com/file/.

  

  To find and copy the ID of the Figma file you want to import:

  1. Open the Figma file you want to import.
  2. Copy the file's ID from your browser's address bar. If you're in the Figma Desktop App, right-click the file's tab to Copy link and paste it in a browser's address bar to view and copy the file ID.

  In Bubble

  1. Navigate to your app in Bubble.
  2. Click Settings from the left side panel.
  3. In the General tab, scroll down to the Design import section.
  4. Enter your Figma API key and the file ID.
  5. Click Import. The import can take a few moments depending on the size of your Figma file.
• Pendo and Figma

  Pendo Guidance in-app messaging campaigns allow you to tailor messaging to specific segments of users to ensure they’re using the features most beneficial to them.

  They are also a great tool to capture user feedback on new features and proposed enhancements.

  Embed a live view of a public Figma file in any Pendo Guide to:

  • Get input early in the development process to ensure you're solving the right customer concern.
  • Get feedback on prototypes from your power users, segmented by feature usage.
  • Get higher response rates and more precise feedback when customers are active in your app.
  • Reduce churn by keeping your customers in the loop on the latest feature enhancements being planned.

  Note: The Figma integration is currently only available for use with Pendo Guidance.

  Embed a Figma file in a Pendo Guide

  You can embed any file or prototype, regardless of the file's link sharing settings. Your app visitors can interact with Figma Live Embeds based on:

  • Their Team or Organization permissions
  • The file's link sharing permissions

  When using embeds in Pendo Guides, Pendo recommends using public files so any visitor can interact with them.

  In Figma

  1. Open the file you want to embed in a Pendo Guide.
  2. To link to a specific frame in the Figma file, select the frame you'd like to embed.
  3. Click the Share button in the toolbar.
  4. Check the box to Link to selected frame (Optional)
  5. Update your Link Sharing permissions to determine who can interact with the embed (Optional).
  6. Click Get Embed Code.
  7. Click Copy to add the public embed code to your clipboard.
     

  In Pendo

  Add Figma to an existing Guide or create a new Guide. You can only add one Figma embed to each Guide.

  1. Go to the Guides section in Pendo.
  2. Click the + Create Guide button in the top-right corner.
     
  3. As an example, select the How Can We Improve? Open Text Poll template.
  4. Pendo will ask you to give your Guide a name. Click the Manage in my app button.
  5. Enter the URL for your app in the field provided and click Launch Designer.
  6. Click the blue + plus icon above the text box to add Building Blocks to the Guide.
     
  7. In the Advanced section, select Code Block.
  8. Paste your Figma embed code in the HTML tab. You may need to adjust the width and height in the code to fit your Guide. Click Done to apply.
  9. Add any other [Building Blocks](Building Blocks) to the Guide (optional). Use the Activation functionality to choose where your guide is displayed.
  10. When you’re finished editing the Guide click Save in the menu bar. Click Exit to return to Pendo.

  Publish the Guide

  Now you can publish the Guide to a segment of your users. You can choose an existing segment, or create a new one.

  1. In the Segment section, click Edit to choose a Pendo segment.
  2. Select an existing segment, or create a new one to view the Guide.
  3. Update the status of the Guide from Draft to Public. This will publish the Guide.
  4. Pendo will now present the Figma prototype to your target segment. Users can enter their message in the field provided and click Submit Feedback to send.

  Remove a Figma embed

  To remove an embedded Figma file from your Pendo Guide:

  • Edit the Guide and remove the code block for the Figma embed.
  • Delete the entire Guide.
• Maker and Figma

  Maker is the fastest way to go from design to live experiences on your site.

  Designers and marketers use Maker to create and personalize web content for their landing pages, product pages, or blog posts to increase engagement and conversions.

  Convert your Figma files into a dynamic and fully responsive webpage within minutes. Add the Figma file link to the Maker editor, and the Figma to web engine does the rest.

  Maker’s Figma Integration:

  • Seamlessly converts your designs to fully editable, responsive web pages in minutes
  • Lets you freely edit the imported layout in Maker's drag-and-drop editor
  • Enhances the page with videos, data from e-commerce stores, live streams, and more
  • Keeps your layers, groups, and elements in the same structure as your Figma file
  • Remembers the last file you imported for convenience and efficiency

  Import a Figma file to Maker

  
  In Figma

  1. Open the file you'd like to import to Maker.
  2. Select the Page with your design, then right-click and Copy Link to Page.
     

  In Maker

  1. Create a new Story in Maker.
  2. Navigate to the elements panel in the left sidebar and search Figma.
     
  3. Paste the Figma file link and select Add.
     
  4. Grant Maker access to your Figma account.

  Once Maker converts your design, you can continue to edit the elements within the drag and drop editor.

• Test your Figma prototypes with Maze

  Before you start

  Who can use this feature

  Users on Any Plan

  Users with View access to a Prototype can copy the share link.

  Users with Editor and Owner access can edit a Prototype's share settings.

  New to Prototyping? Check out our Getting Started with Prototyping guide.

  Maze allows you to test your Figma prototype with real users. Gain insight and build better products with usability metrics and valuable feedback.

  Use Maze to:

  • Run usability testing on Figma prototypes
  • Create missions for users to complete
  • A/B test designs to compare performance
  • Get quantitative data like success rates, misclick rates, and duration.
  • Review heatmaps for each screen in your prototype
  • Ask follow-up questions with scales or open-ended questions
  • Find the best user flow for your designs
  • Run in-person tests using a single device

  How it works

  Maze uses your Figma prototype's share link to create a new project in Maze. Maze will need read-only access to all your Figma Files to import the information needed to create a user test.

  Tip! If you're new to Maze, you can create a Maze account for free or paste the Figma prototype link on the Maze website.

  Import a Prototype from Figma

  In Figma:

  1. From your File, click the play icon to enter presentation mode.
  2. Click the Share Prototype button in the menu bar. This will open the Sharing modal for the Prototype.
     
  3. Adjust the Link Sharing Discovery settings to Anyone with the link.
  4. Click Copy link to copy the prototype's URL to your clipboard.

  Learn more about sharing Figma prototypes.

  In Maze:

  1. Log in to Maze and open the Projects dashboard.
  2. Paste the link to your Figma prototype.
  3. Click + New Project.

  Visit the Maze Help Center for more on creating user tests.

  Test a Prototype in Maze

  Once you have imported a Figma prototype to Maze, it’s time to start testing.

  1. Create a maze with blocks of missions and questions. Learn more about the type of blocks you can use in the Maze Help Center.
  2. Click Start testing in the top menu.
  3. Copy and Share the maze URL with people to get results.
  4. Access your results and report.

  Update the Prototype in Maze

  If you make changes to a prototype in Figma, you’ll need to update the prototype in Maze as well. You can either create a new maze with the updated prototype or refresh the prototype in an existing maze.

  Create a new maze

  1. Open the current Maze project based on the previous version of the prototype.
  2. Click the Import new prototype version in the Draft maze column on the left.
  3. Maze will create a new draft test based on the latest version of the prototype.

  Update an existing maze

  If you’ve already started creating your Maze test, you can update the prototype from the creation dashboard.

  1. Open the current Maze test you’ve been working on.
  2. Click Refresh my prototype to update the Figma prototype in Maze.

  Need help using Maze? Check out The Official Guide to Using Maze or contact the Maze team at support@maze.design.

  Disconnect Maze from Figma

  If you want to remove the Maze integration, or remove access, you can do so in your Figma account Settings. 

  1. Click on your name to open your account and select the Settings tab.
  2. Scroll down to the Connected Apps section.
  3. Click Revoke access next to the Maze application.
• Coda and Figma

  Coda is a new doc for teams. Build Coda docs that run meetings, track big launches, or help you remember when to water the plants.

  Coda comes with a set of building blocks you can use to build a tool that evolves with the needs of your team:

  • Add sections and folders for infinite structure
  • Create tables that talk to each other
  • Create buttons that connect with other applications

  There are two ways you can use Coda and Figma together:

  • Figma Live Embeds: Bring your live public or private Figma frames into any Coda doc.
  • Figma's Coda Pack: Get an even deeper experience with your Figma files. Push and pull important information, like changes to files or new comments.

  Embed Figma files and prototypes

  Figma Live Embeds allow you to add live Figma files or prototypes into other websites or apps. Add links to Figma files anywhere in Coda to reveal the latest and greatest frames.

  Coda supports private or public embeds, so you can collaborate with your team, or share with the world. Collaborators can interact with embeds based on:

  • Their team or Organization permissions
  • The file's link sharing settings

  To embed a file in Coda:

  1. Open the Coda doc you want to add the embed to
  2. Type /Figma in the Coda canvas and select the Media option:
     
  3. Coda will display the embed alongside the contents of the your Coda doc.
  4. You can now view the file or prototype in Notion. Learn how to interact with File embeds and Prototype embeds.

  Tip! You can also paste a Figma link directly into the canvas. Coda will open a modal that allows you to choose a Display as option.

  Select Embed from the options.

  

  Install the Figma Pack

  Packs connect Coda to other products, like Figma. With Figma Packs you can add Figma data to:

  • Tables: Import live data around Figma files and projects.
  • Embeds: Import live Figma mocks into your doc.
  • Buttons: Use buttons to send comments back to Figma.

  To start using Coda and Figma, you need to add the Figma Pack to your Coda doc.

  You can connect more than one Figma account to your Coda doc. As part of that process you'll need to decide who can view and interact with data from Figma.

  1. Click Explore in the top-right corner and select Packs from the menu:
  2. Select Figma from the list of available Packs. This will open a pop up over your current doc.
  3. Click the Sign in to install button.
  4. Grant Coda access to your Figma account. Click Allow access to confirm.

     Note: This will only allow Coda to have read access to your files, as well as your name, email, and profile picture.

  5. Select who can view Figma data in the Coda doc. Choose from:
     • You and anyone this doc is shared with (Recommended): Anyone with access to this Coda doc will be able to view Figma data.
     • Nobody: Nobody will be able to view Figma data in this Coda doc.
  6. Select who can take actions in Figma from the Coda doc. Choose from:
     • Nobody: This will still allow other people on the doc to view Figma data, but not interact with it. Choose this option if you don't want anyone else in the doc to be able to interact with the file in Figma.
     • Only you: Collaborators will need to access the file via their own Figma login to interact with the file. Choose this option if you want people to interact with the file under their own Figma account.
     • Anyone this doc is shared with: Everyone can interact with the file in Coda, but they will need to sign in under the same Figma account. Choose this option if you are comfortable with letting anyone on the doc take action on the file.

  Want to view templates or adjust your settings? Click on the Figma Pack in the Packs Panel. From here you can add Building Blocks or adjust your Settings.

  Use Coda with Figma

  Access live data via links

  One of the most powerful features of Packs is reading any information shared via a URL.

  For example, if you have a Table with links to Figma, you can call on information about that link like comments, images, and who's modified the file.

  1. Paste a link into a table.
  2. Coda will suggest columns for the table using data from the link.
  3. Click Add to add the column to the table.

  Tip! You can also include Pack buttons in tables. Select the Button format and click New button. Customize the action the button using any of your installed Packs.

  Custom Pack Buttons

  The Figma Pack allows you to create a button in the Coda doc that lets you comment on a File in Figma.

  The + menu allows you to view all pre-packaged buttons from your installed Packs. If you have multiple Packs, you'll see all of them listed in this menu as well.

  1. Click the (+) icon to add a new block to your Coda doc.
  2. Click Button to add a new button.
  3. View any pre-packages buttons from installed packs.
  4. Click + New Button to create a new one.

  You can also include Pack buttons in your tables. To begin, choose the Button column format. Customize the action the button will take using your installed Packs.

  

  Custom Pack Formulas

  You can also use Coda's formula language to access more functionality.

  Access the Figma pack via the slash command:

  1. Type /figma to access the special formula building blocks.
  2. Select the Figma pack from the options.
  3. Click Manage to open the Figma pack in the sidebar.

  Or, from the Packs section in the sidebar:

  1. Click Explore in the toolbar to open the sidebar.
  2. Select Packs from the options.
  3. Click on the Figma pack in the list: 

  For the Figma pack, you can use the following formulas:

  • File: Use the file ID to get live data from the Figma file.
  • File History: Use the file ID to return the version history of that file.
  • Image: Use the frame ID to return an image of that frame's contents.
  • Comments: Use the file ID to return any comments on that file.
  • ProjectFile: Use the project ID to return the ID, name, thumbnail, and last modified date for all files in that project.
  • Projects: Use the team ID to return the IDs and names of all projects in that team.

  

  Click and drag the formula from the sidebar into the doc.

  Remove Figma from Coda

  Remove an embed or formula

  To remove an embedded Figma file from your Coda doc:

  1. Select the embed or formula in the Coda doc.
  2. Press the Delete key to remove the embed or formula.

  Remove the Figma Pack

  To disconnect your doc from Figma, you can remove the Figma pack.

  1. Click the gear icon to open the Packs section of the doc settings.
  2. Select the Figma pack.
  3. Click the three dot menu near the top-right corner and select Remove Pack.

  

  Tip! Visit help.coda.io to learn more.

• Notion and Figma

  Notion is an all-in-one workspace for your notes, tasks, wikis, and databases.

  Blocks allow you to add different types of content to your Notion pages. From bullet points to images, to embeds and code snippets.

  The Figma block lets you embed a live view of a public Figma file on any Notion page. This allows you to:

  • Embed Figma files inside your meeting notes or design specs.
  • Share your designs with teammates who may not use Figma.
  • Collect design feedback from collaborators.

  Note: Figma embeds only work in browser-based applications. You can only use file and prototype embeds when using Notion in the browser, not in their native applications.

  Embed a Figma file in Notion

  You can embed any file or prototype, regardless of the file's link sharing settings. Collaborators can interact with Figma Live Embeds based on:

  • Their team or Organization permissions
  • The file's link sharing permissions

  In Figma

  1. Open the file you want to embed in Notion.
  2. To link to a specific frame in the Figma file, select the frame you'd like to embed.
  3. Click the Share button in the toolbar.
  4. Check the box to Link to selected frame (Optional)
  5. Update your Link Sharing permissions to determine who can interact with the embed (Optional).
  6. Click Copy link.

  In Notion

  1. In Notion, navigate to the page where you'd like to embed your Figma file or prototype.

  2. There are two ways to add a Figma Live Embed:

     • Paste the URL you just copied to your clipboard, select Embed Figma from the dropdown or press return / enter .
       

     • Type in the slash command /figma, then paste the file's URL into the embed block.

       

  3. To resize the embed, hover your cursor over the embed and drag the black bars.

     

  4. You can then interact with the file or prototype. 

  Remove a Figma embed

  To remove an embedded Figma file from your Notion page, hover over the embed with your cursor, and click the ⋮⋮ that appears to the left, then click Delete.

  

  Tip! Learn more about Notion embeds in their Help Center.