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

Заметил тотальное непонимание, что такое «дизайн-система» и зачем она нужна. Я не считаю себя гуру дизайн-систем, хоть и повидал некоторое дерьмо. Поэтому практических советов давать не буду, просто попытаюсь объяснить тему на пальцах.

Для начала: дизайн-системой не является UI-библиотека, насколько бы сложной, большой и атомарной она ни была.

Дизайн-система должна соответствовать трем факторам:

1. Системность компонентов — в коде. То есть, компоненты системы вашей дизайнерской библиотеки синхронизированы с библиотекой компонентов фронт-энд разработчиков. Например, если ваша agile-команда хранит компоненты в storybook — значит вы сделали первый шаг в сторону систематизации дизайна.
2. Ваша дизайн-документация содержит не только визуальные компоненты, а и принципы. Семантическая взаимосвязь между частями системы должна быть определена в виде правил поведения этой системы в ответ на прямое или косвенное взаимодействие с ней пользователей.
3. Дизайн-систему можно поддерживать и масштабировать используя принципы разработки компонентов и принципы взаимодействия — не теряя при этом согласованность и взаимосвязь.

Bonus track:
4. Дизайн-система — это не просто способ более быстрого и согласованного создания дизайн-макетов. Это способ коммуникации между всеми участниками жизненного цикла продукта — вплоть до конечного пользователя.

Самое важное — дизайн-система служит для удовлетворения потребностей и достижения целей в долгой перспективе. Большой продукт, длинный жизненный цикл, детализированный роадмап роста и развития проекта на несколько лет вперед — дизайн-система нужна. В остальных случаях — нет.