Related Videos

• UXtweak and Figma

  The UXtweak Prototype Testing Tool allows you to conduct user testing directly on Figma prototypes with real users. This integration can provide invaluable insights into user behavior and preferences to help you build better, user-centered products.

  Use UXtweak to:

  • Conduct user testing on Figma prototypes
  • A/B test prototypes to compare their performance
  • Preference Test design options to pick the variant your audience resonates with
  • Get quantitative data like success rates, lostness metric, directness and time taken
  • Set up screening questions to filter out and segment respondents
  • Ask follow-up questions with scales, multiple options, or open-ended questions
  • Find the best user paths for your designs
  • Recruit testers using an Onsite Recruiting widget
  • Turn your website visitor into a prototype tester or order respondent from the global User Panel

  UXtweak uses your Figma prototype's share link to conduct usability testing studies. UXtweak will need view-only access to all your Figma files to import the information needed to create a user test.

  Check out the UXtweak documentation to learn more, or contact the UXtweak team for support.

  Note: You can start usability testing your prototypes right now with a free UXtweak account.

  Prepare your prototype in Figma

  1. Open your prototype in Figma.
  2. Click Present in the top right to launch your prototype.
  3. Select the flow you want to import into UXtweak for testing.
  4. Click Share prototype in the top-right.
  5. Using the dropdown, set Anyone else with a prototype link to can view prototypes.
  6. Copy the link to your clipboard.

  Test your prototype in UXtweak

  1. Log in to UXtweak and open your Dashboard
  2. Create a new Prototype Testing Study. Set the name, respondent identification options, and closing rules.
  3. In the Designs tab, paste the Figma prototype link into the prototype link field.
  4. Click Import to import your Figma prototype.

  5. Click Allow access to allow UXtweak to import your prototype.
  6. Add tasks you want users to complete on the prototypes and set up questions if needed.

  7. Use Preview to see how your study looks like before launching.

  8. Click Launch to set your prototype user testing study live.
  9. Click Copy study address from your dashboard and send the link to your users. Or, use the User Panel tool to order respondents from a global panel of participants.

  10. Open the Result page to access your results and export them if needed.

  To learn more about prototype user testing, read UXtweak’s guide on Figma Prototype Testing.

  Update your prototype in UXtweak

  If you make changes to your prototype in Figma, you’ll need to update it in UXtweak to reflect those changes.

  To update the prototype linked to the study:

  1. Navigate to Study setup
  2. Click on the Designs tab
  3. Click Synchronize or create a new Prototype Testing study with the updated prototype.

  Additional uses of UXtweak and Figma

  Aside from using the Prototype Testing tool for usability testing, you can use UXtweak to include user insights and feedback in the prototyping stages. Most notably you can:

  • Use Card Sorting to define information architecture for your prototype and make sure it meets user expectations.
  • Use the Tree Testing Tool to evaluate your information architecture and structure for intuitive navigation.
  • Use Five Second Tests to get a better understanding of users to help you deliver your message clearly.

  Disconnect UXtweak from Figma

  You can remove the UXtweak integration through your Figma account settings.

  1. Select your avatar  in the top-right corner to open the account menu.
  2. Select Settings to open the settings modal.
  3. Scroll to the Connected apps section.
  4. Click Revoke access next to the UXtweak application.

  

   

• Productboard and Figma

  Productboard is a product management platform that helps organizations get the right products to market, faster. Product teams can use Productboard to understand what customers need, prioritize what to build next, and align stakeholders around the roadmap.

  • Insights: Capture and collect all customer feedback and product ideas in a centralized repository
  • Prioritization: Prioritize product initiatives based on customer data and standardized processes
  • Roadmap: Align the company around a real-time, interactive roadmap
  • Portal: Validate ideas, share roadmap plans, and announce launches through a public-facing portal

  You can embed live Figma or FigJam files and Figma prototypes in the Productboard Editor UI.

  You will need to create a Productboard account to use this integration. This may require a separate paid subscription with Productboard.

  Embed a file or prototype in the Productboard Editor

  You can embed multiple files or prototypes in a Productboard Editor field and expand them to view or interact in fullscreen.

  You can embed content in any Editor UI found in the Insights, Feature, or Roadmap board. You will need permission to edit content in those boards.

  Review link sharing permissions for any files or prototypes you want to embed.

  Note: If you set file access to Only people invited to this file, you’ll need to log in to Figma before you can view the embed in Productboard.

  Embed a file or prototype

  1. Open the Figma file or prototype you want to embed.
  2. Select the Share button in the toolbar.
  3. Update link sharing permissions to determine who can view and interact with the embed in Productboard. Click Copy link.
  4. In Productboard, open the Editor field you would like to add an embed to.
  5. Paste the URL in the Editor field. You can now view the file or prototype in the Productboard Editor.

  Tip: To view or interact with the embed in full screen, select the expand icon in the upper right corner.

  Embed a specific frame

  1. From the file or prototype, select the frame you'd like to embed.
  2. Select the Share button in the toolbar.
  3. Check and update link sharing permissions as needed.
  4. Check Link to current selection then click Copy link.
  5. In Productboard, open the Editor field you would like to add an embed to.
  6. Paste the URL in the Editor field.

  You can now view the file or prototype in the Productboard Editor.

  Remove an embed from the Productboard Editor

  To remove a Figma or FigJam embed from the Productboard Editor:

  1. Select a text line below the embed.
  2. Press the Delete or Backspace key to remove the embed.
• Sprig and Figma

  Before you Start

  Who can use this feature

  Users on any plan

  Any Sprig Admin or Editor with can view access to the Figma prototype

  Sprig makes it easy to conduct high-impact research with your users throughout the entire product lifecycle. 

  You can use Sprig to:

  • Run concept and usability testing on one or many Figma prototypes within the same Sprig study
  • Ask users to answer questions and complete tasks while recording their video, audio, and screen
  • Access over 50 expert-built templates to get started quickly
  • Ask open-ended questions and have Sprig automatically cluster responses into actionable themes
  • Download and export responses, including time-on-task metrics and videos
  • Intercept users in-product so that you can deliver concept tests to a targeted audience to drive more accurate insights

  To learn more about Sprig, visit the Sprig website.

  Embed a prototype in a Sprig study

  In Figma:

  1. Open the prototype you want to embed in a Sprig study.
  2. Click to enter Presentation mode.
  3. Click Share.
  4. Adjust the sharing permissions to Anyone with the link, can view.
  5. Click Copy link.

  

  In Sprig:

  1. Click +New Study.
  2. Select Create from Scratch or Browse Templates and select an existing template.
  3. Click +Add Question and select a question type.
  4. Edit the question and then click Figma Prototype.
  5. Paste the prototype link into the text field.
  6. Click Audience.
  7. Select Shareable Link or Email.
  8. Click Launch Study.
  9. To view the study, click Copy and paste the link into your browser.

  For more information on creating Sprig studies, see Main Tasks on the Sprig website.

  Replace a prototype in a Sprig study

  Changes made to a Figma prototype are automatically reflected in your Sprig study. You may want to replace the prototype embedded in the study so that you can continue to work on your original design without impacting the study.

  To replace the prototype in Sprig:

  1. Open the Sprig study.
  2. Click Edit.
  3. Navigate to the question with the embedded prototype.
  4. Click the Figma Prototype text field and replace the existing URL with the updated prototype link.
  5. Click Save.

  Stop using a prototype in a Sprig study

  To stop using a prototype in a Sprig study, do one of the following:

  In Figma:

  1. Open the prototype.
  2. Click Share.
  3. Adjust the sharing permissions to Only people invited to this file. 

  Note: Modifying the sharing permissions will impact all users who attempt to access the file, even those outside of the Sprig study.

  The prototype will no longer display in the Sprig study. When viewing the study, participants may be prompted to log into Figma and request access to the prototype.

  In Sprig:

  1. Open the Sprig study.
  2. Click Edit.
  3. Navigate to the question that includes the prototype you want to stop using.
  4. Click the garbage can icon next to the prototype link to remove the prototype.
  5. Update the question wording as needed.
  6. Click Save Changes.

  Tip! If you need additional assistance, visit the Sprig documentation website or contact the Sprig Support team at support@sprig.com.

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

     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.

  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 (not available for embeds)	can edit, can view, can view prototypes only (not available for embeds)	can edit, can view, can view prototypes only (not available for embeds)	can edit, can view, can view prototypes only (not available for embeds)
  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

  

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

• Coda and Figma
  Coda is the all-in-one doc that brings words, data, and teams together. It comes with building blocksーlike tables that talk to each other and buttons that take actionーso anyone can make a doc as powerful as an app.

  With Coda, you can bring it all together—your team, documents, data, and even other apps.

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

  • Figma full-page embeds: Turn a page in your Coda doc into your Figma or FigJam file.
  • 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.

  Add Figma embeds to your Coda doc

  You can create a full-page embed from any Figma or FigJam link . For instance, your team might work out of one doc in Coda but consistently need to reference your Figma prototype or a retrospective held in FigJam. Embedding as a full page can give your team all the context they need to complete a workflow from start to finish, without constant tab and context switching.

  To get started with adding a full-page embed to your doc:

  1. Select New embed from the dropdown next to the New page option, at the bottom of the left sidebar.

     Note: You can also click the menu next to the name of an existing page, then choose New embed.

  2. You’ll see Figma in the grid of different services you can embed from. Select Figma and paste in the link to the content you’d like to embed.
  3. After your embed has been added, you can name the page and assign an icon, just like any other page in Coda.

  Update an embedded link

  To change the link you’ve embedded:

  1. Select Embed options from the menu next to the page name or find the Embed options icon in the upper right corner of the page.
  2. Paste in your new link, and click Update.

  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.