Media and asset blocks

Display images, embed files and videos, and more.

Image / menu

You can add either an image file, or a Figma frame as an image using the Image or Figma frame block.

Image / empty block

Add an image or Figma frame

  1. Select Image or Figma frame 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 Select Figma frame and select a frame from one of your connected files.
Image / empty block - add image

You can also drag and drop image files into the editor to upload them.

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

Image / frame selection 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

Replace an image or frame

Image / replace menu
  1. In the property panel, click Replace.
  2. You have the option to replace the content with either a new 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

Image / frame context menu

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

  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. Reimport these changes into Supernova. You can also click Get updates from file in your the same 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.