Styler

Styler is a plugin for Figma that generates styles based on selected layers.
Basically, you can control your styles by changing layer properties and updating the styles.

Usage

• Generate Styles
  • Create: creates styles, when there is no match between layer and existing styles.
  • Rename: renames styles, when there is a style attached to the layer and no style with desired new name.
  • Update: update styles, when there is a name match.
• Apply Styles: apply styles to the selected layers.
• Detach Styles: detach styles of the selected layers.
• Remove Styles: remove styles based on the selected layers.
• Remove By Type: Fill, Stroke, Text, Effect, Grid

It is much faster to use bulk rename feature of figma to rename layers Cmd R (Mac) or Ctrl R (Windows). More info

Try to avoid same name for multiple layers. It will create a single style, but it will update its properties.

Known issues

1. [Figma limitation] While trying to rename the styles using underscore _ or point . prefixes, the style will not change the publish status (it will not become unpublish). ☹️
2. [Figma limitation] After you create styles, you cannot reorder them using Figma API. 😔

Notes

1. Any change can be Undo.
2. Only Local Styles are supported. Still... You can use external styles to update local ones.
3. There is no support for Groups and I don't plan to support it.
4. The plugin, extract only text properties from text layers.
5. For layer that contains both fill and stroke properties, the plugin will add automatically a suffix to the style name -fill and -stroke, otherwise the style name will be exactly as the layer name. I plan to expand this.

Pairing well with

1. Themer
2. Match fills to local styles

Many thanks to Cristi Nica for support.
Inspired by Sketch Style Generator made by Luca Orio.