Без дизайн-системы каждый дизайнер и разработчик самостоятельно принимает небольшие решения: немного другой синий цвет, новый стиль кнопок, другое значение интервала. Через год у продукта появились десятки практически дубликатов. Система дизайна заменяет эти повторяющиеся решения общими.
Большинство систем дизайна имеют три уровня. Токены дизайна — это именованные значения, такие как color.primary, space.4 или motion.duration.short, в которых хранятся необработанные решения. Компоненты, такие как кнопки, поля ввода, карточки и диалоговые окна, создаются из этих токенов и включают в себя все состояния. Рекомендации документируют, как использовать каждый компонент, как писать метки и сообщения и какие правила доступности применяются.
Система дизайна существует в двух местах: в инструменте проектирования (как библиотека компонентов) и в коде (как пакет, устанавливаемый разработчиками). Самое сложное — синхронизировать эти два процесса. Когда закодированная кнопка перестает соответствовать спроектированной, люди перестают доверять системе.
Движение тоже принадлежит системе. Длительность, кривые замедления и настройки пружин могут быть токенами, а интерактивным компонентам необходимо определенное поведение для наведения, нажатия, загрузки и переходов. Создаваемый нами ExodeUI сохраняет это поведение в одном открытом файле с состояниями и физикой пружин, поэтому один и тот же компонент используется в React, Vue, SwiftUI, Flutter и других фреймворках.
Хорошо известные общедоступные примеры включают Material Design от Google, Human Interface Guidelines от Apple, Carbon от IBM и Polaris от Shopify. Их чтение — хороший способ увидеть, как организована зрелая система.