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.

    Related Videos

    • 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

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

      Note: This is a one-time import. Bubble does not maintain any kind of open connection with Figma. If you want to import the same file again, repeat the steps below.

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

      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.
        Share modal in the file Editor and Get Embed Code modal where code can be copied

      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.
        Guides section of Pendo with Create Guide button in 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.
        Blue plus icon in gGuide template for adding Building Blocks
      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:

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

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

      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.

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

    See more