Media and asset blocks

Display images, embed files and videos, and more.

Image / menu

You can add images to your documentation with the Image block. This image can either be a typical image file, or a dynamic image created from a Figma layer that will update automatically when it is updated in Figma.

Image / empty block

Add an image or Figma layer

  1. Select Image from the block menu and click + Add image.
  2. In the dialog, you can choose to add a Figma frame URL or Upload an image file.
  3. To upload an image, either drag and drop or click Upload image to select an image file from your computer.
  4. To add a frame from a Figma file, copy and paste the URL of a Figma layer and click Import as image.
Select image dialog

Image and frame options

Change alignment

In the Alignment row of the property panel, use the icons to select alignment for the image or frame. The options are left, center, or full width.

Add alt text and a caption

  1. To add alt text, type your text in the Alt text field in the property panel.
  2. To add a caption for the image or frame, click + in the Caption row, and then type your caption in the field.
Image / filled

Change image format

If an image imported from Figma appears pixelated, you can choose to render it as an SVG instead of a PNG.

  1. In the property panel, click ••• beside the frame preview to open the context menu.
  2. Click Image format and select SVG.

Replace an image or frame

  1. In the property panel, click Replace.
  2. In the dialog, you can choose to add a Figma frame URL or Upload an image file (or Advanced).
  3. To upload an image, either drag and drop or click Upload image to select an image file from your computer.
  4. To add a frame from a Figma file, copy and paste the URL of a Figma layer and click Import as image.

The image will be replaced, and any captions or alt text will be preserved.

Edit Figma frames

Figma frame in image block

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

Update a single frame

  1. In Figma, make any edits you would like to make to the file.
  2. In the property panel beside the frame name, click the Update frame button.

Updates for this frame will be fetched immediately, and can then be published.

Update all documentation frames

  1. In the property panel, click ••• beside the frame preview to open the context menu.
  2. Click Open in Figma to open the frame in Figma, and make any edits you want there.
  3. Click Import Figma file updates to update all images in documentation from this Figma file.
  4. Publish your documentation again to see the updated Figma frame on your published documentation site.

Add a Figma frame (Advanced)

There is also the option to select a Figma layer from a data source that you have already imported to Supernova. This takes a bit longer than adding by URL, since we will fetch all layers within your file.

Select image dialog - advanced

Connect a new file

If you do not have any connected Figma files yet, you can add one via the dialog by clicking Connect Figma file. Learn more about importing Figma files.

Advanced - connect file

Similar blocks