Back to Plugins
Layer Name Styles

Layer Name Styles

You can apply styles written in layer names (with Emmet-like notation)

layersemmetfigma

Plugin Preview

Layer Name Styles preview

About this plugin

Layer Name StylesYou 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 usewrite 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]".Select the layer to which you want to apply the style (if not selected, all the top layers will be applied).Press the "Apply" button.Example of how to write layer namesArticles [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 itemsExclude child layersTurn "ON" to include only parent layers and exclude child layers.Include locked layersTurn "ON" to include locked layers.Apply at plugin activationTurn "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 keysIgnore bracketTurn "ON" to to ignore bracket.If you turn this "ON", be careful not to duplicate layer names and style snippets.DocumentationProperties and ValuesStyles 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 WritingStyle 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]

Plugin Details

Version5
CreatedMarch 3, 2023
Last UpdatedMarch 28, 2023
CategoryUncategorized
Creator佐藤 卓也
Stats22 installs, 1 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:ui.html
  • main:code.js
  • Editor Types:
    figma

More Like This

Discover other plugins in the same category.

No similar plugins found in this category.