Layer Name Styles

About this plugin

Layer Name Styles

You can use this plugin to apply styles written in layer names so you don't have to go back and forth between the left and right sidebar.

You can write style snippets in a simplified Emmet-like notation.

How to use

1. write a style snippet by enclosing it with "[]" in the layer name. If there are multiple snippets, separate them with a space.　For example, "Layer name [w200 h300]".
2. Select the layer to which you want to apply the style (if not selected, all the top layers will be applied).
3. Press the "Apply" button.

Example of how to write layer names

Articles [lm:h sp:20 p20-40 x20]

• Interpret the contents of "[]". You can write anything outside of "[]".
• When writing multiple styles, separate them with a "space".
• The order in which they are written does not matter.
• If the target property duplicates in multiple styles, it will be overwritten by the later written style.

Setting items

Exclude child layers

Turn "ON" to include only parent layers and exclude child layers.

Include locked layers

Turn "ON" to include locked layers.

Apply at plugin activation

Turn "ON" to apply at plugin activation.

There is no setting to add shortcut keys to the Figma application, although it would be useful in combination with shortcut keys.

If you are a Mac user, you can add shortcuts in the following way.

see: Customize Figma shortcut keys

Ignore bracket

Turn "ON" to to ignore bracket.

If you turn this "ON", be careful not to duplicate layer names and style snippets.

Documentation

Properties and Values

Styles have "properties" and "values.

If you write "w200", "w" is the property for width and "200" is the value you want to set for width.

Ambiguous Writing

Style snippets do not have to be written with strict rules to be interpreted.

For example, these all mean the same thing:

"w200", "w-200", "w:200"

Style snippets (Common)

x (X-coordinate)

[x20]
//x:20

y (Y-coordinate)

[y20]
//y:20

w (Width)

[w200]
//width: 200

variations

[w200]
[width200]

h (Height)

[h300]
//height: 300

variations

[h300]
[height300]

Style snippets (Frame only)

lm (Layout Mode)

[lm:h]
//Layout Mode: "HORIZONTAL"

[lm:v]
//Layout Mode: "VERTICAL"

variations

//HORIZONTAL
[lm:h]
[col]

//VERTICAL
[lm:v]
[row]

sp (Item Spacing)

[sp40]
//Item Spacing: 40

[sp:a]
//This is a special specification.
//The spacing mode is "SPACE BETWEEN".

variations

[sp40]
[g40]

p (Padding)

[p20]
//Padding
//top & bottom & left & right: 20

[p20-40]
//Padding
//top & bottom: 20, left & right: 40

[p20-40-20]
//Padding
//top: 20, left & right: 40, bottom: 20

[p20-40-20-40]
//Padding
//top: 20, right: 40, bottom: 20, left: 40

px (Padding-Left, Padding-Right)

[px20]

py (Padding-Top, Padding-Bottom)

[py20]

pt (Padding-Top)

[pt20]

pb (Padding-Bottom)

[pb20]

pl (Padding-Left)

[pl20]

pr (Padding-Right)

[pr20]