Overview
Figma component block allows you to document your Figma components and their variants.
Add Figma component block
- Choose Figma component from the block menu.
- In the empty block, click Select Figma component.
- In the dialog, select the components you want to render in your documentation. You can search for a specific component if needed.
- The Current selection panel on the right displays the selected components and their available properties. If you turn on a specific property, it will show the selected variants in the preview below.
- Click Save selection.
If you don’t see component variants in Supernova, try republishing your Figma library (ensuring it contains any changes) and then import the updates into Supernova.
There are two display variants to choose from for your Figma component block — grid or canvas. You can select one in the property panel on the right. You can also drag the slider in the Columns section of the panel to set how many columns the grid will contain.
- Grid displays components in a separate containers, placing details below the image.
- Canvas renders components in one container, and the details are available in a popover when you hover over the image.
Properties panel
In the properties panel to the right of the screen, you can do the following:
- Choose between two different display variants for this block.
- Select which component variants you want to display in the block.
- Change the selected components by clicking Change selection.
- Customize the following display options:
- Preview size: Determines the height of the component preview. You can either set it to the same height for every container, or individual heights based on the height of the asset itself.
- Preview background: Change the background color of the component previews.
- Show component name: Shows or hides the component name.
- Show component description: Shows or hides the component description.
Example
FAQ
These types of properties are not yet supported, only variant properties. Please reach out on Supernova Friends Slack to tell us you’d like it to be added.
Yes! Just drag and drop items in the editor to reorder component variants.
- If you add new variants to the block in the future, they’ll appear at the end of the list.
- You can reset the order to default using Reset button in properties panel.
Figma variable properties don’t have static IDs; their name serves as the ID. Therefore, renaming them will unlink their current usage in documentation.