Дизайн-система: из чего состоит и когда она нужна проекту

Дизайн-система — общий для дизайнеров и разработчиков набор правил и готовых деталей интерфейса: дизайн-токены цвета и размеров, компоненты вроде кнопок и форм, паттерны типовых сценариев и документация к ним, а часто и библиотека кода. Она нужна, когда интерфейс большой и над ним работают несколько человек. Сайту-визитке обычно хватает UI-кита и аккуратного макета.

Что такое дизайн-система простыми словами

Дизайн-система — это единый источник ответа на вопрос «как у нас делается этот элемент». Какого цвета основная кнопка, какой у неё отступ, как выглядит ошибка в поле формы, как устроена карточка товара — всё описано один раз, нарисовано в библиотеке макетов и, в зрелых системах, реализовано в коде.

Хорошо видно, что входит в систему, на открытых примерах. VKUI — библиотека адаптивных React-компонентов для веб-приложений, основанная на дизайн-системе ВКонтакте. Рядом с кодом лежат открытые дизайн-библиотеки в Figma, которые можно брать для своих интерфейсов: макет и вёрстка опираются на одни и те же компоненты.

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

Дизайн-система отвечает на вопрос «как у нас делается этот элемент» один раз для всех дизайнеров и разработчиков проекта.

Из чего состоит дизайн-система?

Состав зависит от масштаба, но в зрелых системах встречаются одни и те же слои:

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

Паттерны недооценивают чаще всего. Компонент «поле ввода» есть почти в любой системе, а вот правило, как спрашивать адрес, чтобы человек не ошибся, — это уже накопленный опыт команды.

Дизайн-система, UI-кит, гайдлайн и брендбук: в чём разница?

Эти слова часто используют как синонимы, хотя за ними стоят документы разного объёма и назначения.

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

UI-кит — часть дизайн-системы, но не вся она. Кит без документации и кода работает, пока им пользуется один дизайнер, который помнит, какую кнопку куда ставить.

Мнение. Если вам предлагают «дизайн-систему» для сайта из десяти страниц, уточните состав. Скорее всего, речь об UI-ките, и это нормально — но платить стоит за то, что действительно будет сделано.

Дизайн-токены: как цвета и размеры становятся общими для макета и кода

Дизайн-токен — именованное значение, которое одинаково называется в макете и в коде: цвет основного текста, отступ между блоками, радиус скругления кнопки. Вместо «#1D2330» в двадцати местах везде стоит «цвет текста», и при смене цвета меняется одно значение.

В документации VKUI дизайн-токены описаны как набор базовых переменных, задающих отступы, цвета, типографику и анимации. Компоненты там используют токены вместо конкретных значений, чтобы их было легко подстраивать под платформы и цветовые режимы. В вёрстке этот приём дают пользовательские свойства CSS — заданные автором значения, которые переиспользуют по всему документу.

Токены обычно делают в два уровня. Базовые описывают палитру как она есть: синий-500, серый-100. Смысловые описывают роль: цвет кнопки, цвет ошибки, фон карточки — и ссылаются на базовые. Компоненты используют только смысловые токены, поэтому тёмная тема или ребрендинг меняют связи между уровнями, а не код каждой кнопки.

Факт. Темы VKUI работают в светлом и тёмном цветовых режимах, а компоненты берут значения из токенов, а не из конкретных цветов, поэтому подстраиваются под выбранный режим.

Когда проекту нужна дизайн-система, а когда нет

Дизайн-система окупается там, где интерфейс постоянно растёт и над ним работает больше одного дизайнера и разработчика. Признаки, что пора:

• Интерфейс расползается — на разных страницах пять вариантов кнопки и три оттенка «основного» цвета.
• Несколько продуктов — сайт, личный кабинет и приложение должны выглядеть как одна компания.
• Несколько команд или подрядчиков — каждый делает по-своему, и макеты приходится сверять вручную.
• Новые разделы появляются регулярно — каждый раз заново решают, как оформить таблицу или форму.
• Долгий цикл правок — простое изменение цвета кнопки требует поиска по всему коду.

Честная граница проходит по масштабу. Сайту-визитке, лендингу или корпоративному сайту из десятка типовых страниц полноценная дизайн-система не нужна: её разработка и поддержка обойдутся дороже, чем аккуратный макет с UI-китом и списком цветов и шрифтов. Если сайт делает один подрядчик и меняется пару раз в год, дальше в этот раздел можно не углубляться.

Промежуточный вариант подходит большинству растущих компаний: UI-кит в Figma, токены цвета и шрифтов в коде и короткий документ с правилами. Это зародыш системы, который можно развить, когда появятся личный кабинет, второй сайт или своя команда разработки.

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

Дизайн-систему начинают с аудита того, что уже есть на сайте: сначала убирают дубли, потом описывают оставшееся.

Какие открытые дизайн-системы стоит посмотреть?

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

Копировать чужую систему целиком не нужно: она решает задачи своего продукта. Полезнее взять подход — как названы токены, как описаны состояния компонентов, как устроена страница документации — и применить его к своему интерфейсу.

Кто поддерживает дизайн-систему и как её обновлять

Дизайн-система без владельца устаревает быстрее, чем её успевают внедрить. Кто-то должен отвечать за то, чтобы библиотека в макетах и библиотека в коде совпадали, а новые компоненты не появлялись в обход неё.

Технически обновлять библиотеку в макетах стало проще. В Figma библиотека — набор компонентов, стилей и переменных, который подключается к разным файлам, и когда в ней что-то меняют, другие участники могут просмотреть изменения и обновить свои макеты. С кодом сложнее: изменения компонентов выпускают версиями, чтобы обновление кнопки не сломало страницы, которые на неё рассчитывали.

Владельцем обычно становится ведущий дизайнер продукта вместе с фронтенд-разработчиком. В небольшой компании это может быть подрядчик, который ведёт сайт, — главное, чтобы роль была названа явно. Как устроена работа дизайнера интерфейсов и что проверять заказчику, разобрано в статье UX и UI дизайн: в чём разница.

С чего начать, если дизайн-системы нет

Начните с малого: соберите аудит существующих кнопок, полей и цветов и сведите их к одному набору. Запишите цвета и шрифты токенами по ролям, нарисуйте базовые компоненты в Figma и договоритесь, что новые страницы собираются только из них. Этого достаточно, чтобы остановить расползание интерфейса, а полноценная система вырастет, когда появятся новые продукты и люди.

Если сайт ещё только проектируется, правила закладывают на этапе дизайна. В разработке корпоративного сайта мы рисуем макеты главной и типовых страниц, и по ним собираются остальные разделы — для сайта такого масштаба это и есть стартовый набор правил. Если нет фирменного стиля, с которого берутся цвета и шрифты, начните с разработки фирменного стиля.

Источники

• Обзор — VKUI — ВКонтакте
• Дизайн-токены — VKUI — ВКонтакте
• Темы — VKUI — ВКонтакте
• Using CSS custom properties — MDN Web Docs — Mozilla
• Gravity UI — Gravity UI