Back to Plugins
Layer Styles

Layer Styles

Save and apply style combinations, such as fills, corner radius, and more

fillstrokedesign systemstyles

Plugin Preview

Layer Styles preview

About this plugin

Save and apply style presets, including strokes, fills, corner radius, effects, padding, layout grids, layer opacity and blend modes.


Create a layer style


  1. Run Plugins > Layer Styles > Show Layer Styles
  2. Select a frame or shape with styles already applied
  3. Click the + in the bottom right of the plugin window


Apply a layer style


  1. Select the layers you would like to apply the layer style to
  2. Click on the layer style in the list to apply that style


Refresh layer styles


After you make a change to a layer style, you can update any layers which were previously applied with this layer style.


  1. Open the plugin
  2. Right-click on the layer style
  3. Click Refresh


Detaching layer styles from layers


If you no longer want a layer to be associated with a layer style you can detach it.


  1. Select the layer you want to detach the layer style from
  2. In the Properties Panel under Plugin, click "Detach Layer Style".


NOTE: Be careful not to click the minus button as this will remove the plugin command instead. If this happens by mistake, you can re-apply the style and the option to detach the layer style will appear again.


Known issues


  • There is currently a bug when trying to add a style from a component where it doesn't copy the styles correctly. (Fix coming soon)

Plugin Details

Version20
CreatedNovember 11, 2020
Last UpdatedAugust 28, 2023
Categorydesign-systems
CreatorGavin McFarland
Stats4448 installs, 315 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:dist/ui.html
  • main:dist/code.js
  • Network Access:

    Used to load fonts for plugin UI

  • Editor Types:
    figma
  • Allowed Domains:
    • https://rsms.me