Search

Display Figma variants and component properties

Brienne Wong
Brienne Wong
  • 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 uploads from the toolbar

Design uploads function hovered over in the zeroheight 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.

šŸ‘‰ Note: We currently do not support instances as downloable assets.

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. You can edit the name of the design upload if you want to change this.

Buttons and their variant properties

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.

Was this article helpful?