У дизайн-систем испорченная репутация. Их связывают с корпоративными махинами вроде Material Design, Carbon или Polaris, и стартапы решают, что сначала надо «дорасти». Логика перевёрнута: чем раньше начать, тем больше времени и денег сэкономлено.
Что входит в систему стартапа?
Дизайн-система стартапа — это не 200 компонентов и гайдлайн на 50 страниц. Это 10–15 компонентов, закрывающих 90% интерфейса, собранных за день и описанных за час. Кнопка, поле ввода, карточка, модальное окно, бейдж, аватар, таблица, выпадающий список, тост, скелетон. Всё остальное собирается из этих примитивов.
Почему начинать с токенов?
Начинайте с токенов, а не с компонентов. Токены — атомарные значения системы: цвета (максимум 5–7: основной, вторичный, успех, предупреждение, ошибка, нейтральный), отступы (базовая единица 4 пикселя: 4, 8, 12, 16, 24, 32, 48, 64), типографика (не больше двух шрифтов, пять размеров) и радиусы скругления (два значения). Опишите их CSS-переменными, и компоненты будут согласованы автоматически.
Каким должен быть API компонента?
API компонента должен быть узким. Кнопке нужны: вариант (основная, вторичная, призрачная), размер, состояние отключено, состояние загрузки и слот под иконку. Пять параметров. Если появляется шестой, скорее всего, вы создаёте другой компонент. Сопротивляйтесь желанию сделать компонент «гибким»: ценность дизайн-системы именно в ограничениях.
Где хранить источник истины?
Собирайте в коде, а не в Figma. Для стартапа источник истины — реализованные компоненты, а не макеты. Используйте Storybook или простую страницу /components, где каждый компонент показан со своими вариантами. Дизайнеры смотрят на живые компоненты, и разрыв между макетом и кодом, мучающий крупные компании, просто не возникает.
Почему согласованность важнее красоты?
Согласованность важнее красоты. Средний дизайн, применённый последовательно, выглядит профессиональнее, чем прекрасный дизайн, применённый как попало. У пользователя складывается модель того, как продукт работает. Когда кнопка выглядит по-разному на каждой странице, доверие падает. Когда любое действие подчиняется одному правилу, продукт ощущается надёжным.
Когда систему пора расширять?
Сигналы к расширению системы заметны: разработчики начинают копировать код компонента вместо импорта, дизайнеры рисуют «особые» версии существующих элементов, новая функция требует больше двух новых компонентов, а ввод нового разработчика занимает больше недели. Значит, системе пора расти.
Что это даёт через полгода?
Накопительный эффект заметен. Через полгода с дизайн-системой мы обычно видим: разработку интерфейса быстрее на 40% (не нужно изобретать заново), на 60% меньше расхождений в дизайне, CSS-бандл меньше на 30% за счёт общих стилей и практически мгновенный ввод новых разработчиков. Для стартапа, который жжёт деньги, такая экономия имеет значение для выживания.