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.This plugin does not store layout direction. This is to support scenarios where people want to apply a layer style to something that already has a layout. I may support this in the future, but at the moment I don't have to time to implement the feature.Create a layer styleRun Plugins > Layer Styles > Show Layer StylesSelect a frame or shape with styles already appliedClick the + in the bottom right of the plugin windowApply a layer styleSelect the layers you would like to apply the layer style toClick on the layer style in the list to apply that styleRefresh layer stylesAfter you make a change to a layer style, you can update any layers which were previously applied with this layer style.Open the pluginRight-click on the layer styleClick RefreshDetaching layer styles from layersIf you no longer want a layer to be associated with a layer style you can detach it.Select the layer you want to detach the layer style fromIn 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 issuesThere is a bug when creating styles than use variables for the corner radius where the variable is detached

Plugin Details

Version24
CreatedNovember 11, 2020
Last UpdatedJune 20, 2025
Categorydesign-systems
CreatorGavin McFarland
Stats4630 installs, 343 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:ui.html
  • main:main.js
  • Editor Types:
    figma
  • Allowed Domains:
    • none

More Like This

Discover other plugins in the design-systems category.