You can add either an image file, or a Figma frame as an image using the Image or Figma frame block.
Add an image or Figma frame
- Select Image or Figma frame 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 Select Figma frame and select a frame from one of your connected files.
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 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.
Replace an image or frame
- In the property panel, click Replace.
- You have the option to replace the content with either a new 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.
Edit Figma frames
Frames need to be edited in their original Figma file, and reuploaded. To do so:
- 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.
- 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.
- Publish your documentation again to see the updated Figma frame on your published documentation site.