Skip to content
search icon
clear
Component Status

Side sheet usage

Figma

How to add

  1. Locate the Assets tab in the Layers Panel.
  2. There are two ways to locate the Side sheet component needed:
    • Use the search bar to search for a component grouping name or variation name.
    • Scroll through the folders list and open the relevant grouping.
  3. Once the component is located, click and drag it into the frame/artboard.

How to use

  1. Place the Side sheet.
  2. Toggle the grid layout on/off by using the following shortcut:
  • Mac: Control + G
  • PC: Ctrl + Shift + 4
  1. Stack content components above the Side sheet, making sure to follow the grid within.
  2. Select all the layers and convert them to a frame/artboard by using the following shortcut:
  • Mac: Command + Option + G
  • PC: Ctrl + ALT + G
  1. Make sure to name the new group.
  2. Locate the Design tab in the Inspector Panel.
  3. Under the Constraints section, set up constraints. 9 If the sidesheet is elevated, apply Elevation/Overlay to the whole grouped layer.

API

PropertyTypeRequiredDefaultDescription
variantEnum
'small' │ 'medium' │ 'large' │ 'xlarge'
falsemedium
titleStringfalse[Empty String]
classNameStringfalse[Empty String]@ignore
openBoolfalsetrue
onCloseFuncfalseundefined
childrenNodefalseundefined@ignore
Edit this page on GitHub