Display Figma variants and component properties
Brienne Wong
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.
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
2) In a design uploads block, choose Layout settings
3) Toggle on Display component properties
4) You should see the properties below the variant:
👉 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
2) Click to add your components
3) Go to Instances
4) Select the instance you want to add
5) Upload into your design system
👉 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:
In zeroheight the same variant would be displayed under Large (Size) > Primary (Function) > False (Icon) and named Default (State) in the folder structure:
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.
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.