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

    Related Videos

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

      Embed_in_situ.png

      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.

      Copy_embed_code.png

      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:

      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.

      Embed_login_prompt.png

      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.

      No_access_prompt.png

      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

      Annotated_file_embed.png

      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

      Annotated_prototype_embed.png

    • 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.
        Screen_Shot_2020-01-27_at_4.55.29_PM.png
      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:

      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:
        Slash_command__1_.png
      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.

      Add_URL_then_embed.png

      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:Coda_Packs_Panel.png
      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.

      Screen_Shot_2020-03-23_at_4.49.03_PM.png

      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: Figma_Pack.png

      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.

      Custom_Pack_Formulas.png

      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.

      Remove_Pack.png

      Tip! Visit help.coda.io to learn more.

    • Notion and Figma

      Notion is an all-in-one workspace for your notes, tasks, wikis, and databases.

      Blocks allow you to add different types of content to your Notion pages. From bullet points to images, to embeds and code snippets.

      The Figma block lets you embed a live view of a public Figma file on any Notion page. This allows you to:

      • Embed Figma files inside your meeting notes or design specs.
      • Share your designs with teammates who may not use Figma.
      • Collect design feedback from collaborators.

      Embed a Figma file in Notion

      You can embed any file or prototype, regardless of the file's link sharing settings. Collaborators can interact with Figma Live Embeds based on:

      In Figma

      1. Open the file you want to embed in Notion.
      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 Copy link.

      In Notion

      1. In Notion, navigate to the page where you'd like to embed your Figma file or prototype.

      2. There are two ways to add a Figma Live Embed:

        • Paste the URL you just copied to your clipboard, select Embed Figma from the dropdown or press return / enter .
          Paste_URL.png

        • Type in the slash command /figma, then paste the file's URL into the embed block.

          Slash_Command.png

      3. To resize the embed, hover your cursor over the embed and drag the black bars.

        Resize_embed_in_Notion.png

      4. You can then interact with the file or prototype. Learn more in our Embed live files and prototypes article.

      Remove a Figma embed

      To remove an embedded Figma file from your Notion page, hover over the embed with your cursor, and click the ⋮⋮ that appears to the left, then click Delete.

      Delete_block.png

      Tip! Learn more about Notion embeds in their Help Center.

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

        Open_Power_Ups.png

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

        Add_Figma_Power_Up.png

      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.

        Select_Figma_Power-Up.png

      3. Choose between:

        • Attach a file
        • Attach a prototype

        Attach_a_file_or_prototype.png

      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.

        Select_file.png

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

        Active_embed.png

      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.

        Click_Remove.png

      3. Confirm you would like to Remove attachment.

        Confirm_Remove.png

      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_personal_settings.png

      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.

      Disable_Power-Up.png

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

        Manage_Apps.png

      2. Click Find new apps in the left sidebar and search for the Figma app.

        Click_Find_new_apps.png

      3. Click on the Figma app in the results, then click Get app in the top-right corner of the app listing.

        Select_Figma_from_search_results.png

      4. Click Get app to add the Figma app to your account.

        Click_Get_app.png

      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:

      In Figma

      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.

      Copy_Link__Link_to_selected_frame_.png

      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: View_Designs_section.png
      3. Paste the URL in the field and click Add design: Add_design.png
      4. You can now view the file or prototype in Jira. Learn how to interact with File embeds and Prototype embeds. Active_embed_Jira.png

      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: Remove_embed.png

      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. Manage_Apps.png
      3. Click on the arrow next to the Figma application to expand.
      4. Click the Uninstall button:

        Uninstall.png

    See more