Types of blocks

Document your design system with dynamic blocks

Embed a Figma file from a URL

Embed a Figma file from a (public) URL in your documentation as an iFrame with the Figma block.

  1. Select Figma from the block menu
  2. Enter the URL of a (public) Figma file and click Embed
  3. You can optionally resize the container vertically by using the resize handle (on hover)

Display Figma frames

Add Figma frames to your documentation as an image with the Figma frames block.

  1. Select Figma frames from the block menu
  2. Select + Add Frame to choose a frame from an already linked Figma file, or select Add Figma file to add choose frames to add from a new Figma file
Note -> Design system files added as a source are also accessible in the Figma frames block

Figma frames added to the block

Reorder frames

You can reorder the frames in a Figma frames block with drag and drop.

  1. Hover on the block you would like to move
  2. Click and drag the  icon for the block to reorder

Frame settings

To adjust an individual frame, use the  menu to delete a frame or change its background.

Block settings

To change settings on the block, click the Settings icon on the right.

Alignment

Align frames within the container

  • 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

Background color

Change the background color of all frames. This can also be overridden for specific frames with the frame settings menu.

Figma frames — Background color

Show frame details

Show the name and description for frames in the published documentation.

Size

Resize frames within the Figma Frame block.

Note -> If there is only frame, it will be shown as full width by default

Update embedded frames

  1. Navigate to Documentation settings -> Figma
  2. Click Get updates to fetch changes to frames from the original Figma file
  3. The frames will be updated anywhere they are used in your documentation