Figma frames

Render any frame from a Figma data source as an image in your documentation. When the Figma source is updated in Supernova, your frames will update automatically and be reflected the next time you publish.

Example

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

Add Figma frames

1. Select Figma from the block menu
2. Click + Add Frame to choose a frame from an existing Figma source
3. To add frames from a new source, click + Add Data Source
4. Select the frame(s) you would like to add
5. Click Confirm

Adding Figma frames

Type /figma to add or embed from Figma

Reorder frames

1. Hover on the block you would like to move
2. Click and drag the ≡ icon to change the block order

Reorder frames

Settings

Delete a frame

1. Hover the frame and click to open the ≡ menu
2. Select Delete

Deleting a frame

Change background color

To change the background color for an individual frame:

1. Hover the frame you would like to edit and click to open the ≡ menu
2. Click Background color to select a background color
3. Click the Reset icon to revert to the default color setting

Resetting the background color for a single frame

To change the background color for all frames:

1. Open the block settings menu by clicking the cog icon
2. Click Background color to select a background color
3. Click the Reset icon to revert to the default background color

Changing the frame background color

Change frame size

1. Open the block settings menu by clicking the cog icon
2. Adjust the size of the frames using the size slider

Changing frame size.

Changing frame size.

Change alignment

1. Open the block settings menu by clicking the cog icon
2. Select an alignment option, centered or natural height

Changing alignment settings.

Show or hide frame title

1. Open the block settings menu by clicking the cog icon
2. Click the Show frame details toggle to enable or disable

Hiding frame details.