Overview
The Figma component property block allows you to document your Figma component properties and their values. The default values are also shown.
Add Figma component properties
- Select Figma component property from the block menu.
- Click Select Figma component in the empty block.
- In the dialog, select the desired Figma component. You can search for a specific component if needed.
- The Current selection panel on the right displays selected component and its properties. If you turn off a specific property, it will be hidden from the table.
- Click Save selection.
If you don’t see component properties in Supernova, try republishing your Figma library (ensuring it contains any changes) and then import the updates into Supernova.
Properties panel
In the properties panel to the right of the screen, you can do the following:
- Preview the list of all Figma component properties.
- Change the component in the block by clicking Change selection.
- Show component name: Shows or hides the component name.
Example
| Property | Values | Default |
|---|---|---|
| Size Variant | small | medium | medium |
| State Variant | default | hover | disabled | default |
| Style Variant | ghost | outline | solid | solid |
| Icon? Boolean | true | false | true |
| End icon InstanceSwap | ||
| Icon InstanceSwap | ||
| End icon? Boolean | true | false | false |
| Text Text | string | Button |
| Full width? Variant | false | false |
FAQ
It is not currently possible to reordering properties. Please reach out on Supernova Friends Slack to tell us you’d like it to be added.
Yes! Use the switches in the properties panel to hide selected Figma component properties.