Дизайн-системы
Что это такое
Дизайн-система — это общая документированная библиотека компонентов и правил, которая держит продукт согласованным, пока над ним работают несколько человек. В ней есть и код компонентов, и визуальный стандарт, и договорённость о том, кому что можно менять. Видимая половина — библиотека компонентов; трудная — управление и внедрение.
Почему это важно
Согласованность рассыпается в тот момент, когда второй человек рисует экран — кнопки расходятся, отступы расходятся, и уже через год продукт выглядит так, будто его собрали из трёх разных продуктов, а читатель воспринимает это как ненадёжность. Однако система чинит всё в источнике и окупается тогда, когда одни и те же паттерны нужны больше чем в одном месте и больше чем одному человеку. И это единственный способ, которым маленькие команды получают выгоду от переиспользования, а не издержки от повторного решения всего заново.
Что в этом треке
- Когда система окупает себя (03-design-ux/32-design-systems/01-when-a-system-pays-for-itself) — условия, при которых вложение возвращается, и когда этого не происходит.
- API компонента и документация (03-design-ux/32-design-systems/02-component-api-and-documentation) — выбор интерфейса компонента и описание того, для чего он нужен.
- Управление и версионирование (03-design-ux/32-design-systems/03-governance-and-versioning) — кто может менять систему и как изменение доходит до каждого продукта.
- Внедрение внутри команды (03-design-ux/32-design-systems/04-adoption-inside-a-team) — работа о том, чтобы люди ей действительно пользовались; именно здесь большинство систем и терпит крах.
Предварительные требования
- Визуальный дизайн (03-design-ux/10-visual-design)
- UI-компоненты (02-frontend/12-ui-components)
Что читать дальше
- UI-компоненты (02-frontend/12-ui-components) — прочитайте её первым: архитектура компонентов, на которой держится система.
- Дизайн-токены (03-design-ux/41-design-tokens) — слой значений, который позволяет системе менять тему и имена.
- Передача дизайна и спецификации (03-design-ux/42-design-handoff-specs) — как упаковать компоненты системы во что-то, по чему инженер сможет строить.
- Контент-стратегия (03-design-ux/08-content-strategy) — тот же вопрос управления, только про слова, а не про компоненты.