Layer Style

Layer styles allow you to define attributes that are used repeatedly within a configuration, such as colors and fonts. They reduce redundancy and make it possible to apply attributes to layers that meet specific criteria.

The structure of layer styles is based on CSS.

Quick guide

A basic layer style can look like this:

./layer_style/
└── text.json

The text.json file contains a name field that defines the selector and a content object that contains the attributes to apply to matching layers.

Layer styles are applied based on their selector:

• Type selectors target layer types.
• Class selectors target classes.
• Name selectors target layer names.

{
  "name": "text",
  "content": {
    "font": "nunito-light"
  }
}

This example applies the nunito-light font to all text layers.

Layer style files

./layer_style directory

Layer style files are stored in the ./layer_style directory.

./layer_style/
├── .fullSize.json
└── text.json

Layer style file structure

Each file in the ./layer_style directory is a JSON file containing a name field and a content object.

The name field defines the selector of the layer style that determines which layers are affected.

{
  "name": ".fullSize"
}

note

The name field and the filename do not have to be identical, but keeping them related can help organize layer styles.

The content object contains the attributes to apply to matching layers.

{
  "name": ".fullSize",
  "content": {
    "constraints": [
      {
        "type": "pos",
        "x": "0",
        "y": "0"
      },
      {
        "type": "pos",
        "x": "0",
        "y": "0",
        "anchor": "se",
        "relativeAnchor": "se"
      }
    ]
  }
}

This example applies the defined constraints to all layers matching the .fullSize class selector.

The content object can contain multiple layer attribute, such as borderRadius, font, value, or constraints.

Selectors

Layer styles support three kinds of selectors: type, class, and name.

Type selector

A type selector applies the style to every layer of a specific type.

Use the layer type as the value of the name field, e.g. color or text.

Class selector

A class selector applies the style only to layers belonging to a specific class.

Use the class name preceded by a dot (.) as the value of the name field, e.g. .fullSize or .textSmall.

Name selector

A name selector applies the style only to layers with a specific name.

Use the layer name preceded by a hash (#) as the value of the name field, e.g. #header or #subtitle.

Selector priority

When multiple layer styles apply to the same layer, the following priority applies:

1. Custom value defined directly on the layer
2. Name selector
3. Class selector
4. Type selector

A higher-priority value overrides a value defined by a lower-priority selector.

Using layer styles

Type selector

Set the font for all text layers.

{
  "name": "text",
  "content": {
    "font": "nunito-light"
  }
}

"layers": [
  {
    "type": "text"
  },
  {
    "type": "text"
  },
  {
    "type": "text"
  }
]

Class selector

Set the font size of all layers belonging to the .fontSizeSmall class.

{
  "name": ".fontSizeSmall",
  "content": {
    "fontSize": "20pt"
  }
}

"layers": [
  {
    "type": "text"
  },
  {
    "type": "text"
  },
  {
    "type": "text",
    "classes": [
      "fontSizeSmall"
    ]
  }
]

Name selector

Set the font color of all layers with the name header.

{
  "name": "#header",
  "content": {
    "fontColor": "#2b96d3"
  }
}

"layers": [
  {
    "type": "text",
    "name": "header"
  },
  {
    "type": "text"
  },
  {
    "type": "text"
  }
]

Selector priority

Set the font color with different layer styles using different selectors to show the selector priority.

{
  "name": "text",
  "content": {
    "fontColor": {
      "light": "#161821",
      "dark": "#f6f2ff"
    }
  }
}

{
  "name": ".textPink",
  "content": {
    "fontColor": "#dd00ae"
  }
}

{
  "name": "#header",
  "content": {
    "fontColor": "#2b96d3"
  }
}

"layers": [
  {
    "type": "text"
  },
  {
    "type": "text",
    "classes": [
      "textPink"
    ]
  },
  {
    "type": "text",
    "name": "header",
    "classes": [
      "textPink"
    ]
  },
  {
    "type": "text",
    "name": "header",
    "fontColor": "#d48b2a",
    "classes": [
      "textPink"
    ]
  }
]

The four layers demonstrate the selector priority:

1. The first layer matches the text type selector.
2. The second layer matches the text type and .textPink class selectors. The class selector overrides the type selector.
3. The third layer matches the text type, .textPink class, and #header name selectors. The name selector overrides the class selector.
4. The fourth layer defines fontColor directly on the layer. The custom value overrides all layer styles.

Troubleshooting

If a layer style does not behave as expected, check the following:

1. Is the layer style file stored in the ./layer_style directory?
2. Is the file valid JSON?
3. Does the name field contain the intended selector?
4. Does the selector match the layer type, class, or name?
5. Does the selector use the correct prefix (. for class selectors or # for name selectors)?
6. Are the attributes defined correctly inside the content field?