L
L
Learn
Search…
Media blocks
Media blocks are content blocks that contain different types of media instead of text, such as static images or embedded content.
The following media blocks can be created:
Block name
Description
Image
Display an image
Embed
Embed a generic URL
YouTube
Embed a YouTube video
Storybook
Embed a Storybook story
Figma
Embed a Figma file or display frames
Shortcut
Link to a page or section

Image

Add a static image to your documentation with the image block.
  1. 1.
    Select Image from the block menu
  2. 2.
    Click Select Image and choose the image you would like to add
Image block
  • Hover and click Caption to add a caption below the image
  • Select alignment for the image left | center | or full width
Image block with image

Add a caption

  1. 1.
    Hover over the image and click Caption, or click the menu and click Add caption
  2. 2.
    Add a caption below the image

Delete an image

  1. 1.
    Click the menu and select Delete

Replace an image

  1. 1.
    Click the menu and select Replace
  2. 2.
    Choose a new image
Replacing an image

Embed

Use an embed block to add a link to any URL. The embed will contain the name, description, and image for the URL (when available).
  1. 1.
    Select Embed from the block menu
  2. 2.
    Enter the URL you would like to embed and click Embed
Embed block
Embed preview

YouTube

Embed a YouTube video from a URL

  1. 1.
    Select YouTube from the block menu
  2. 2.
    Enter the URL of a YouTube video and click Embed
YouTube embed block
Example of an embedded video

Storybook

Embed a Storybook story from a URL

  1. 1.
    Select Storybook from the block menu
  2. 2.
    Enter the URL of a Storybook story and click Embed
  3. 3.
    The story will be displayed. Click on the block to open the story in a new window.
Storybook Embed block
Embedded Story

Show more details with Add-Ons

You can also show more details about the story and interact with its properties by enabling the Storybook Info Add-on.
  1. 1.
    Hover over the block to access the display menu
  2. 2.
    Turn the toggle ON to enable Add-ons

Figma

Embed a Figma file

Embed a Figma file in your documentation as an iFrame with the Figma block

Embed a Figma file from a URL

  1. 1.
    Select Figma from the block menu
  2. 2.
    Enter the URL of a (public) Figma file and click Embed
Figma embed block
Embedded Figma file in an iFrame

Display Figma frames

The Figma frames block will embed one or more Figma frames as images.

Display Figma frames

Add Figma frames to your documentation as an image with the Figma frames block.
  1. 1.
    Select Figma frames from the block menu
  2. 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.
Choose from an existing file, or add a new file
Figma frames added to the block

Frame settings

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

Block settings

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

Update embedded frames

  1. 1.
    Go to your design system, click on the Figma tab
  2. 2.
    Under Documentation files, you can click Get updates to fetch changes to frames from the original Figma file
  3. 3.
    The frames will be updated anywhere they are used in your documentation
Get frame updates from Figma

Shortcut

Link to another page in your documentation or add external links as shortcuts.

Add shortcuts

  1. 1.
    Select Shortcut from the block menu
  2. 2.
    Click + Add shortcut to add a new shortcut
  3. 3.
    Select Group or Page to add a page from your documentation, or External URL to add a link
Add a page from your documentation

Edit shortcuts

  1. 1.
    To edit the path of a shortcut, click on the menu and select Edit shortcut
  2. 2.
    To delete a shortcut, click on the menu and select Delete shortcut
  3. 3.
    To add an image, click Add image on the shortcut
  4. 4.
    To remove an image, click on the ≡ menu and select Remove image
Editing a shortcut
Last modified 2mo ago