Border

Color, width and style as one token.

Partial: a border whose style is double, groove, ridge, outset or inset cannot be applied to layers. A dash pattern written directly in the border cannot be edited in the token dialog.

Value format

{
  "$type": "border",
  "$value": {
    "color": { "colorSpace": "srgb", "components": [0.9, 0.9, 0.9] },
    "width": { "value": 1, "unit": "px" },
    "style": "solid"
  }
}

Field	Value
color	A color value or reference
width	A dimension value or reference
style	A stroke style value or reference

All three are required. The whole $value can also be a reference to another border token.

In Syntope Tokens

The dialog starts with one reference field. To enter values, select the link icon (Show border fields) and fill color, border width and stroke style. Each field takes a value or a reference.

stroke style takes keywords and references only. If a border has a dash pattern written into it, editing any of its fields in the dialog makes the save fail. Create a stroke style token with the dash pattern and reference it here, or edit the border in the JSON editor.

color shows a literal color as hex. Editing any field saves that hex, so a wide-gamut color is converted to sRGB. To keep its space, reference a color token in color or edit the border in the JSON editor.

Applying to layers

Apply token works on layers that support strokes. In order, it:

1. Replaces all strokes with one solid paint.
2. Sets the stroke weight. rem is multiplied by 16.
3. Sets the dash pattern, and the cap if the style names one.

Replaces existing strokes

A layer with several strokes ends up with one. Use Figma’s undo to restore them if that was not intended.

If the style cannot be applied, nothing changes on the layer and the plugin reports it. Use solid, dashed, dotted or a dash pattern.

Figma variables

Variable sync leaves borders out, because Figma has no composite variable type. Apply them to layers directly, or map their parts through separate color and dimension tokens.