Контакт

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

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

03 04 service 3 of 4 in Веб-дизайн

Что входит

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

Кому подходит

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

Коротко

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

Что даёт дизайн-система

Дизайнерский долг растёт тихо: каждый новый экран чуть-чуть отличается. Система это останавливает.

  1. 01

    Новые экраны быстрее

    Собираются из готовых частей за часы, а не рисуются с нуля днями.

  2. 02

    Одинаково везде

    Кнопки, формы и таблицы ведут себя одинаково на каждом экране.

  3. 03

    Меньше споров

    Дизайн и разработка говорят на одном языке: у токена и компонента одно имя.

  4. 04

    Изменения в одном месте

    Новый фирменный цвет или радиус меняется в токене — и сразу везде.

  5. 05

    Доступность по умолчанию

    Контраст, фокус и клавиатура зашиты в компоненты, а не проверяются вручную каждый раз.

  6. 06

    Проще ввести новичка

    Новый дизайнер или разработчик работает по правилам с первого дня.

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

От самых мелких значений до правил для всего продукта.

Токены

  • Цвета с ролями: фон, текст, акцент, ошибка
  • Шрифты, размеры и межстрочные интервалы
  • Отступы, радиусы и тени
  • Длительности и кривые движения

Компоненты

  • Кнопки, поля, списки, флажки
  • Таблицы, карточки, окна, уведомления
  • Все состояния: наведение, фокус, недоступно, ошибка, загрузка

Паттерны

  • Формы, фильтры, поиск, пустые состояния
  • Навигация и шаблоны страниц

Документация

  • Когда использовать компонент, а когда нет
  • Живые примеры и код
  • Правила добавления новых компонентов

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

Система окупается, когда одни и те же части используют снова и снова, и не один человек.

  • Продукт с десятками экранов

    Нужна

    Без системы каждый новый экран добавляет дизайнерский долг.

  • Несколько дизайнеров или разработчиков

    Нужна

    Без общих правил каждый рисует свою кнопку.

  • Несколько продуктов под одним брендом

    Нужна

    Система держит их вместе.

  • Корпоративный сайт, который будет расти

    Лёгкая версия

    Хватит токенов и базовых компонентов.

  • Разовый лендинг

    Рано

    Система стоит дороже, чем сэкономит.

  • Продукт, который ещё ищет себя

    Рано

    Сначала найти, что работает, потом закрепить в системе.

Как мы создаём дизайн-систему

Не библиотека «на будущее», а система, выросшая из настоящих экранов.

  1. Инвентаризация

    Собираем всё, что есть: сколько на самом деле видов кнопок, цветов и отступов.

  2. Токены

    Десятки случайных значений превращаются в короткий список именованных.

  3. Компоненты

    Сначала самые используемые — со всеми состояниями и встроенной доступностью.

  4. Дизайн и код вместе

    Библиотека в Figma и код используют одни имена и значения.

  5. Документация

    Короткая, с живыми примерами — чтобы её открывали, а не складывали в архив.

  6. Передача и обучение

    Команда учится пользоваться системой и правилам, по которым её развивать.

Частые ошибки с дизайн-системами

  1. Система только в Figma

    Если код живёт своей жизнью, система — просто красивая картинка.

  2. Строить на все случаи сразу

    Компоненты, которыми никто не пользуется, только утяжеляют систему.

  3. Документация, которую не читают

    Сто страниц теории проигрывают одной странице с примерами.

  4. Нет хозяина

    Без ответственного система расползается за год.

  5. Доступность «потом»

    Чинить контраст и фокус в готовой системе — значит трогать каждый компонент.

Вопросы о дизайн-системах

Сколько стоит дизайн-система?

Цена считается по часам: зависит от числа компонентов и продуктов. Сумма фиксируется до старта, оценка — бесплатно.

Что такое токен?

Именованное значение — цвет, размер, отступ, — которое дизайн и код используют под одним именем.

Можно ли сделать систему для готового продукта?

Да: она начинается с инвентаризации того, что есть, и внедряется постепенно, экран за экраном.

Работаете ли вы в Figma?

Да, библиотека настраивается в Figma, а те же токены и компоненты живут в коде.

Кто будет поддерживать систему?

Ваша команда — по правилам, которые мы передаём, — или мы в формате сопровождения.

Форма

Обсудить
дизайн-систему

Расскажите о продукте, команде и о том, где экраны расходятся, — предложим объём системы и оценим работу. Консультация бесплатная.

Или пишите на [email protected]