Пошаговое руководство для дизайнеров: от первых переменных до полной масштабируемой архитектуры. Разберём реальные кейсы, типовые ошибки и готовые шаблоны для старта.
Дизайн-токены — это именованные переменные, которые заменяют «магические числа» в макетах. Вместо того чтобы каждый раз писать #8A2BE2 или отступ 24px, вы обращаетесь к semantic-значению.
Представьте, что ваш продукт живёт в четырёх средах: веб-приложение, мобильное приложение iOS, мобильное приложение Android и email-рассылки. Если вы закодуёте цвет кнопки как #8A2BE2 во всех четырёх местах, то при смене бренда потребуется править сотни файлов. Токены решают эту проблему: вы меняете значение color.primary один раз — и оно обновляется везде.
В Glypha мы разделяем токены на три уровня. Primitive — сырые значения (например, purple-500: #8A2BE2). Semantic — значения с ролью в интерфейсе (color.action.primary → purple-500). Component — значения, привязанные к конкретному компоненту (button.primary.bg → color.action.primary). Такая иерархия позволяет менять палитру, не ломая семантику, и менять семантику, не трогая компоненты.
Перед тем как начать, ответьте себе на три вопроса: сколько платформ вы поддерживаете сегодня? Кто в команде будет поддерживать токены — дизайнер, разработчик или оба? И как часто вы планируете менять визуальный стиль? Ответы определят глубину вашей иерархии — для старта достаточно двух уровней.
Разберём четыре категории токенов на конкретных значениях из Glypha. Так вы увидите, как абстрактные принципы превращаются в работающий код.
Начните с палитры на 5–6 оттенков для каждой базовой краски. В Glypha: purple-500 (#8A2BE2), purple-600 (#6A1B9A), cyan-400 (#00D4FF). Затем создайте семантические роли: color.text.primary, color.bg.surface, color.action.primary. Всегда проверяйте контраст: текст на фоне не ниже 4.5:1.
Определите шкалу размеров, весов и межстрочного интервала. В Glypha мы используем Outfit для заголовков и Manrope для текста. Токены: font.size.h1 (clamp 2.5–4rem), font.size.body (1.125rem), font.weight.display (700). Задавайте размеры через clamp(), чтобы типографика адаптировалась к любому экрану без медиа-запросов.
Постройте сетку отступов на базе одного модуля. В Glypha базовый шаг — 4px: space.1 (4px), space.4 (16px), space.8 (32px). Используйте их для padding, margin и gap. Правило: чем крупнее элемент, тем больше отступы вокруг него. Карточка получает space.8, секция — space.16.
Не задавайте скругления «на глаз». В Glypha: radius.md (12px) для кнопок и полей, radius.lg (24px) для карточек и модалок, radius.pill (999px) для чипсов. Тени тоже токенизируйте: shadow.sm для полей, shadow.lg для выпадающих панелей. Это сохраняет визуальную глубину консистентной.
Задайте длительности и кривые как переменные: motion.duration.fast (150ms), motion.duration.base (300ms), motion.ease (cubic-bezier(0.4, 0, 0.2, 1)). Это делает микро-взаимодействия предсказуемыми и позволяет глобально ускорить или замедлить интерфейс, например, для режима «быстрого» просмотра.
Отдельные значения для hover, focus и disabled. Например, button.primary.bg → purple-500, а button.primary.bg.hover → purple-600. Для focus-кольца используйте color.focus → cyan-400. Это критично для доступности: без видимого фокуса клавиатурная навигация ломается.
Даже опытные команды спотыкаются на одних и тех же местах. Вот шесть ошибок, которые мы чаще всего видим при аудите дизайн-систем.
Три уровня — максимум для большинства продуктов. Если вы создаёте четыре-пять, команда перестанет понимать, где что менять. Начните с двух (primitive + semantic) и добавляйте третий только когда появятся реальные component-level различия.
Избегайте названий вроде color.1 или blue-dark. Имя должно описывать роль: color.text.secondary понятен без контекста, а gray-700 заставляет гадать, где он применяется. Никогда не называйте токены по текущему значению — завтра оно изменится.
Токены — идеальный инструмент для WCAG. Задайте color.text.on-primary и проверяйте, что контраст не ниже 4.5:1. Добавляйте токены для focus-состояний и respect for reduced motion. Без этого ваша система будет отключать часть пользователей.
Один и тот же токен не обязан выглядеть идентично везде, но должен сохранять семантику. Если space.4 = 16px на вебе, то и на iOS он должен быть 16pt. Если вы «подкручиваете» значения под платформу — это уже другой, platform-specific токен, а не переопределение.
Токены живут в репозитории, а не в Figma-файле. Заведите changelog, версионирование (semver) и чёткий процесс: кто вносит изменения, как они проверяются и когда попадают в релиз. Без этого через полгода система превратится в хаос из «быстрых правок».
Не пытайтесь описать все токены сразу. Начните с 40–60 самых частых значений, запустите их в продукт и расширяйте по мере необходимости. Система, которую используют, всегда лучше, чем идеальная, но незадействованная.
Не обязательно изобретать всё с нуля. Ниже — три готовых шаблона, которые покрывают 80% потребностей типичного продукта.
Для MVP и небольших команд. Включает: 6 цветовых ролей, 4 типографических размера, 6 пространственных значений, 2 радиуса, 2 тени. Достаточно, чтобы запустить первый прототип за день и не застрять в настройках.
Стандарт Glypha. Полная палитра на 5 оттенков для 4 базовых красок, полная типографическая шкала (10 размеров), 12 пространственных значений, 4 радиуса, 3 тени, 4 анимационные переменные. Покрывает любой B2B или B2C продукт.
Для корпоративных продуктов с несколькими брендами и платформами. Добавляет: dark-mode вариации, brand-specific палитры, motion-профили (fast/normal/slow), platform-specific отступы для iOS/Android/веб.
Источник истины — в коде (JSON или YAML в git-репозитории). Figma получает токены через синхронизацию. Так вы получаете версионирование, history и CI/CD-проверки. Обратная синхронизация из Figma приводит к рассинхрону и путанице.
Для среднего продукта (100+ экранов) — 4–8 недель. Первые две недели: аудит и определение иерархии. Следующие две: миграция существующих значений. Остальное время: чистка и покрытие edge-cases. Не пытайтесь сделать за спринт — это приведёт к регрессиям.
Да, но не дублируйте всё. Semantic-токены (color.bg.surface) переопределяются в dark-варианте, а primitive-палитра остаётся общей. В Glypha это реализуется через CSS-переменные: :root задаёт light-значения, [data-theme="dark"] переопределяет semantic-роли.
Добавьте в CI: (1) валидатор JSON-схемы токенов, (2) проверку контраста через axe-core, (3) snapshot-тесты рендера ключевых компонентов. В Glypha мы также проверяем, что все semantic-токены реально используются в компонентах — неиспользуемые значения удаляются.
Скачайте стартовый набор Glypha и получите 140 готовых токенов, документацию и примеры миграции. Бесплатно для команд до 10 человек.