
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.

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

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
- To add alt text, type your text in the Alt text field in the property panel.
- To add a caption for the image or frame, click + in the Caption row, and then type your caption in the field.

Change image format
If an image imported from Figma appears pixelated, you can choose to render it as an SVG instead of a PNG.
- In the property panel, click ••• beside the frame preview to open the context menu.
- Click Image format and select SVG.
Replace an image or frame
- In the property panel, click Replace.
- In the dialog, you can choose to add a Figma frame URL or Upload an image file (or Advanced).
- To upload an image, either drag and drop or click Upload image to select an image file from your computer.
- 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

Frames need to be edited in their original Figma file, and re-imported. To do so:
Update a single frame
- In Figma, make any edits you would like to make to the file.
- 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
- In the property panel, click ••• beside the frame preview to open the context menu.
- Click Open in Figma to open the frame in Figma, and make any edits you want there.
- Click Import Figma file updates to update all images in documentation from this Figma file.
- 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.

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.
