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.

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

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