Sync using the Figma Plugin

1) Open Figma

2) Download the zeroheight plugin for Figma

3) Open the plugin and you'll be able to sync Designs or Variables to zeroheight

4) When choosing Designs, copy and paste the URL of the current design file in to the "File share link"

5) You may be directed to Figma and prompted to authorize zeroheight to access your design file

6) This will open a browser window to authorize zeroheight to access the figma file and help with syncing your designs.

7) You can now sync all pages or page-by-page

8) When syncing is complete, you'll see your designs in zeroheight and click on the "Open in browser" icon to view your design uploads.

Note: If you're syncing variables using the URL method below, you can instead sync with the plugin. Once doing this, all subsequent syncing must happen via the zeroheight plugin. 

Connect to Figma

We recommend the zeroheight plugin for Figma but if you've been syncing design files via the URL, you can continue to do so.

To connect zeroheight to Figma:

1) Open the Resources dashboard in zeroheight and click Add a design file

2) You’ll be asked to authorize zeroheight to access your Figma account—don’t worry, this is safe. We only read files later when you explicitly give us their link.

Figma branching

You can read about using zeroheight with Figma branching here.

Upload a design

Now that zeroheight is connected to your Figma account, you can upload a Figma file by pasting the file's share link.

1) You can get the share link by clicking the Share button in Figma, then Copy link. The setting of the link doesn’t matter (it can be view or edit) and the file can be any file—it doesn’t have to be in a team or published.

2) Paste the link into the Resources dashboard. Once your upload completes, you should see a summary in the Resources dashboard. Congrats on your first upload!

👉 Note: Because of how the Figma API works, only styles applied to layers in the uploaded file are uploaded, so if you’re missing a style, just apply it to a layer and update the file in zeroheight.

Add Figma content to your styleguide

Once you’ve added your Figma file to zeroheight, you can insert your Figma components and style your styleguide.

1) Choose Design from the editor:

2) Pick the components and styles you want to display in that block and insert them!

Sync Figma descriptions

You can sync Figma descriptions and display these below your components.

Display Figma variants

You can automatically display properties below your components. This is useful for documenting how different variants should be used.

Embed a Figma file or prototype

1) In Figma, click Share

2) Click Copy prototype link

3) In zeroheight, insert an Embed block

4) Paste the prototype link, you can also update the presentation options for the prototype in the block settings

Figma & zeroheight

Video showing how to import various components, styles, and icons from Figma into zeroheight.