Stroke style
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,dottedor a dash pattern. The other keywords still export unchanged for code. dashedanddottedneed 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.
