Как построить дизайн-систему и библиотеку компонентов для нескольких продуктов?
- Зачем компании UI-кит?
- Как версионировать библиотеку компонентов?
Дизайн-система — общий язык дизайна и кода: токены (цвета, типографика, отступы) в CSS-переменных, библиотека компонентов с доступностью из коробки, документация и песочница (Storybook), версионирование по semver с журналом изменений и процесс — кто владеет, как продукты предлагают изменения. Компоненты без бизнес-логики, с продуманным API (композиция вместо десятков пропсов).
- Доступность и клавиатурная навигация — один раз в библиотеке, а не в каждом продукте
- Визуальные регрессионные тесты на скриншотах
- Основа — безголовые компоненты (Radix, React Aria) или своё на их основе
А ещё Главный риск — библиотека, которую никто не хочет использовать: решать реальные задачи продуктов и не блокировать их
Подробно
Состав:
- токены → тема (светлая, тёмная) через CSS-переменные;
- базовые компоненты: кнопки, поля, модальные окна, таблицы;
- паттерны: формы, пустые состояния, ошибки;
- иконки, правила текста и анимаций.
Инженерия:
- отдельный пакет, semver, changelog, автоматическая публикация;
- Storybook с примерами и тестами взаимодействия;
- скриншотные тесты, проверки доступности (axe);
- кодмоды для ломающих изменений.
Организация: команда-владелец или общий вклад с ревью; продукты могут временно расширять компонент у себя, а удачные расширения переносятся в библиотеку.
Что хотят услышать
- Токены, компоненты, документация, версии.
- Доступность и тестирование.
- Процесс владения и принятие продуктами.
Проверьте себя
Один верный вариант. Подумайте, потом откройте ответ.
Показать варианты и ответ
- ✗Каждый продукт копирует компоненты к себе и правит как хочет, общего владельца нет
- ✓Токены, доступные компоненты с документацией, версионирование по semver и процесс владения
- ✗Дизайн-система — это только набор макетов в Figma, код у каждой команды свой
- ✗Версии не нужны: все продукты всегда сразу берут самую последнюю сборку библиотеки компонентов
Связанные вопросы
Разбор собеседования с sotto
После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.