Figma

Add Figma frames to your documentation.

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

Figma image example

Figma image example

An example of a Figma frame.


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
Figma Frames - selection
Type /figma to add or embed from Figma.

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
Reordering frames.

Reordering frames.


Settings

Delete a frame

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

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
Changing the background color for a single frame.

Changing 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.

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.

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.

Changing alignment settings.

Centered

Center the frame in the container vertically and horizontally.

Natural height

Use the height of the frame to determine the height of the container.


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.

Hiding frame details.