Related Videos

• 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.
• Asana and Figma

  Asana provides clarity to help orchestrate your organization’s work, from strategic tasks to daily initiatives.

  With Asana you can:

  • Plan the work that needs to get done with tasks, milestones, and goals.
  • Align your team on the most important work and how it ladders up.
  • Determine who is responsible for what and when its due.
  • Understand and report on how your progress is tracking towards your plan.

  Embed Figma files directly into Asana to give teams all the context they need to gain clarity and execute on the work.

  This functionality is available as part of Asana’s Project Brief feature.

  Embed a file in Asana

  Teams use Figma to create user flows, wireframes, UI mocks, prototypes, and more. You can embed these files in Asana, so everyone on your team can reference your designs in the context of your related project work. Unlike static screenshots, live embeds update in real time to reflect changes made in a file.

  In Figma

  1. Open the file you want to embed in your Project Brief.
  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 Asana

  1. Open the project where you'd like to embed a Figma file.
  2. Go to the Overview tab.
  3. In the Key Resources section, click Create a Project Brief. If there's already a Project Brief, click anywhere on the title.
  4. When the Brief opens, click Edit in the top right.
  5. Click the place in the Brief you'd like to embed.
  6. Paste in the Figma link and a preview will expand below it.
  7. You can also click the + icon to the left of the line you're on and choose Insert Media. Paste the Figma link into the box and click Embed link.

  Learn more about interacting with embedded Figma files →

  Remove a Figma file

  To remove a Figma file from your project, remove the file link from the Project Brief.

  1. Open the project you'd like to remove the file from.
  2. Go to the Overview tab.
  3. Open the Project Brief you want to remove the file from.
  4. Click Edit near the top right corner.
  5. Select and delete the link for the Figma file.
  6. Click Done to apply your changes.

  Learn more about this partnership in Asana’s app directory →

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

  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.

• StoriesOnBoard and Figma

  StoriesOnBoard is a user story mapping tool to help remote teams understand the user needs, prioritize the right ideas, and collaborate with everyone on your user story map. Users with view-only rights to the story plans have free access to the tool.

  Use the Figma live embed in StoriesOnboard to:

  • Add Figma mockups and live design files to story card descriptions
  • Access the latest version of the Figma file from the story card
  • Zoom and pan around the embedded Figma file to view details of your designs or use full screen mode

  Tip! Learn more about creating and managing user stories in the StoriesOnBoard Help Center.

  Embed a Figma file

  User story maps give you a view of the entire development process, while individual cards allow you to create connections between your goals and tasks.

  You can add Figma links to your card descriptions to access the latest version of your design files.

  In Figma

  1. Open the file you want to embed in your card description.
  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 StoriesOnBoard

  1. Open the user story you want to add a Figma file to.

  2. Select the card to open the description.

  3. Click the Insert embed resource icon.

     

  4. Paste the link in the field provided and click Insert embed link.

  5. Click Save to apply your changes to the description.

  6. Your live design will be ready to preview from the card description. Pan around the file, use the and to adjust the zoom, or click or view it in full screen mode.
     

  Remove a Figma file

  There is no direct integration between Figma and StoriesOnBoard. To remove a Figma file from StoriesOnBoard, you only need to remove the file link from the story card.

  1. Open the story you want to remove the file from.
  2. Click to edit the card's description.
  3. Select and delete the link for the Figma file from the description.
  4. Click Save to apply your changes.
• 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.