Дизайн-токены:
Язык интерфейса
Единый источник правды для цветов, шрифтов и отступов. Узнайте, как Формли синхронизирует дизайн и разработку через строгую систему токенов.
Что такое токены
в Формли?
Токены — это атомарные строительные блоки, определяющие визуальный язык системы. Мы не используем хардкод. Каждое значение имеет имя и контекст.
В отличие от простых переменных, токены в Формли разделены на три уровня абстракции:
-
01.
Примитивы — базовые значения (сырые цвета, пиксели).
-
02.
Семантика — назначение (напр.,
color-bg-surface). -
03.
Компоненты — специфика (напр.,
btn-primary-hover).
--color-primary-500: #FFD700;
--color-accent: var(--color-primary-500);
--btn-bg-hover: var(--color-accent);
Экспорт в JSON и CSS Variables
JSON Spec
Единый файл tokens.json служит источником правды для всех платформ. Поддерживает вложенные структуры и префиксы.
CSS Custom Properties
Автоматическая генерация :root переменных с кросс-браузерными префиксами и фолбэками.
SCSS & Tailwind
Плагины для конвертации токенов в SCSS мапы или Tailwind tailwind.config.js конфигурацию.
Синхронизация
Figma <> Code
Ликвидируйте разрыв между дизайном и разработкой. Измените цвет в Figma — и он обновится в вашем приложении.
Мы используем плагин Formly Tokens, который сканирует стили Figma и компилирует их в JSON. Скрипт билда автоматически генерирует CSS файлы.
- ✓ Двусторонний маппинг имен
- ✓ Валидация именования (kebab-case)
- ✓ Лог изменений (Changelog)
Обработка тем (Theming)
Создавайте темную, светлую или брендовую тему, меняя всего 5 переменных. Система пересчитает производные цвета автоматически.
Частые вопросы
Да. Поскольку CSS Variables поддерживаются во всех современных браузерах, токены работают нативно в любых фреймворках, использующих CSS.
Обновление происходит при каждом коммите в репозиторий или по расписанию (Cron job), который вы настроите в CI/CD пайплайне.
Да, вы можете использовать наш CLI инструмент для маппинга существующих CSS переменных в формат токенов Формли.