Image

Add an image file or a Figma frame to your documentation with the image block.

Example image file

Photo by https://unsplash.com/@fakurian

Using Figma frames as images

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.

Example Figma frame

Add an image or Figma frame

1. Type /image or /img, or select Image from the block menu.
2. You have the option to upload an image, or use a Figma frame.
3. To upload an image, click Upload image and select an image file.
4. 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.

Type /image or /img to add an image block.

Image block settings

Add a caption.

Add a caption

1. Hover over the image and click Add caption, or click the ≡ menu and click Add caption.
2. Type a caption in the text input below the image.

Change alignment

1. Hover over the image and use the icons to select alignment for the image. The options are left, center, or full width.

Replace an image

1. Hover on the image block and select Replace.
2. You have the option to replace the content with either a new static image, or a new Figma frame.
3. To choose a new image, click Upload image, and upload the image you want to use instead.
4. To choose a new Figma frame, click Select Figma frame and choose the frame you want to use in the dialog.

Edit Figma frames

Frames need to be edited in their original Figma file, and reuploaded. To do so:

1. Hover on the Figma frame block.
2. 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.
3. 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.
4. Publish your documentation again to see the updated Figma frame on your published documentation site.