Stroke style

How a stroke is drawn — solid, dashed, dotted.

---

Value format

DTCG defines two forms.

Keyword form — the one you can author in the plugin:

{ "$type": "strokeStyle", "$value": "dashed" }

Allowed keywords: solid, dashed, dotted, double, groove, ridge, outset, inset.

Object form — an explicit dash pattern:

{
  "$type": "strokeStyle",
  "$value": {
    "dashArray": [{ "value": 4, "unit": "px" }, { "value": 2, "unit": "px" }],
    "lineCap": "round"
  }
}

lineCap is round, butt, or square.

The object form is import-only

The token dialog accepts keywords only. An object-form value can enter the document through JSON import, the JSON editor, or sync — and it will then display and apply correctly — but you cannot type one into the value field.

---

Applying to Figma

Default target: the layer’s dash pattern and stroke cap. Requires a layer that supports strokes.

Only three keywords have a Figma equivalent. w below is the width from an accompanying border token, else the layer’s current stroke weight, else 1:

Keyword	Result
solid	Dash pattern cleared, cap NONE
dashed	Dash pattern [w×3, w×3]
dotted	Dash pattern [w, w], cap ROUND
double, groove, ridge, inset, outset	Not supported by Figma. Reported as “Style ‘X’ not supported in Figma. Falling back to solid.”

The object form copies dashArray straight into Figma’s dash pattern and maps lineCap: round → ROUND, square → SQUARE, butt → NONE.

Every apply resets the dash pattern and cap first, so styles do not accumulate.

---

Notes and limits

• dashArray entries are used as raw numbers — a rem dash length is applied as if it were pixels. Use px for dash arrays.
• The five unsupported keywords still export correctly; the limitation is only in what Figma can render.
• To set style, width, and colour together, use a border token.