Гайд

Дизайн-токены на примере настоящих файлов

Дизайн-токен это дизайн-решение, у которого есть имя: цвет, отступ, размер шрифта. Оно хранится в одном месте и используется везде: и в дизайн-инструменте, и в коде.

Зачем нужны токены

Без токенов синий цвет ваших кнопок записан в файле дизайна, потом ещё раз в CSS, потом ещё раз в приложении. Поменяли его в одном месте, и теперь нужно искать его везде. С токенами вы меняете color.brand, и все места, где он используется, обновляются следом.

Как выглядит файл токенов

W3C Design Tokens Community Group описывает формат JSON, в котором у каждого токена есть $value и $type.

{
  "color": {
    "brand": { "$value": "#2F5BEA", "$type": "color" },
    "ink":   { "$value": "#121214", "$type": "color" }
  },
  "space": {
    "4": { "$value": "16px", "$type": "dimension" }
  }
}

Те же решения в виде CSS-переменных, понятных браузеру:

:root {
  --color-brand: #2F5BEA;
  --color-ink: #121214;
  --space-4: 16px;
}

Как Kalka работает с токенами

  • Одна папка: в каждом проекте есть папка design-system/ с файлом tokens.json в формате W3C и tokens.css рядом с ним.
  • Прямо на холсте: выбирая цвет или отступ в панели дизайна, вы выбираете токен, а CSS использует переменную.
  • Версионирование в Git: смена фирменного цвета это коммит, который можно проверить, как любое изменение кода.

Kalka в разработке, код открыт. Структура папок выше взята из нашей продуктовой спецификации.