Render any image from a Figma data source as an image in your documentation. When the Figma source is updated in Supernova, your images will update automatically and be reflected the next time you publish.
Add Figma images
- Select Figma images from the block menu.
- Click Add frames to add a frame by Figma URL or choose a layer from a connected Figma file.
- Add the Figma URL and click Import as image (Default), or select the layer(s) you would like to add (Advanced).
- Add as many frames to the block as you would like.
- Click Save selection.
Adding an image with Paste Figma URL is a more efficient method that does not require you to fetch the entire Figma hierarchy again when a new frame is added to Figma.
Adding a Figma frame by URL (Default)
Adding a Figma frame by selection (Advanced)
Customization
Display options
In the property panel, you can also customize the following display options:
- Thumbnail height: Determines the height of the frame's container. You can either set it to the same height for every container, or individual heights based on the height of the asset itself.
- Image background: Change the background color of the frames.
- Show image details: Shows or hides the frame's name, description and source file.
Item options
In the block, you can also customize the following item options:
- Background color: Change the background color for a specific item.
- Update frame: Get the latest version of this Figma image from Figma.
- Open layer in Figma: Open this image in Figma.
- Delete: Delete this item from the block.
Variants
There are two display variants to choose from for your assets block — boxed, or plain. 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.
You can always preview your documentation to see how the block will look on your live documentation site.
Example
FAQ
Both the Default and Advanced methods update Figma images when the data source is updated.
Adding an image with Paste Figma URL is a more efficient method that does not require you to fetch the entire Figma hierarchy again when a new frame is added to Figma.
Whenever a Figma date source is updated, all images in documentation will also be updated (you still need to publish your documentation site to see them live).
To update a single image:
- For any image block, you can update a Figma image from the property panel with the Update frame icon.
- For a block with multiple images, from the ••• menu for a block item.
Related