Embed files and prototypes

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

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.
   

   Note: Password protected files cannot be accessed or viewed from an embed. If the file is only shared with members of your organization, they must be logged in to view the embed. 

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.
   

   Note: Password protected files cannot be accessed or viewed from an embed. If the file is only shared with members of your organization, they must be logged in to view the embed. 

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

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 shared within an organization, they’ll need to log in to access the file.
• If the file is password protected, it cannot be accessed from an embed.
• 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. Password protected files cannot be accessed from an embed.
  • 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.

Add Figma 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 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 →