Borders
Типы токенов группы Borders: Border, Border Width, Border Radius, Stroke Style. Какие ключи принимаются, что становится переменной, а что применяется к слою напрямую.
$type | Экспортируется как | Значение |
|---|---|---|
border | Внутренний, применяется к слою | Объект: цвет, толщина, стиль линии |
borderWidth | Переменная Number | Число или строка с единицей |
borderRadius | Переменная Number | Число или строка с единицей |
strokeStyle | Внутренний, применяется к слою | Объект с описанием штрихов и концов линии |
borderWidth и borderRadius попадают в Figma переменными и включаются переключателем Variables → Number. border и strokeStyle в Figma не экспортируются: они применяются к слоям кнопкой Apply Tokens и используются в композициях и коде.
Border
Составное описание обводки. Можно указать только часть ключей, остальное плагин оставит как есть.
| Ключ | Значения |
|---|---|
color | Строка цвета или ссылка на цветовой токен |
width | Число, строка с единицей или ссылка на borderWidth. Ссылка привязывает к слою переменную толщины обводки |
style | solid, dashed, dotted. Значение none или hidden убирает обводку |
strokeAlign | inside, center, outside. Без ключа обводка ставится внутрь |
dash, gap | Длина штриха и пропуска для dashed |
dashCap, endCap, strokeJoin | Форма концов штрихов, концов линии и углов: butt, round, square; для углов miter, bevel, round |
strokeStyle | Ссылка на токен strokeStyle, из которого берутся штрихи и концы линии |
Штрихи задаются либо ключами dash, gap и концами прямо в объекте border, либо ссылкой strokeStyle на отдельный токен. Вложенный объект в ключе strokeStyle не читается: форма Create Border принимает в этом поле только ссылку.
{
"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" }
}
}
}
В форме Create Border есть переключатель Use alias для ссылки на другой border, поля Color и Stroke Style и раскрывающийся блок Custom style с полями Width, Style, Dash, Gap, Dash Cap, End Cap и Join.
Border Width
Переменная Number со scope Stroke width.
| Принимается | Пример |
|---|---|
| Число | 1 |
| Строка с единицей | "1px", "0.5rem" |
| Ссылка или математика | "{borderWidth.md}" |
{ "borderWidth": { "$type": "borderWidth", "sm": { "$value": "1px" }, "md": { "$value": "2px" } } }
Border Radius
Переменная Number со scope Corner radius.
| Принимается | Пример |
|---|---|
| Число | 8 |
| Строка с единицей | "8px", "1rem" |
| Ссылка или математика | "{borderRadius.lg} * 2" |
{ "borderRadius": { "$type": "borderRadius", "sm": { "$value": "4px" }, "pill": { "$value": "999px" } } }
Stroke Style
Описание штрихов и концов линии. Применяется к слою напрямую и может использоваться из border по ссылке.
| Принимается | Пример |
|---|---|
| Строка стиля | "solid", "dashed" |
| Объект | см. ключи ниже |
| Ссылка | "{strokeStyle.dashed}" |
| Ключ | Значения |
|---|---|
style | solid, dashed, dotted |
dash | Длина штриха, число или строка с единицей |
gap | Длина пропуска |
width | Толщина обводки; ссылка на borderWidth привязывает переменную |
dashCap | Форма концов штрихов: butt, round, square |
endCap | Форма концов линии |
strokeJoin | Форма углов: miter, bevel, round |
Форма Create Stroke Style предлагает стили Solid и Dashed; значение dotted, записанное в JSON, при открытии в форме показывается как Dashed. Массив вроде [4, 4] проходит проверку, но к слою не применяется, задавайте dash и gap ключами объекта.
{
"strokeStyle": {
"$type": "strokeStyle",
"dashed": { "$value": { "style": "dashed", "dash": 6, "gap": 4, "dashCap": "round" } }
}
}
Полный пример
{
"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}" } }
}
}