Skip to main content

  1. zeroheight
  2. Use zeroheight
  3. Add designs

Figma: Display Figma variants and component properties

Vinh
Vinh
  • Updated

You can add instances and display full properties for instances and components, including variant, boolean, instance swap, and text properties. This will allow you to add different variants of your component to your design system.

Figma varients displayed in zeroheight.

Display component properties

We do not generate the different states that can be created with component properties. We only display information about what is uploaded into zeroheight. To display the different states, you must create different instances in Figma and import them.

1) Re-sync your Figma file to zeroheight by clicking Update items

Update items function hovered over uploaded Figma file.

2) In a design uploads block, choose Layout settings

Layout settings hovered over for design uploads block.

3) Toggle on Display component properties Settings for design uploads block show display component properties function.

4) You should see the properties below the variant: Component properties are displayed for button components in zeroheight. 👉 Note: Even if you don't use the component properties feature, you will still toggle Display component properties to show your components' variant states.

Add instances

  1.  Select Design from the toolbar:
  2. Click to add your components:
    Empty button page showing the Click to add design components and styles function.
  3. Go to Instances:
    Design uploads window shows instances in the list of items you can add to your styleguide.
  4. Select the instance you want to add:
    Design uploads window shows items under Instances that can be added.
  5. Upload into your design system:
    Button page displays button instances.

 

FAQs

How does the folder structure in Design Uploads work?

The folder structure is nested based on the properties. The properties are shown in brackets and the variants are at the base of the folder structure. For example, you could have a Button variant named Size=Large, Function=Primary, Icon=False, State=Default in Figma:

List of the different variant properties

In zeroheight the same variant would be displayed under Large (Size) Primary (Function) False (Icon) and named Default (State) in the folder structure:

Folder structure for variants in the design uploads window.

Why are the variants named the same thing?

By default, since they are variants of the same component, they are all named the component name e.g. Button.

 

Buttons and their variant properties

 

You can display the variant names instead by enabling 'display variant names' in the Block defaults in your styleguide settings:

Will you need to resync your Figma file to add instances?

You will need to resync your file to upload instances into your file. You can either update your Figma file or from the design uploads.

Can you upload designs from Figma and display variants without using the component properties feature?

Yes, you can still upload your components and display variants in your design system without using the feature.

Can you display both anatomy diagrams and component properties?

No, if you choose to display annotations, you cannot display Figma component properties.

Share this article
Was this article helpful?