Borders
Token types of the Borders group: Border, Border Width, Border Radius, Stroke Style. Which keys are accepted, what becomes a variable and what is applied to a layer directly.
$type | Exported as | Value |
|---|---|---|
border | Internal, applied to a layer | An object: colour, width, line style |
borderWidth | Number variable | A number or a string with a unit |
borderRadius | Number variable | A number or a string with a unit |
strokeStyle | Internal, applied to a layer | An object describing dashes and line ends |
borderWidth and borderRadius reach Figma as variables and are enabled by the Variables → Number switch. border and strokeStyle are not exported to Figma: they are applied to layers with Apply Tokens and used in compositions and code.
Border
A composite stroke description. You can give only some keys; the plugin leaves the rest as it is.
| Key | Values |
|---|---|
color | A colour string or a reference to a colour token |
width | A number, a string with a unit or a reference to a borderWidth. A reference binds the stroke width variable to the layer |
style | solid, dashed, dotted. none or hidden removes the stroke |
strokeAlign | inside, center, outside. Without the key the stroke is placed inside |
dash, gap | Dash and gap length for dashed |
dashCap, endCap, strokeJoin | The shape of dash ends, line ends and corners: butt, round, square; for corners miter, bevel, round |
strokeStyle | A reference to a strokeStyle token that supplies the dashes and line ends |
Dashes are set either with the dash, gap and cap keys directly in the border object, or with a strokeStyle reference to a separate token. A nested object in the strokeStyle key is not read: the Create Border form accepts only a reference in that field.
{
"border": {
"$type": "border",
"default": {
"$value": { "color": "{color.neutral.300}", "width": "{borderWidth.sm}", "style": "solid", "strokeAlign": "inside" }
},
"focus": {
"$value": { "color": "#FF6600", "width": "2px", "style": "dashed", "dash": 6, "gap": 4, "dashCap": "round" }
}
}
}
The Create Border form has a Use alias switch for a reference to another border, the Color and Stroke Style fields and the expandable Custom style block with the Width, Style, Dash, Gap, Dash Cap, End Cap and Join fields.
Border Width
A Number variable with the Stroke width scope.
| Accepted | Example |
|---|---|
| A number | 1 |
| A string with a unit | "1px", "0.5rem" |
| A reference or math | "{borderWidth.md}" |
{ "borderWidth": { "$type": "borderWidth", "sm": { "$value": "1px" }, "md": { "$value": "2px" } } }
Border Radius
A Number variable with the Corner radius scope.
| Accepted | Example |
|---|---|
| A number | 8 |
| A string with a unit | "8px", "1rem" |
| A reference or math | "{borderRadius.lg} * 2" |
{ "borderRadius": { "$type": "borderRadius", "sm": { "$value": "4px" }, "pill": { "$value": "999px" } } }
Stroke Style
A description of dashes and line ends. It is applied to a layer directly and can be used from border by reference.
| Accepted | Example |
|---|---|
| A style string | "solid", "dashed" |
| An object | see the keys below |
| A reference | "{strokeStyle.dashed}" |
| Key | Values |
|---|---|
style | solid, dashed, dotted |
dash | Dash length, a number or a string with a unit |
gap | Gap length |
width | Stroke width; a reference to a borderWidth binds the variable |
dashCap | The shape of dash ends: butt, round, square |
endCap | The shape of line ends |
strokeJoin | The shape of corners: miter, bevel, round |
The Create Stroke Style form offers the Solid and Dashed styles; a dotted value written in JSON is shown as Dashed when opened in the form. An array such as [4, 4] passes validation but is not applied to the layer; set dash and gap as object keys instead.
{
"strokeStyle": {
"$type": "strokeStyle",
"dashed": { "$value": { "style": "dashed", "dash": 6, "gap": 4, "dashCap": "round" } }
}
}
Full example
{
"borderWidth": { "$type": "borderWidth", "sm": { "$value": "1px" }, "md": { "$value": "2px" } },
"borderRadius": { "$type": "borderRadius", "md": { "$value": "8px" } },
"strokeStyle": { "$type": "strokeStyle", "dashed": { "$value": { "style": "dashed", "dash": 6, "gap": 4 } } },
"border": {
"$type": "border",
"default": { "$value": { "color": "{color.neutral.300}", "width": "{borderWidth.sm}", "style": "solid", "strokeAlign": "inside" } },
"focus": { "$value": { "color": "{color.brand.primary}", "width": "{borderWidth.md}", "style": "dashed", "strokeStyle": "{strokeStyle.dashed}" } }
}
}