Style presets

Style presets are reusable groups of styles. Whereas a token is just a simple value (such as a specific color like “#0070e0” without caring if it’s used as a background color, text color, gradient color, etc.), a style presets might specify that:

  • the background color is “#0070e0”
  • the padding is 10px all around
  • the drop shadow should be dark gray, be offset 10px and have a 10px blur

Basically, most of the usual style settings available to you in the right sidebar can be stored into a style preset.

Style presets are listed in the Assets tab in the left sidebar.

You can create new ones there, or if you already have styles defined on some element, you can extract some or all of those styles into a style preset.

Then you can apply this on any (non-component) element, and it will adopt that visual appearance.

All the styles that come from a style preset have a green dot indicator in the right panel.

Was this page helpful?

Have feedback on this page? Let us know on our forum.