Display an image or Figma frame.
Add an image file or a Figma frame to your documentation with the image block.
Everywhere you can add an image, you can also add a Figma frame. Similar to the Figma frame block, this Frame will be linked to the Figma file as a data source and changes made in the file can be updated across your documentation.
- Type /image or /img, or select Image from the block menu.
- You have the option to upload an image, or use a Figma frame.
- To upload an image, click Upload image and select an image file.
- To add a frame from a Figma file, click Add Figma frame and select a frame from one of your data sources.
If you do not have any data sources yet, you can add one here by clicking + New data source.
- Hover over the image and click Add caption, or click the ≡ menu and click Add caption.
- Type a caption in the text input below the image.
- Hover over the image and use the icons to select alignment for the image. The options are left, center, or full width.
- Hover on the image block and select Replace.
- You have the option to replace the content with either a new static image, or a new Figma frame.
- To choose a new image, click Upload image, and upload the image you want to use instead.
- To choose a new Figma frame, click Select Figma frame and choose the frame you want to use in the dialog.
Frames need to be edited in their original Figma file, and reuploaded. To do so:
- Hover on the Figma frame block.
- In the bottom left corner, you'll see the frame and file name. Click on the link icon to open the frame in Figma, and make any edits you want there.
- Reimport these changes into Supernova via the Add frame dialog or click Get updates in your design system to fetch the changes. If you have autoupdate enabled, Supernova will do this for you automatically.
- Publish your documentation again to see the updated Figma frame on your published documentation site.