Разработка дизайн-системы

Дизайн-система — это единый язык для дизайнеров и разработчиков. Без общих компонентов каждый редизайн собирается с нуля и растягивается. С дизайн-системой новые экраны собираются из готовых блоков.

Хорошая система экономит не только время, но и деньги: она снижает рассинхронизацию между командами, уменьшает расхождения между макетом и реализацией и ускоряет онбординг новых специалистов.

Мы разрабатываем дизайн-системы как брендинговое агентство — из вашего брендбука. Цвета, шрифты, графика и тон бренда превращаются в токены и компоненты, поэтому любой новый экран сразу выглядит как ваша компания.

Для мобильного приложения Северстали мы разработали дизайн-систему на основе существующего брендбука компании (2021). Задача была не придумать новый визуальный язык, а перевести действующую айдентику в правила интерфейса. Смотреть кейс Северстали

Для Школы экспорта РЭЦ дизайн-система стала точкой отсчёта всего редизайна портала после ребрендинга. Вручную спроектировали только нетиповые страницы с особым функционалом, остальные собираются по правилам системы. Отдельно описали поведение интерактивных элементов — дизайн-систему анимации. Результат — макеты для десктопа, планшета и смартфона для 20 разделов.

Брендбук описывает бренд целиком: смысл, логотип, цвета, типографику, фотостиль, носители от визитки до вывески. Дизайн-система описывает только цифровые интерфейсы, зато до уровня кнопки: размеры, отступы, состояния, поведение, код.

Брендбук отвечает на вопрос «какой у нас бренд», дизайн-система — «как собрать из бренда экран». Без брендбука дизайн-система превращается в набор нейтральных компонентов, которые подходят кому угодно. Без дизайн-системы брендбук в digital трактуют по-своему каждый дизайнер и каждый разработчик.

Перевести бренд на язык экрана — не то же самое, что скопировать брендбук в Figma. Правила, придуманные для полиграфии и вывесок, в интерфейсе приходится адаптировать. Вот что происходит с основными элементами.

1. Фирменные цвета → цветовые токены. Основные цвета проверяем на контраст для текста на экране. Если фирменный цвет не читается как фон кнопки, добавляем оттенки для состояний: наведение, нажатие, неактивность, ошибка.
2. Фирменные шрифты → экранная типографическая шкала. Задаём размеры заголовков и текста для десктопа и смартфона, межстрочные интервалы, правила переноса. Проверяем, есть ли у шрифта нужные начертания и лицензия для веба и приложений.
3. Графика и паттерны → иконки, иллюстрации, фоны. Фирменная графика становится системой иконок одного стиля и правилами использования иллюстраций в пустых состояниях, онбординге, уведомлениях.
4. Модульная сетка → сетка и отступы экрана. Шаг отступов, колонки, поведение при разной ширине экрана.
5. Тон бренда → тексты интерфейса. Как звучат кнопки, подсказки и сообщения об ошибках. Если реклама говорит с клиентом просто и тепло, интерфейс не должен отвечать языком инструкции.
6. Характер бренда → движение. Скорость и характер анимации: строгий бренд двигается сдержанно, игровой — живее. Для РЭЦ поведение интерактивных элементов описали отдельной дизайн-системой анимации.

1. Дизайн-токены — базовые значения: цвета с учётом контраста, шрифты и шкала размеров, отступы, скругления, тени, длительность анимаций.
2. Компоненты — кнопки, поля, чекбоксы, карточки, таблицы, навигация, модальные окна со всеми состояниями: обычное, наведение, нажатие, ошибка, неактивное, загрузка.
3. Паттерны — типовые сборки из компонентов: формы, фильтры, пустые состояния, сообщения об ошибках, онбординг.
4. Документация — правила применения: когда какой компонент использовать, как писать тексты в интерфейсе, как не надо делать.
5. Библиотека в Figma и код — компоненты в Figma и, если нужно, их реализация в кодовой библиотеке вашей команды.

1. У вас несколько цифровых продуктов: сайт, личный кабинет, приложение, внутренние сервисы.
2. Над продуктом работают несколько дизайнеров или подрядчиков, и интерфейсы расходятся.
3. Продукт часто обновляется, а каждый новый экран рисуется с нуля.
4. Прошёл ребрендинг, и нужно быстро перевести все интерфейсы в новый стиль.
5. Команда разработки растёт, и новичкам нужны понятные правила.

Если продукт один и маленький, достаточно UI-kit в рамках UX/UI-дизайна. Полноценная система нужна, когда стоимость несогласованности становится заметной.

Начинаем с аудита существующих интерфейсов: собираем все уникальные компоненты, обнаруживаем дублирование и несоответствия. Затем создаём атомарную библиотеку — от токенов до составных компонентов — и документируем правила применения.

1. Аудит существующих интерфейсов, компонентов и брендбука
2. Создание дизайн-токенов (цвет, типографика, отступы) из фирменного стиля
3. Разработка атомарных и составных компонентов со всеми состояниями
4. Документация правил применения
5. Передача в Figma и кодовую библиотеку (если нужно)
6. Обучение команды работе с системой

Стоимость рассчитываем после брифинга и аудита интерфейсов. На цену влияют: количество продуктов и платформ, число компонентов и состояний, есть ли готовый брендбук, нужна ли кодовая библиотека и обучение команды.

Если брендбука нет, начинаем с фирменного стиля, и дизайн-система становится его цифровым продолжением. Работаем по договору с поэтапной приёмкой. Цены на брендинг — на странице цены.

1. Библиотека компонентов в Figma с документацией
2. Дизайн-токены для передачи в разработку
3. Правила применения для каждого компонента
4. Примеры сборки экранов из готовых блоков
5. Поддержка и расширение системы — по отдельной договорённости

Дизайн-система — часть услуги разработка UX/UI-дизайна. Проверить текущий интерфейс — UX-аудит и юзабилити-тестирование. Основа системы — брендбук и фирменный стиль. Как устроен процесс проектирования интерфейсов — в статье что такое UX/UI-дизайн.

Работаем в Санкт-Петербурге (ул. Конторская, 18, оф. 66, +7 812 996 90 54) и Москве (ул. Новорязанская, 16-11, оф. 47, +7 921 346 77 41), с проектами по всей России.