Дизайн-системы: Одна система на все продукты.
Дизайн-система, которая работает на нескольких продуктах сразу — как наша собственная. Токены, ~40 компонентов со всеми состояниями, Storybook и Figma Variables. Дизайн и разработка перестают спорить и начинают релизить быстрее.
Знакомая ситуация
Десять разных кнопок
В каждом продукте свои кнопки, цвета и отступы. Пользователь видит будто разные компании, а бренд расползается от экрана к экрану.
Каждый экран с нуля
Дизайнер заново рисует то, что уже было, программист заново это собирает. Время команды уходит на повторы, а не на новое.
В макете одно, в коде другое
Значения в макетах и в коде расходятся. Каждая сдача превращается в переписку о том, как должно выглядеть, и выпуск сдвигается.
Мелкая правка на неделю
Чтобы сменить фирменный цвет, его ищут вручную по всем продуктам. Что-то обязательно пропускают, и разнобой остаётся.
Польза для бизнеса
Единый стиль везде
Один источник правды на лендинг, приложение и кабинет. Продукты не расходятся в деталях, бренд не разваливается между экранами.
Быстрые релизы
Дизайнер собирает экран из готовых компонентов, разработчик берёт код из Storybook. Новые фичи выходят в разы быстрее.
Один язык с разработкой
Токены в Figma Variables = переменные в коде. Дизайн и фронтенд оперируют одними сущностями, и расхождения в значениях исчезают.
Меньше технического долга
Поправили токен — изменилось во всех продуктах. Нет копипасты стилей и десяти разных кнопок, которые потом никто не может починить.
Работающая система: токены, компоненты со всеми состояниями и развёрнутый Storybook, по которому пишут код.
Токены — фундамент
Цвет, типографика, отступы, радиусы, тени, motion — в виде токенов, а не магических чисел. Figma Variables и переменные в коде синхронны: одно изменение прокатывается по всем продуктам.
- Токены: color, type, space, radius, shadow
- Figma Variables = переменные в коде
- Светлая / тёмная тема по запросу
- Никаких магических чисел в макетах
Компоненты и состояния
Около 40 компонентов со всеми состояниями: hover, active, focus, error, loading, disabled. Полная спецификация поведения для разработки, а не только внешний вид.
- ~40 компонентов: формы, навигация, карточки, модалки
- Все состояния, включая edge-кейсы
- Спецификация motion: easing, duration
- Правила компоновки и сетка
Storybook и передача
Каждый компонент живёт в Storybook со всеми состояниями и кодом. Разработчик открывает страницу, видит компонент и копирует реализацию — без переписки «а как тут».
- Storybook со всеми компонентами и состояниями
- Документация использования компонентов
- Код в вашем репозитории, без привязки к подрядчику
- Введение в систему для дизайнеров и разработчиков
Внедрение и развитие
Система живёт, пока за ней следят. Помогаем внедрить в текущие продукты, договариваемся о правилах вклада и при желании ведём развитие на ежемесячной поддержке.
- Внедрение в существующие продукты
- Правила вклада и версионирование
- Дизайн-ревью изменений в коде
- Поддержка и новые компоненты (ежемесячно)
От брифа до запуска
- Неделя 0Аудит продуктов, инвентаризация компонентовдизайнер + тех-лид
- Неделя 1Токены: цвет, типографика, отступы, motionдизайнер
- Неделя 2–4Компоненты со всеми состояниямидизайнер + фронтенд
- Неделя 5–6Storybook, документация, синхрон токенов с кодомфронтенд
- Неделя 7Внедрение в продукт, обучение, правила вкладакоманда
- + 30 днейСопровождение внедрения, дизайн-ревьювключено
Выберите объём
Токены и базовый набор компонентов в Figma. Без Storybook и кода.
- Токены: цвет, тип, отступы
- ~20 базовых компонентов
- Основные состояния
- Figma-библиотека
- Storybook — не входит
- Синхрон с кодом — не входит
Полная система: токены, ~40 компонентов, Storybook, синхрон с кодом.
- Токены в Figma Variables
- ~40 компонентов со всеми состояниями
- Спецификация motion
- Storybook со всеми компонентами
- Синхрон токенов с кодом
- Код в вашем репозитории
Система под несколько продуктов + развитие и ревью на ежемесячной поддержке.
- Полная дизайн-система
- Несколько продуктов / тем
- Внедрение в текущие продукты
- Дизайн-ревью изменений в коде
- Новые компоненты по списку задач
- Версионирование и changelog
Стоимость пакетов — в прайсе. Точную смету считаем после разбора задачи, это бесплатно.
Прайс PDF