Introducing zeroheight for Figma!
Create living styleguides synced with Figma and code
Our mission is to make it possible for teams of all shapes and sizes to create collaborative documentation for their design systems—regardless of the tools they use! When we launched zeroheight, the only design tool we integrated with was Sketch. But over the past couple of years, there has been an increase in the number of high quality design tools available.
Since our launch, one of the top questions from users has been “do you integrate with Figma?”. We’re super excited to announce that as of today, thanks to the support of the Figma team, the answer is yes! You can now create living styleguides synced with Figma. Here’s how you do it:
1. Getting started
Once you’ve created a zeroheight account head over to the Uploads dashboard and click Add new upload:
You’ll then 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.
2. Adding Figma files to zeroheight
Now that zeroheight is connected to your Figma account, all you need to do is upload a Figma file by pasting the share link. You can get it 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.
Once your upload completes, you should see a summary in the Uploads 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
3. Adding Figma content to your styleguides
Once you’ve added your Figma file to zeroheight, you can then insert your Figma components and styles into a Design uploads blocks in your styleguide. You can use the existing ones on the template pages (Colors, Typography etc.) or create your own using the editor:
Then simply pick what components and styles you want to display in that block, and insert them!
And when the designs change in Figma and you need to update them in zeroheight, simply hit the Update button:
That’s it! You can now:
- Create a beautiful, customizable, rich-text styleguide synced with Figma
- Document design decisions and code in the same place
- Write sophisticated documentation by embedding content from 3rd party tools (YouTube, Drive, CodePen etc.)
Integrating with Figma is just the first step. Our mission is to become a true design system platform that allows designers and developers to collaborate on beautiful documentation regardless of their toolset… so watch this space! Let us know at support@zeroheight.com or in our Spectrum community what integration/features you would like to see next :)
As always, thank you to our existing users who are constantly providing feedback and pushing us forward. We’ve only scratched the surface of design system tooling, and thanks to you, we’re excited to keep digging 👷♂️🚀
