Почти в любой продуктовой компании есть своя дизайн-система или её зачаток. На собесе проверяют, умеете ли вы ей пользоваться, развивать её и объяснять, зачем она бизнесу.
Что это
UI-кит это набор нарисованных элементов. Дизайн-система шире:
- принципы и правила;
- токены (цвета, типографика, отступы, радиусы, тени, длительности анимаций);
- компоненты в дизайне и в коде;
- документация: когда использовать и когда нет;
- процесс: кто поддерживает, как принимаются изменения, как выпускаются версии.
Токены
Токен это именованное дизайн-решение, общее для макетов и кода. Уровни:
color.blue.600 примитив: значение палитры
color.action.primary семантический: назначение, ссылается на примитив
button.primary.bg.hover компонентный: конкретный элемент
Семантический слой даёт темы и бренды: компонент берёт color.action.primary, а значение зависит от темы. Имена говорят о назначении, а не о цвете: color.header.blue станет ложью после ребрендинга. Токены текста должны гарантировать контраст.
Атомарный дизайн
Брэд Фрост делит интерфейс на атомы (кнопка, поле), молекулы (поле поиска с кнопкой), организмы (шапка), шаблоны (раскладка страницы) и страницы (шаблон с реальным контентом). Модель удобна для разговора, но не догма.
Компонент
Хороший компонент описан полностью:
- анатомия и варианты;
- состояния: default, hover, focus, pressed, disabled, loading, для полей ещё error и readonly;
- поведение: клавиатура, адаптив, длинные тексты;
- доступность: подписи, контраст, фокус;
- примеры «так и не так», ссылка на код, статус.
Отвязанные экземпляры в макетах это сигнал: компонент не закрывает реальную потребность. Запрещать отвязку бесполезно, нужно выяснить причину.
Развитие системы
Модели: централизованная (всё делает команда системы), федеративная (вклад продуктовых команд), гибридная. Здоровый процесс приёма компонента: заявка с обоснованием, проверка повторного использования, обобщение API и доступности, добавление в дизайн и код, документация.
Ломающие изменения: RFC, параллельная жизнь старого и нового, мажорная версия с changelog и гайдом миграции, срок поддержки, удаление.
Как мерить пользу
- доля интерфейса на компонентах (adoption) в дизайне и коде;
- время на типовые экраны до и после;
- число визуальных багов и расхождений.
Число компонентов и страниц документации это затраты, а не результат.
Частые ошибки
- Система только в Figma, без кода: быстро разойдётся с продуктом.
- Компонентные токены с голыми hex.
- Нет состояний фокуса и загрузки.
- Компонент на каждый частный случай вместо свойств.
Что спросят на собесе
- Чем дизайн-система отличается от UI-кита?
- Как устроены токены и зачем семантический слой?
- Как вы спроектируете компонент «Поле ввода»?
- Как запустить дизайн-систему в компании без неё?
- Как доказать её пользу руководству?