···

    Zeroheight and Figma

    zeroheight allows you to keep your design system resources in one place. Use 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.

    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!

    Related Videos

    See more