Related Videos

• Embed files and prototypes

  Who can use this feature

  Supported on any team or plan. Applies to FigJam and Figma design.

  Anyone with can view or can edit access to a file or prototype can copy the embed code.

  Embed live FigJam files, Figma design files, and prototypes into other tools and resources. Embeds appear alongside other content, making them a seamless addition to any website or browser-based application.

  • Add style and component libraries in your design system documentation
  • Include detailed feature designs and explorations in PRDs, spec documents, or user stories
  • Keep FigJam files alongside meeting notes
  • Share presentations, templates, or resources
  • Embed or share prototypes in testing environments

  

  Caution: It’s not possible to add embeds within a native/desktop applications, you can only add embeds in browser-based applications.

  Figma design and FigJam files

  When you embed a file, you have the option to link to a specific page or top-level frame within the file. We recommend reviewing the file's link sharing settings before you embed it in a website or application.

  1. Open the page and select the top-level frame you'd like the embed to show (optional).
  2. Click Share in the toolbar.
  3. Update the default link sharing settings for the file. Set both the audience and the access level to determine the default access.
  4. To show the current selection in the embed preview, check Link to selected frame (optional).
  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.

  

  Prototypes

  You can have as many pages as you want within a file. Each of these pages can have multiple prototype flows within them.

  When you embed a prototype, you need to choose which page you want to share. If you embed prototypes on a specific page, people can access all flows on that page. You can also embed a specific flow.

  We recommend reviewing the file's link sharing settings before you embed it an external website or application.

  1. Open the file and page the prototype lives on. Click Present in the toolbar to open the prototype in presentation view and select a flow from the left sidebar.
  2. Click the Share button in the toolbar.
  3. Update the default sharing settings for the file and prototype. Set both the audience and the access level.
  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.

  

  Public or private embeds

  You can embed both public or private files and prototypes. People can interact with embeds based on the file’s default sharing settings, or a person’s permissions on the file.

  If the file is private or shared within an organization, they’ll need to log in to access the file.

  If they don’t have permissions on the file — or the file is shared publicly — they can access the file based on the file’s link sharing settings. Interact with embeds →

  Link sharing settings

  Link sharing settings allow you to set default permissions for a file or prototype. This means you don’t have to manage access for everyone independently.

  There are two settings that control link sharing. Your plan determines which link sharing settings are available in your files. Explore link sharing settings by plan ↓

  • A

    Audience

    Who can access the file or prototype.

    • Anyone with the link: anyone inside or outside your team or organization can access the file if they have the link.
    • Anyone with the link and password: people without a role on the file can access the file using the link and password.
    • Anyone at organization with the link (organizations only): only members of the organization can access the file. Members can only access the file is they open a link to that file.
    • Anyone at organization (organizations only): organization members can find this file when browsing and searching. Use this setting to share libraries with the organization. Guests can't access these files unless you invite them to the file or team.
    • Only people invited to this file: only people you explicitly invite to the file, or the team it lives in, can access the file.
  • B

    Access

    How the audience can interact with the file or prototype.

    • Can edit: gives edit access to the file. This allows people to edit the contents of the file. People with edit access can also move, rename, share, or delete the file.
    • Can view: gives view only access to the file. People can still view and inspect layers and properties in the file, as well as view prototype flows and connections in the editor and presentation view. They can also use collaborative features in design and FigJam files like comments, cursor chat, audio, and emotes.
    • Can view prototypes only (Figma design): gives access to the prototypes in that file, but not the underlying pages in the file. This is only available for Figma design files.

  Audience	Starter	Education	Professional	Organization	Enterprise
  Anyone with the link	can edit, can view	Can view	can edit, can view, can view prototypes only	can view, can view prototypes only	can view, can view prototypes only
  Anyone at organization	✕	✕	✕	can edit, can view	can edit, can view
  Anyone at organization with link	✕	✕	✕	can edit, can view, can view prototypes only	can edit, can view, can view prototypes only
  Anyone with the link and password	✕	can edit, can view	can edit, can view, can view prototypes only	can edit, can view, can view prototypes only	can edit, can view, can view prototypes only
  Only people invited to the file	✓	✓	✓	✓	✓
  Anyone else with a prototype link (Prototypes only)	✕	✕	✕	can view prototypes only, cannot access	can view prototypes only, cannot access

  Add Figma embeds to other applications

  Caution: It’s not possible to add or use these embeds within a native/desktop applications. You can only add and use embeds in the browser-based version of these applications.

  Some applications will allow you to embed a Figma file or prototype using just the Figma URL. Embed Figma files and prototypes into the browser-based version of these applications:

  • Coda and Figma
  • Notion and Figma
  • Trello and Figma
  • Jira and Figma
  • Dropbox and Figma
  • Confluence and Figma
  • P2 and Figma
  • StoriesOnBoard and Figma
  • Storybook and Figma
  • Zeroheight and Figma

  Explore all app integrations →

• 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

  

• 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 Coda. 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.

• 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.

  Note: Collaborators need to be signed in to Figma to view and interact with embedded files.

  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.

• Dropbox and Figma

  Dropbox Paper is an online workspace, where you can organize text, media, and files. Paper lets you collaborate with others and access your Paper docs from anywhere.

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

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

  Embed a file or prototype in Dropbox

  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 Paper 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 Dropbox

  1. Open the Paper doc you want to embed the file or prototype in.
  2. Click on an empty space in the doc.
  3. Click Add Media from the toolbar that appears at the bottom-center of the Paper doc.
     
  4. Select Figma from the apps list.
     
  5. Paste the link for your Figma file or prototype into the field, then press Enter / Return to apply the embed.
     
  6. You can then interact with the file or prototype. Learn more in our Interact with live embeds article.

  

  Tip! You can also paste a Figma link directly into a Paper doc. Dropbox will then turn this into an interactive embed for you.

• Jira and Figma

  Jira Software is a project and issue tracking tool for agile teams. Use Jira Software to plan, track, and manage releases for digital products:

  • Create projects using Kanban boards, Scrum boards, or roadmaps.
  • Plan sprints, prioritize and distribute tasks across your software team.
  • Access reports with real-time, actionable insights into how your team is performing.
  • Connect Jira Software to other Atlassian tools.

  You can connect Figma to Jira Software. This allows you to add design files and prototypes to issues or epics in your Scrum or Kanban boards.

  You will need to create a Jira Software account to use this integration. It's not possible to add embeds to Jira Align or Jira Service Desk using this integration.

  Check out our Figma Live Embeds article for more info on adding Figma Live Embeds to other tools.

  Install the Figma app

  Before you can embed files and prototypes in Jira Software, you will need to add the Figma app to your Jira account.

  You can do this from anywhere inside your Jira account.

  1. In the main menu, go to Apps > Manage your apps.

     

  2. Click Find new apps in the left sidebar and search for the Figma app.

     

  3. Click on the Figma app in the results, then click Get app in the top-right corner of the app listing.

     

  4. Click Get app to add the Figma app to your account.

     

  Add a file or prototype to Jira

  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 sharing settings

  In Figma

  You can only embed one Figma file or prototype in each Jira issue. 

  1. Open the file you want to embed in Jira.
  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 view and interact with the file embed.
  6. Click Copy link.

  

  In Jira Software

  With the Figma app installed your Jira issues will now have a Design section. This is where you can add and view Figma Live Embeds.

  1. Open the Jira issue you want to add an embed to.
  2. If the Designs section isn't shown, click the three dots under the title and select Designs:
  3. Paste the URL in the field and click Add design:
  4. You can now view the file or prototype in Jira.

  Remove Figma from Jira

  You can remove a single embed, or uninstall the Figma app to remove the app and all Figma embeds.

  Remove an embed

  If you want to delete a specific file or prototype, you can remove it from the issue in Jira.

  1. Open the issue you want to remove the embed from.
  2. Click Remove design next to the embed:

  3. Jira will remove that embed from the issue.

  Remove the Figma Power-Up

  If you want to disconnect your Figma account from Jira, you can uninstall the Figma app. This will also remove any file or prototype embeds from your board.

  1. Open the board in Jira.
  2. Click Apps in the menu bar and select Manage your apps.
  3. Click on the arrow next to the Figma application to expand.
  4. Click the Uninstall button:

     

• Notion and Figma

  Notion is an all-in-one workspace that combines your important work tools, like notes, docs, wikis, and project management, in one collaborative and customizable space.

  Embedding a Figma file preview lets you add your Figma files to Notion. File previews are automatically synced with Figma so the latest changes will be reflected in Notion. This allows you to:

  • View Figma files inside your meeting notes, project documentation, or design specs
  • Share designs with teammates who may not have access to Figma
  • Collect design feedback from collaborators

  Note: Embedded Figma files only work in browser-based applications. To use embedded files in Notion, you must use Notion in the browser and not the desktop application.

  Embed a Figma file preview in Notion

  You can embed a file preview for any Figma file or prototype. Anyone with access to the Notion doc will be able to view the file preview in Notion.

  1. In Figma, open the file you want to share.
  2. Do one of the following:
     • To link to a specific frame in the Figma file, select the frame you want to share, and then click Share in the toolbar.
     • To link to the entire Figma file, click Share in the toolbar.
  3. If you are linking to a specific frame, make sure the Link to selected frame checkbox is selected.
  4. Click Copy link.
     
  5. In Notion, navigate to the page where you’d like to share your Figma file.
  6. To add the file preview, paste the URL you copied and do one of the following:
     • Select Paste as preview to display the file as an inline preview.
     • Select Paste as mention to link to the file using a stylized link.
     • Select Paste as link to link to the file using a standard URL.
       
     • You can also type the /figma slash command in any block and paste the link into the field that appears.
  7. Notion may ask you to authenticate with Figma to access the file.

  Tip! Learn more about Notion link previews in this guide on Notion's Help Center.

  The Notion integration was built using Figma's REST API. Check out Figma's REST API documentation to learn how to build your own.

• P2 and Figma

  P2 is a communication tool for teams, based on private WordPress.com blogs. It provides a platform for calmed, asynchronous discussion — a space to share, discuss, review, and collaborate with your team in one spot, without interruptions.

  Figma live embeds let you:

  • Add live Figma files or prototypes to a P2 post or page.
  • Showcase your designs with teammates, clients, partners, and others who may not use Figma.
  • Collect design feedback from collaborators who can use P2 to voice opinions, use likes, thumbs up, or votes.

  Embed a file or prototype in P2

  In Figma

  1. Open the file you want to embed in P2.
  2. To link to a specific frame in the Figma file, select the frame you'd like to embed. To embed a prototype, launch the prototype in Figma.
  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 P2

  There are two ways to add a Figma live embed to a P2 post, page, or comment:

  • Click the icon in the editor toolbar to open blocks and search for Figma. You can also type /figma directly into the editor. Once the block is added, paste the Figma link into the URL field.
    
  • Paste the Figma link into the editor to automatically convert the link into a Figma block.

  Remove a Figma embed

  To remove a Figma embed from a P2 post, page, or comment:

  1. Enter Edit mode.
  2. Select the Figma block you’d like to remove.
  3. Delete it.
• 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.