How Do You Use Zeroheight With Figma?

Zeroheight is a plugin for Figma that allows you to quickly create and share interactive style guides and design systems. It gives you the ability to create modular components with specific rules, which can then be exported into code. The plugin streamlines the process of creating and maintaining your design system, making it much easier to keep up with changes and updates.

Using Zeroheight with Figma is easy. After installing the plugin in Figma, you will see a Zeroheight icon in the toolbar.

You can click this icon to open the Zeroheight window, where you can get started creating your own components. First, select an existing frame or create a new one. Then, click on “Add Component” at the top of the window and select from one of the many preset components available or create your own custom component.

Once you have created your components, you can start styling them. You can customize their layout and add any text or visuals that are needed for each component.

You also have access to a wide range of styling options including color pickers, font selection, layer effects and more. When finished styling your components, they will be added to a library which is stored inside the Zeroheight window.

Once you’ve created all your components and styled them accordingly, you can then export them into code using Zeroheight’s Export feature. This will generate code snippets for each component which you can copy into any HTML document or CMS like WordPress or Squarespace.


Zeroheight makes it easy to use Figma for creating interactive style guides and design systems by providing an intuitive interface for building modular components with specific rules that can be exported into code. With its easy-to-use tools for styling components and exporting them into code snippets, Zeroheight helps streamline the process of keeping up with changes in design systems.