Skip to content

Stroke style

Token typePartial$type: strokeStyle2026-11-09

How a stroke is drawn: a keyword or an explicit dash pattern.

Partial: the keywords double, groove, ridge, outset and inset cannot be applied to layers. A stroke style has no Figma variable.

Value format

A keyword:

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

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

A dash pattern:

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

Both fields are required. dashArray needs at least one dimension or reference. lineCap is round, butt or square.

In Syntope Tokens

The field takes a keyword or a reference to another stroke style. For a dash pattern, select the link icon (Edit dash pattern), add lengths with add dash and choose the line cap.

Applying to layers

Apply token works on layers that support strokes.

Value Result
solid Clears the dash pattern
dashed Dash pattern [3w, 3w]
dotted Dash pattern [w, w]
A dash pattern Lengths in pixels (rem × 16). An odd list is repeated once. lineCap sets the stroke cap
double, groove, ridge, outset, inset Not applied. The layer stays unchanged and the plugin reports it

w is the layer’s stroke weight, or the width of a border token. A keyword does not change the layer’s stroke cap.

  • For tokens you apply, use solid, dashed, dotted or a dash pattern. The other keywords still export unchanged for code.
  • dashed and dotted need one stroke weight on the layer. If its sides differ, set one weight first or apply a border token.

Figma variables

Variable sync leaves stroke styles out. Figma has no variable type for them. Apply them to layers directly.