Дизайн-системы и токены
- Стоимость
- от 400 000 ₽
- Срок
- 6–10 недель
- Опыт
- 100+ проектов · 10+ лет · 9+ стран
Дизайн-системы на токенах: единый источник цветов, шрифтов и компонентов для Figma и кода
- Figma
- React
- Vue
Базовый набор. Под задачу и требования проекта подключаем и другие инструменты.
Когда продукт растёт, кнопки начинают расходиться по оттенкам, а отступы — по пикселям. Дизайн-система на токенах задаёт цвета, типографику, отступы и компоненты в одном месте и для дизайнеров, и для разработчиков.
Строим систему в Figma на переменных, связываем её с кодом и документируем, чтобы команда пользовалась ей, а не обходила.
Что делаем
- Аудит интерфейсов и сбор повторяющихся решений
- Токены: цвета, типографика, отступы, радиусы, темы
- Библиотеку компонентов в Figma на переменных
- Выгрузку токенов в код
- Документацию и styleguide для команды
Когда без системы уже больно
В макетах сорок оттенков серого и восемь видов кнопок
Проводим инвентаризацию: собираем все цвета, шрифты и компоненты с живых экранов, схлопываем дубли и оставляем минимальный набор с понятными именами.
Дизайнер поменял цвет, а в коде он остался старым
Храним значения в переменных Figma и выгружаем их в JSON, а оттуда — в CSS-переменные или конфиг Tailwind. Правка в одном месте доходит до продукта без ручного переноса.
Тёмная тема требует перерисовать весь интерфейс
Делим токены на базовые и смысловые: «фон карточки», а не «серый-100». Тема меняет только слой соответствий, а компоненты остаются прежними.
Новый дизайнер месяц разбирается, какие компоненты где брать
Пишем документацию рядом с компонентами: когда использовать, какие есть варианты, чего не делать. Плюс styleguide-страница для разработчиков с живыми примерами.
Систему однажды сделали, а через полгода ей никто не пользуется
Описываем процесс: кто вносит изменения, как предложить новый компонент, как помечать устаревшие. Систему строим на реальных экранах продукта, а не в отрыве от них.
Кому нужна дизайн-система
Подойдёт, если
- В продукте работает несколько дизайнеров или несколько команд разработки
- У вас линейка продуктов или white-label, где бренд меняется без переделки интерфейса
- Нужны светлая и тёмная темы или режим высокой контрастности
- Фронтенд уже на компонентах — React, Vue — и его хочется связать с Figma
Не подойдёт, если
- Продукт из десятка экранов и один дизайнер — соберём аккуратную библиотеку стилей в Figma
- Интерфейс ещё не проверен на пользователях — сначала UX/UI-дизайн, потом систематизация
Команда работает быстрее
Один источник правды
Цвет или отступ меняют в одном месте, и правка доходит до макетов и кода без ручной сверки.Новые экраны из готовых деталей
Дизайнеры собирают страницы из проверенных компонентов, а разработчики не верстают одну кнопку заново.Темы и бренды без переделок
Тёмная тема, суббренд или white-label — это новый набор токенов, а не перерисовка интерфейса.Система, которая живёт
Договариваемся о правилах добавления компонентов, чтобы через год система не превратилась в архив.
Как мы работаем
- 01
Инвентаризация интерфейса
1 неделяСобираем все кнопки, цвета, отступы и шрифты из макетов и продакшена и находим расхождения между ними.
Итог этапа Карта текущих компонентов со списком дублей и несостыковок - 02
Токены
1–2 неделиОписываем базовые и смысловые токены: палитра, типографика, отступы, радиусы, тени и темы.
Итог этапа Токены в Figma Variables и JSON-файл с той же структурой - 03
Компоненты
2–3 неделиСобираем компоненты на токенах с вариантами и состояниями и проверяем их на реальных экранах продукта.
Итог этапа Библиотека компонентов в Figma с вариантами, состояниями и автолейаутом - 04
Связка с кодом
1–2 неделиНастраиваем выгрузку токенов в CSS-переменные или тему фреймворка, чтобы правка в Figma доходила до кода без ручного переписывания.
Итог этапа Сборка токенов на Style Dictionary или аналоге и готовая тема в вашем репозитории - 05
Документация
1–2 неделиОписываем правила применения и порядок добавления новых компонентов, проводим разбор с дизайнерами и разработчиками.
Итог этапа Документация системы и запись разбора для команды
Что понадобится на старте
- Доступ к рабочим файлам Figma, включая старые и черновые
- Ссылки на продукт или стенд, где можно пройти основные экраны
- Стек фронтенда и то, как сейчас хранятся стили: CSS, Sass, Tailwind, CSS-in-JS
- Список тем, брендов или платформ, которые система должна покрыть
- Разработчик с вашей стороны, который примет выгрузку токенов в код
Разбор текущих макетов
Созваниваемся на полчаса, вы показываете Figma и код. После разбора присылаем, что войдёт в систему, в каком порядке её внедрять, сроки и оценку.
Статьи по теме
Все новости
Кнопки и отступы
разъехались
по экранам?
Соберём повторяющиеся решения, заведём токены цветов, шрифтов и отступов, построим библиотеку в Figma и свяжем её с кодом.
Полная — не всегда. Но набор токенов и базовых компонентов окупается уже на втором экране, который не приходится собирать с нуля.
От 400 000 ₽. Стоимость определяют число компонентов и их состояний, количество тем и брендов на одних токенах, а также нужна ли выгрузка токенов в код и документация для команды. Смету присылаем после разбора текущих макетов на созвоне.
Да, токены как раз позволяют переключать темы без переделки компонентов.
Выгружаем их из Figma в формат, который понимает ваш стек: CSS-переменные, SASS, JSON или конфиг Tailwind.
Ваша команда — по документации, которую мы оставляем. Можем и сопровождать систему сами.