Try FigJam, our new digital whiteboarding product for free! Missed the keynote? Read about it here.

    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

      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 a file embed.

      Users with View access to the file can interact with a 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.

      Image of a Figma file embedded in a help articlee

      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.

      Annotated image of a file's share modal showing the steps for copying an embed code

      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:

      View embeds

      Interact with embeds 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 file): 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.

      Learn how to interact with embeds.

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

      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.

      Image showing an embed in an article with a prompt to log in to Figma to view

      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.

      Image showing an embed in an article with a message that the user doesn't have access to the file

      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 image showing the location of each feature listed above in a file embed

      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 image showing the location of each feature listed above in a prototype embed

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

    • Avocode is now a plugin
    • Bubble and Figma

      Before you start

      Who can use this feature

      Users on any Figma team or plan.

      This feature is available to all Bubble users and creating an account is free at bubble.io

      Bubble lets you create interactive, multi-user apps for desktop and mobile web browsers, without having to write a single line of code.

      Turn your designs into working prototypes and full-fledged applications. Import your Figma frames into Bubble, then add logic, workflows, and database capabilities to your designs. No coding required.

      Bubble's Figma integration will:

      • Import Figma frames as new pages of your app in Bubble
      • Upload images from your Figma file to your app in Bubble
      • Label the newly created Bubble elements with the same names as your Figma file

      This feature is available to all Bubble users and creating an account is free at bubble.io

      Tip! For more information about how the import works, known limitations, and tips for setting up your Figma file for best results with this import, visit the Bubble Manual.

      Connect Bubble to Figma

      The import tool exists in the Bubble editor and will ask for your Figma API Key. This is so Bubble can access the Figma file you specify and see all its contents. This integration can only access the specific files you tell it to, and will not make any changes to those files in Figma.

      In Figma

      To import a Figma file to Bubble, you'll need:

      • Your account's Figma API Key
      • The ID of the file you want to import

      To add a Figma API key in Bubble, you will need to generate a Personal Access Token in Figma.

      1. Go to the File Browser.
      2. Click your name at the top left and go to the Settings tab.
      3. Under Personal Access Tokens, click Create a new personal access token.
      4. Copy this token. This is your Figma API key.

      Each Figma file has a unique URL containing its ID. The file ID is the string of random alphanumeric characters found in the section of the URL after figma.com/file/.

      View of a browser address bar with a Figma file's URL highlighted at the ID

      To find and copy the ID of the Figma file you want to import:

      1. Open the Figma file you want to import.
      2. Copy the file's ID from your browser's address bar. If you're in the Figma Desktop App, right-click the file's tab to Copy link and paste it in a browser's address bar to view and copy the file ID.

      In Bubble

      1. Navigate to your app in Bubble.
      2. Click Settings from the left side panel.
      3. In the General tab, scroll down to the Design import section.
      4. Enter your Figma API key and the file ID.
      5. Click Import. The import can take a few moments depending on the size of your Figma file.
    • 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.

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

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

      4. Select Display card to provide your team with information on the file including an image thumbnail, comments, time last updated, and a preview.
        Card_view_for_links_in_Confluence.png

      5. Select Display embed to interact with the file or prototype from your Confluence page.
        Embed_view_for_links_in_Confluence__3_.png

      Tip! Learn more about using links in Confluence.

    • Dribbble and Figma

      When you're ready to show the world your work, you can share your designs in Figma directly to your Dribbble account.

      Sharing via Dribbble is supported from both the Figma website and the Figma Desktop Apps.

      In this article, we'll cover how to:

      1. Share a design to Dribbble.
      2. Disconnect Dribbble from your account.

      Share a design to Dribbble

      Your Figma account is already set up to share your designs to Dribbble. The first time you export a design to Dribbble, you'll be required to authenticate your Dribbble account.

      1. Login to your Figma account via the website or Desktop App.
      2. Open the file and select the Frame you would like to share:
      3. In the main menu, go to Integrations and select Dribble from the list:
      4. Click Export selection to confirm:
      5. You'll be redirected to Dribbble's authentication page, where you'll be prompted to sign in and authorize the connection. You will only need to do this once.
      6. Once authenticated, you'll be taken to a special New Shot page on Dribbble. This will load the selected Frame from Figma:
      7. You can then resize or crop your artwork and fill in some details, like you would do when you're adding a regular post to Dribbble:
      8. Complete the post in Dribbble.

      Disconnect Dribbble from your account

      If you want to remove the connection between your Figma and Dribbble accounts, then you can remove the connection from Dribbble's end.

      1. In your Dribbble account, head to your Social Profile Settings: https://dribbble.com/account/social_profiles
      2. Click the "X" icon above the Figma setting.
      3. The connection between the two will now be removed. You can always reconnect your Figma account to Dribbble again, using the instructions above.
    • 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:

      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.
        Toolbar__1_.png
      4. Select Figma from the apps list.
        Share.png
      5. Paste the link for your Figma file or prototype into the field, then press Enter / Return to apply the embed.
        Share__1_.png
      6. You can then interact with the file or prototype. Learn more in our Interact with live embeds article.

      Embedded_File.png

      Tip! You can also paste a Figma link directly into a Paper doc. Dropbox will then turn this into an interactive embed for you.

    • Flinto and Figma

      This feature has been developed by Flinto. For any questions regarding Flinto or the integration, please contact the Flinto team.

      Flinto is a Mac app used by designers to create interactive and animated prototypes. Flinto is only available for Mac. Learn more about Flinto.

      Flinto gives you access to powerful tools for animated transitions, micro-interactions, scroll-based effects and more. With Flinto you can:

      • Create custom animated transitions between Frames.
      • Design your own micro-interactions with Flinto's Behavior Designer.
      • Use a variety of touch gestures, including 3D touch.
      • Add GIFs and videos to your prototypes.
      • Export recording of your prototypes to share online.

      The integration allows you to import your designs from Figma into Flinto. You can then turn them into animated and interactive prototypes.

      Note: When importing Frames from Figma, Flinto will preserve most vector shapes and editable text layers. For any features that aren't supported, Flinto will flatten them into bitmap images.

      In this article we'll cover:

      1. Connect Figma and Flinto
      2. Import a Design from Figma
      3. Disconnect your Figma account from Flinto

      Connect Figma and Flinto

      Before you can import your designs from Figma, you'll need to authorize the connection between Figma and Flinto.

      This gives Flinto to access your Files, so they can import them into their app.

      You'll only need to do this once, the first time you import a File from Figma.

      1. Open the Flinto app.
      2. Click Import in the toolbar. Or go to Flinto > Import in the menu bar. 
      3. Select the Figma tab: 
      4. Click the Sign into Figma button: 
      5. Your web browser will open Figma in a new tab. If you're not signed in, you will be prompted to do so now. Otherwise, click the Allow Access button: 
      6. Click the prompt to return to Flinto.

      Import a Design from Figma

      Now that the connection is established, you can import your Figma Files into Flinto.

      You'll be able to select from the Files you've most recently opened. If you haven't recently opened the File - or don't see the File you're looking for - try opening the File in Figma first.

      1. In the Flinto app, click the Import button in the toolbar.
      2. Select the Figma tab. You can then select which File you want to import into Flint. Your most recently edited Files are displayed at the top: 
      3. Select the Screen size for the selected File. Frames. The default will be the size of the current document.
      4. Click the Import Frames button.
      5. Now you are ready to create your prototype in Flinto! Visit Flinto’s learn page to learn more about getting started.

      Disconnect your Figma Account

      1. Click the Import button in the toolbar to open the modal.
      2. Select the Figma tab. 
      3. Click on your profile picture in the bottom left corner and select Log Out:
    See more

    Connect, share, and learn from a global community of Figma users

    Join the Support forum