Related Videos

• 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.
• Embed files and prototypes with Figma Live Embeds

  Before you Start

  Who can use this feature

  Users on any Figma team or plan can use Figma Live Embeds

  Users with View access to the file can interact with an file embed.

  Users with View access to the file can interact with an prototype embed.

  Want to build support for Figma embeds into your website or application? Check out our developer documentation for more information on the Figma Live Embed kit.

  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.

  

  You can only add Figma Live embeds to websites or browser-based applications. It's not possible to embed live files or prototypes within native applications.

  Embed a file or prototype

  Before you start

  You can embed any file or prototype, regardless of the file's link sharing settings.

  When you're logged into Figma and open a page with an embed, Figma will also add you to the file or prototype in Figma. Your permissions on the file will depend on:

  • Your access to the team or Organization the file lives in
  • The link sharing settings of the specific file

  We strongly advise against embedding a file or prototype on a public website. Figma has a limit of 50 active Editors on a file, beyond this you may encounter performance issues.

  Embed files

  When you embed a file, you have the option to link to a specific page or frame within the file.

  1. In Figma, open the file and go to the page you want to embed.
  2. Select the frame you'd like the embed to show (optional).
  3. Click the Share button in the toolbar.
  4. To show the current selection in the embed, check Link to selected frame.
  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.

  

  Embed prototypes

  You can only have one active prototype per page in Figma, you can have as many pages as you want within a file.

  When you embed a prototype, you will need to choose which prototype you would like to show.

  1. In Figma, open the file and page the prototype lives on.
  2. Click the Present icon in the toolbar to open the prototype in Presentation view.
  3. Click the Share button in the toolbar.
  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.

  Add Figma Live 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 any of the following applications:

  • Trello and Figma
  • Jira and Figma
  • Coda and Figma
  • Notion and Figma
  • Dropbox and Figma
  • Storybook and Figma
  • Zeroheight and Figma

  Interact with embeds

  Note: If you have a Figma account, opening a web page with an active embed will also add you to the file or prototype in Figma. You'll be able to access the file or prototype again in your Recent files.

  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): you can view the embed, regardless of your permissions on the file.

  If link sharing is off (Private filee): you need to be a Viewer or Editor on the file to view the embed. Or be a part of the team or Organization the file lives in.

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

  

• 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.
• Receive Comment Notifications in Slack

  Before you Start

  Who can use this feature

  Users on the Professional Plan can use the Slack integration to send Comment Notifications to Slack.

  You can connect Figma to your Slack account. This ensures you receive notifications in Slack when someone comments on your Files. 

  Every Comment notification in Slack will include:

  • Team Member's name
  • File name and link
  • Contents of the Comment

  

  Set up Slack Comment Notifications

  Send notifications to  Public or Private Slack channels. Or, create your own notification stream by sending Comments to the Slackbot Slack Channel. Notifications are set at a Figma Project level. You can only set one channel per Project. 

  Tip! You can have notifications from multiple Projects feed into a single channel.

  Enable Comment Notifications from the Project in the Figma. 

  1. Open the Project Page in the File Browser.
  2. Click on the Project name in the toolbar and select Manage Slack Notifications: 
  3. Click the Choose a Channel button.
  4. Select the channel you'd like notifications to Post to:
  5. Click Authorize to confirm.

  Note: We don't have access to your messages in Slack, only the ones we post to your selected channel. We can also access your:

  • Email address
  • Name
  • Slack handle
  • Profile Picture
  • (you selected) Channel

  Select another Slack Channel

  You can update the Slack Channel that a Project's Notifications are sent to. You can do this from the Manage Slack Notifications setting on the Project Page.

  1. Open the Project Page in the File Browser.
  2. Click on the Project name in the toolbar and select Manage Slack Notifications.
  3. We'll show you which Channel Notifications are currently sending to. Click the Change Channel... link to change this to another channel.
  4. Select which channel you'd like to change it to using the Post to drop down field.
  5. Click Authorize to confirm.

  Turn Off Notifications

  You can turn off Slack Notifications from the Project Page of each Project.

  1. Open the Project Page in the File Browser.
  2. Click on the Project name in the toolbar and select Manage Slack Notifications.
  3. Click the Turn off Notifications button: 
  4. Comment Notifications will no longer be sent to Slack for that project.

  Enabled Slack Notifications on more than one project? You will need to repeat this process for each Project. To remove the integration, you will also need to Remove Figma from Slack.

  Remove Figma from Slack

  If you'd like to completely remove the integration, you can disconnect it from Slack. You will need to disconnect Figma from Slack's end.

  Slack have detailed instructions on how to remove apps in:  Remove apps and custom integrations from your workspace.

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

• Storybook and Figma

  Storybook is an open source tool for developing UI components across many different frameworks. Use Storybook to:

  • Create code-based components that can be used across different platforms and devices.
  • Collaborate with designers, engineers, and product managers.
  • Showcase components in an interactive development environment, without all the distractions.
  • Show different use cases and examples for implementing components.
  • Connect addons for prototyping, testing, and documentation.

  Connect Storybook to Figma to embed Figma files and components within Storybook. This allows you to see your designs from your design system or library in Figma alongside your code-based components.

  Learn more about Storybook in their docs and tutorials.

  Connect Storybook to Figma

  To connect Storybook to Figma, you will need to install the Figma addon.

  1. Install the addon:

      npm install --save-dev storybook-addon-designs
      # yarn add -D storybook-addon-designs
     

  2. Register the addon in your .storybook/main.js file:

      // .storybook/main.js
      module.exports = { addons: ['storybook-addon-designs']
      }
     

     If you're using Storybook@5.0.x, use this module instead.

      // .storybook/addons.js
      import 'storybook-addon-designs/register'
     

  For detailed instructions, check out the Figma addon readme on GitHub.

  Embed files or frames in Storybook

  Figma Live Embeds allow you to add live Figma files or prototypes into other websites or apps.

  Embed files or prototypes in Storybook, regardless of the file's sharing settings. Share private files within a team, or public files with the world.

  Collaborators can interact with embeds based on their team or Organization permissions.

  In Figma

  Copy the URL for the file or frame you’d like to embed in your story.

  1. Open your Figma file in the Editor
  2. Click the Share button.
  3. Click the Copy link button. If you're using the Figma web app, copy the URL from the browser’s address bar.

  Tip! You also have the option to select a specific Frame to embed. From the share modal, check Link to selected frame.

  In Storybook

  Use a parameter to associate Figma files and frames to your story.

  1. Open your stories file (in many cases, it’s named like *.stories.js)

  2. Add a story parameter named design:

      export const myStory = () => <Button>Hello, World!</Button>myStory.story = {
         parameters: {
            design: {
               type: 'figma',
               url: ''
            }
         }
      }
     

  3. Paste the copied URL to the url field

• Zeroheight and Figma

  zeroheight allows you to keep your design system resources in one place. Yse zeroheight to:

  • Establish and outline the principles of your design system.
  • Craft and maintain living style guides.
  • Document your Styles and Components and educate Team Members on how to use them.
  • Collate related resources in one place.

  Connect zeroheight to Figma, to share your Styles and Components. This allows you to view your Figma Styles and Components alongside your other design system resources.

  You will need to create an account with zeroheight first: Sign up for a zeroheight account. Learn more about zeroheight on their website: https://zeroheight.com/

  Allow zeroheight to access your Figma account

  You will need to give zeroheight read-only access to your Figma account. This allows zeroheight to access the Figma API on your behalf.

  Zeroheight can only access Files you share with them. Authorizing zeroheight does not give them write access to your Files. Or, allow them to access other Files in your Figma account.

  Once you've signed up for a zeroheight account:

  1. Login to your zeroheight account.
  2. Head to the Uploads Dashboard: 
  3. Click the Add New Upload button: 
  4. Click the Upload button next to the Figma icon:
  5. You'll need to allow zeroheight to access your Figma account. This will prompt you to login to your Figma account and grant access. Click Authorize to proceed: 
  6. Sign in to your Figma account and click Allow access:

  Share Figma Files with zeroheight

  To open a Figma File in zeroheight, you will need to share the File's URL. This allows zeroheight to access any Styles or Components within that specific File.

  It doesn't matter if the File has View or Edit access. zeroheight will only need to view the File to access any Styles or Components.

  Note: Due to the Figma API, zeroheight can only import Styles that you have applied to Layers in that File. If you're missing any Styles, you can apply these to a Layer in the original File.

  Copy the Figma File link

  You will need to copy the File URL from Figma. There are a couple of places you can find the File URL.

  • From the URL in the browser: Copy the File's URL in the browser window: 
  • From the File's Share modal: 
    • Click Share on the File 
    • Use the Copy link button to copy the URL to your clipboard: 

  Share the link with zeroheight

  When you first connect to zeroheight, you can add a Figma File link: 

  Access this screen again by clicking the Add new upload link in the Uploads tab:

  1. Go to the Upoads tab:
  2. Click the Add new upload link: 
  3. Paste the Figma link in the field provided: Click Add file to add the File to zeroheight: 
  4. zeroheight will download the Figma File to your account: 
  5. The File will now show up in the Uploads dashboard:

  Add Styles and Components to your Style Guides

  Insert any Figma Styles and Components into your Styleguides in zeroheight.

  1. Go to the styleguides tab in zeroheight: 
  2. Select the Styleguide from the list:
     

     Note: If you haven't created a Styleguide yet, click the Create styleguide button to add a new one:

  3. Select the page you'd like to add your Figma content to.
  4. Click on the design block to add content to your page: 
  5. If you're adding this to an existing list of Styles or Components, click the Add block:
  6. You'll see the Figma file in the browser on the left: 
  7. Click the checkbox next to an individual Style or Component to select it:
  8. Or use the checkbox at the top of the select all Styles or Components in the list:
  9. Click the Add button to add them to the page: 
  10. You can then click-and-drag to rearrange:

  Made Changes to your Figma Files?

  If you have made a change to any Styles or Components in Figma, you will need to update the File in zeroheight.

  1. In zeroheight, open the Uploads Dashboard.
  2. Click the Update File icon: 
  3. Updates are then applied to any Styles and Components in zeroheight.

  Disconnect zeroheight from Figma

  If you want to remove the zeroheight integration, or remove access, you can remove it from your Connected Apps section:

  1. Open Figma and go to your Account Settings: 
  2. Find the Connected Apps section.
  3. Click the Revoke access link next to the zeroheight application:

  If you have any questions or issues with using Figma and zeroheight, please reach out to the Zeroheight Team!

• Avocode and Figma

  Avocode allows you to automate your design workflow for hand-off. You can use Avocode in the browser, or via their macOS, Windows or Linux apps.

  You can use Avocode to turn your design files into exportable assets. Avocode allows you to:

  • Keep your designs organized and in sync with version history.
  • Automate the preparation of assets for export.
  • Batch export assets in multiple formats and sizes.
  • View and export your Styles and Properties in a variety of code languages.

  The integration allows you to export your Frames from Figma to Avocode. From there, you can create prototypes and prepare your assets for hand-off. 

  Note: The integration between Figma and Avocode only works with the web-version of Avocode. You can only import Figma designs into Avocode in the browser. After your design file is synced in Avocode, you can inspect comment on it also from the Avocode desktop app.

  In this article we will cover how to:

  1. Connect Avocode to Figma
  2. Export Frames to Avocode
  3. Updating Exported Frames
  4. Disable the Avocode Integration

  Note: You'll need to create an account with Avocode before using the Integration. Learn more about Avocode.

  Connect Avocode to Figma

  The Avocode integration is already added to your Figma account, by default. To share your designs with Avocode, you'll only need to enable the integration.

  You can use the Avocode integration on both the Figma Desktop and Figma Web App.

  1. Login to your Figma account and open a File in the Editor.
  2. Open the main menu (in the top left corner) and select Integrations from the list: 
  3. Select Avocode from the options.
  4. The dialog indicates we have enabled the Avocode integration. This dialog will also give you some basic information on how to export your designs
  5. Click Got it to return to your File.

  Export Frames to Avocode

  We export Frames to Avocode via the Export modal. You can export many Frames at once.

  Before you get started, you'll need to make sure you have logged in to app.avocode.com in the browser. If you have multiple teams in Avocode, make sure to also select the appropriate team.

  In Figma

  You can export Frames to Avocode via the Export modal.

  1. Open the File you want to export to Avocode.
  2. Select the Frames you wish to export. You can select a single Frame, or multiple Frames at once.
  3. Apply Export Settings to the selected Frames in the Properties Panel. Getting Started with Exports.
  4. In the main menu, select File > Export. Or, use the keyboard shortcut:
     • macOS: Command-Shift-E
     • Windows: Control + Shift + E
  5. This will open the Export modal in the top-right corner of Figma. You'll see a preview of all the Frames that we will export to Avocode.
  6. Click the Image drop-down in the top-left corner of the Export menu and select Avocode from the options: 
  7. Click Export to share your Frames with Avocode.
  8. Avocode will open in a browser tab.

  In Avocode

  Once we transfer you to Avocode, Avocode will prompt you to select a Project.

  1. Select the Project using the drop down provided and select Add to Project:
  2. Or, select Create a New Project:
     1. Give the Project a Name.
     2. Choose a Platform.
     3. Click Create Project:
  3. Your Figma Frames will be imported into the Project as Artboards: 
  4. After the design sync is complete, double-click on any Frame to open it in Avocode to view it in the Inspect mode. There you can export images, measure distances, pick colors and generate code in 10 languages.

  Updating Exported Frames

  The integration allows you to export Frames from your Figma Files to Avocode.

  If you make adjustments to those Frames in Figma, you will need to export a new version of that Frame to Avocode.

  You will be able to browse and switch between different versions of your Frames in Avocode.

  1. Select the Frame(s) you've made changes to.
  2. In the main menu, select File > Export. Or, use the keyboard shortcut:
     • macOS: Command-Shift-E
     • Windows: Control + Shift + E
  3. This will open the Export modal in the top-right corner of Figma. You'll see a preview of all the Frames Figma will export.
  4. Click on the arrow next to Image and select Avocode from the options:
  5. Click Export to share your Frames with Avocode: 
  6. Avocode will open in a browser tab.

  As you've exported a Figma Frame with the same name in the project, the design will be added as a new version. This will create a new version in the Project history. Also if you change a Figma frame and then sync it back to Avocode, it will be automatically added as a new version to the previous design.

  Note: You can open the original Figma File from the Avocode Project. This is handy if you want to check for any changes to the original Figma File.

  When you have no Artboard selected, click the View Figma File button in the right sidebar:

  When you have an Artboard selected, click the View Figma File link. You can find this in the Options menu in the right sidebar:

  Disable the Avocode Integration

  If you no longer want to export your designs to Avocode, you can disable the integration in Figma.

  1. Login to your Figma account and open any File in the Editor.
  2. Click on the hamburger menu in the top left corner and find Integrations in the list. There will be a check mark next to the Avocode integration: 
  3. Select this again to disable the integration.
  4. Figma will remove the check mark and show an alert so you know we have disabled the integration.

  Glossary

  Translating terminology between Figma and Avocode.

  Figma	Avocode
  Frames	Artboards
  File	Project
  Page	Project
  Properties Panel	Right Sidebar

  
  Check out Avocode's article on how to use the integration: Import Figma designs into Avocode.

• Trello and Figma

  Trello is a task and project management tool. Trello’s boards, lists, and cards enable you to organize and prioritize your projects.

  Power-ups allow you to extend the functionality of Trello. The Figma Power-up allows you to add live Figma files and prototypes to your cards in Trello.

  This allows you to communicate your designs to designers, developers, and other stakeholders.

  Add the Figma Power-Up

  Add the Figma Power-Up to personal boards, or boards within a team. Anyone in your Trello team can add the Figma Power-Up to a team board.

  1. Open the board in your Trello team.
  2. Click Show Menu in the upper right corner.
  3. In the Power-Ups section, click Add Power-Up:

     

  4. Search for the Figma Power-Up and click Add to select:

     

  5. Click Add to confirm and enable the Power-Up:
  6. When you view a card in Trello, you can access Figma in the Power-ups section.

  Note: Trello will only add the Power-Up to the current board. You will need to repeat the process to add the Figma Power-Up to any other Trello boards.

  Embed a file or prototype

  Figma Live Embeds allow you to add live Figma files or prototypes into other websites or apps.

  Embed files or prototypes in Trello card, regardless of the file's sharing settings. This allows you to share private files within a team, or public files with the world.

  Collaborators can interact with embeds based on their team or Organization permissions.

  Tip! You can add more than one embed to a Trello card. When you have more than one embed on a Trello card, you can click Show all attachments to view all embeds.

  In Trello

  Attach Figma files or prototypes from the card in Trello.

  1. Open the card you want to add the embed to.

  2. In the Power-Ups section, click on the Figma Power-Up.

     

  3. Choose between:

     • Attach a file
     • Attach a prototype

     

  4. Search for the file or prototype you want to add, by name. Click on the file or prototype name to attach it to the card.

     

  5. You can now view the file or prototype in Trello. Learn how to interact with File embeds and Prototype embeds.

     

  Note: Trello may prompt you to log in to your Figma account before you can select a file or prototype.

  Remove Figma from Trello

  Remove an embed

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

  1. Open the card you want to remove the embed from.

  2. Click Remove above the embed.

     

  3. Confirm you would like to Remove attachment.

     

  4. Trello will remove only that embed from the card.

  Remove your login details

  When you set up the Power-Up, you will have logged in to your Figma account. Trello will keep your Figma account linked to the Power-Up, so you don't have to login every time you use it.

  You can remove your personal settings, while keeping the Figma Power-Up active. This will prompt others to log in to Figma when they next use the Power-Up.

  1. Open the board in your Trello team.
  2. Click Show Menu in the upper right corner.
  3. In the Power-Ups section, click on the Figma Power-Up.
  4. Select Remove Personal Settings from the list.
  5. Click Clear data to confirm and remove your authentication from the Power-Up.
  6. Trello will prompt everyone to log in to Figma when they next use the Figma Power-Up.

  

  Remove the Figma Power-Up

  If you want to disconnect your Figma account from Trello, you can disable the Figma Power-Up. This will also remove any file or prototype embeds from your board, for all team members.

  1. Open the board in your Trello team.
  2. Click Show Menu in the upper right corner.
  3. In the Power-Ups section, click on the Figma Power-Up.
  4. Select Disable from the list.