Media and asset blocks

Display images, embed files and videos, and more.

Vector assets are exportable Figma components that are used in your design system.

Assets / menu

Add a vector asset block

Assets / empty block

Add assets to your documentation with the Asset block.

  1. Select Vector assets from the block menu.
  2. Click Select assets in the empty block.
  3. In the dialog, you can then choose to add either an assets group, or individual assets (you can't add both). Search and select the assets group or individual assets you'd like to use for the block in the selection dialog. The assets will be shown in the same order in your published documentation.
  4. Click Save selection.
Assets / selection dialog

There are three display variants to choose from for your assets block — simple grid, square grid, or borderless grid. You can select one in the property panel on the right. You can also drag the slider in the Columns section of the panel to set how many columns the grid will contain.

You can always preview your documentation to see how the block will look on your live documentation site.

Include subgroups option in the Content section, ensures that the block will display not only the group you initially selected but also all current and future subgroups along with their assets.

Assets / filled

Remove an asset

To remove an asset from the block:

  1. In the property panel on the right, click Change selection (in the Content section).
  2. In the dialog, deselect the assets you want to remove. You can search for specific assets if needed.
  3. Click Save selection.

Display options

In the property panel, you can also customize the following display options:

  • Show descriptions: Shows or hides the component description.
  • Show search: Shows or hides dedicated search for this block in published documentation.
  • Preview box size: Determines the height of the asset's container. You can either set it to the same height for every container, or individual heights based on the height of the asset itself.
  • Preview box height: Customize the height of the preview container when using a fixed-size box.
  • Preview background: Change the background color of the asset previews.

Examples

comet

comet

meteor

meteor

telescope

telescope

satellite

satellite

planet

planet

rocket

rocket

whirl

whirl

ufo

ufo

No results found for your search.
comet

comet

meteor

meteor

telescope

telescope

satellite

satellite

planet

planet

rocket

rocket

whirl

whirl

ufo

ufo

No results found for your search.
comet

comet

meteor

meteor

telescope

telescope

satellite

satellite

planet

planet

rocket

rocket

whirl

whirl

ufo

ufo

No results found for your search.