Дизайн-система ≠ библиотека компонентов. Что упускают команды
Набор кнопок и инпутов в Figma — это ещё не дизайн-система. Разбираем, из чего она состоит на самом деле и почему без этих частей она умирает через полгода.
Почти каждый второй клиент приходит к нам со словами «у нас уже есть дизайн-система». Открываем файл — там аккуратная библиотека компонентов, которую никто не обновлял с прошлого года, а в продукте живут три разных оттенка основного цвета.
Библиотека — это только витрина
Компоненты — самая заметная часть системы, но далеко не главная. Дизайн-система работает, только когда у неё есть четыре слоя:
**основы**: цвета, типографика, сетка, отступы, оформленные как токены, а не как набор образцов;
**компоненты**: с состояниями, вариантами и правилами использования;
**паттерны**: как из компонентов собираются типовые экраны — формы, таблицы, пустые состояния, ошибки;
**процесс**: кто вносит изменения, как они проверяются и как попадают в код.
Токены вместо hex-кодов
Самая частая ошибка — цвета и размеры, зашитые прямо в макеты и код. Как только бренд меняет оттенок, начинается ручная охота по сотням экранов. Токены решают это: в макете и в коде используется не «#C6FF3D», а «accent». Значение меняется в одном месте и разъезжается везде.
Документация, которую читают
Хорошая документация отвечает не на вопрос «как выглядит кнопка», а на вопрос «какую кнопку здесь использовать». Мы пишем рядом с каждым компонентом короткие правила: когда применять, когда не применять, типичные ошибки. Это сокращает количество вопросов от разработчиков в разы.
Дизайн-система — это договорённость между дизайном и разработкой, а Figma-файл — лишь одна из её записей.
Владелец и ритм
Система без владельца деградирует. Нужен человек или небольшая группа, которые принимают изменения, и регулярный ритм: раз в две недели разбор новых запросов, раз в квартал ревизия того, что устарело.
С чего начать
Не нужно строить всё сразу. Начните с аудита: соберите все реальные экраны продукта, найдите повторы и расхождения. Затем оформите основы как токены и синхронизируйте их с кодом. Компоненты добавляйте по мере того, как они реально нужны в работе, а не «на будущее».
Журнал