Универсальная дизайн-система

Универсальная дизайн-система, или Universal Design System — это набор компонентов для Figma и веба, из которого можно собрать интерфейс любой сложности: от формы подписки до терминала фондовой биржи. Она выросла из книги «Путеводитель по кнопкам» и стала ее практическим продолжением.

Типы, стили и состояния

Главное правило UDS — никогда не смешивать три независимых измерения компонента. Тип отвечает за смысл действия, стиль определяет визуальное оформление, состояние показывает происходящее с компонентом прямо сейчас.

Благодаря этому подходу, который часто нарушается в дизайн-системах, любая комбинация оказывается осмысленной. Чтобы представить комбинации в удобной и компактной форме, UDS использует таблицы, или матрицы, в которых стили и размеры подписаны по горизонтали, а типы и состояния — по вертикали.

Компоненты в UDS строятся на основе универсального набора типов, стилей и состояний. Благодаря этому матрицы компонентов выглядят одинаково или почти одинаково. Кроме того, в UDS есть варианты компонентов, которых часто не хватает в других дизайн-системах, хотя они встречаются в современных интерфейсах. Например, чекбоксы и радиокнопки с обводкой или текстовые поля с заливкой.

Размеры

Большинство компонентов существует в трех размерах: маленьком, среднем и большом, которые определены по высоте как 28, 36 и 44 пикселя — наиболее популярное решение.

Размеры компонентов согласованы между собой: кнопка, поле ввода и переключатель одного размера стоят в одной строке без подгонки отступов. Это отличает систему, например, от Google Material Design, в которой поля ввода имеют большую высоту, чем кнопки.

Универсальная дизайн-система использует принцип оптической компенсации: например, отсутствие иконки внутри кнопки увеличивает отступ, чтобы уравновесить тяжелую надпись.

Цвета и токены

Универсальная дизайн-система построена на токенах для цветов и размеров всех компонентов. Палитра цветов определена для синих, серых и красных оттенков.

Цветовые токены организованы в три уровня: палитра хранит значения, семантика описывает назначение и состояние, а токены компонентов задают конкретное применение. Например, фон кнопки ссылается на семантический синий, который связан с оттенком Blue/600.

Размерные токены устроены проще: имя объединяет свойство и размер, например Height/Medium. Общие значения помогают согласовать высоту, скругления и внутренние отступы разных компонентов. Цвета управляются через иерархию ссылок, размеры — через общую шкалу; вместе они делают систему последовательной.

Дизайн-система поддерживает темную тему. Палитра цветов определена отдельно для светлого и темного оформления, компоненты переключаются в выбранный режим автоматически.

Иконки

Универсальная дизайн-система поставляется с иконками Lucide, которые распространяются бесплатно для любых целей, включая коммерческие. Все иконки выполнены в векторном формате и позволяют регулировать толщину линий напрямую из Figma. Всего в коллекции около 1500 иконок.

Мобильная версия

UDS поддерживает как настольные, так и мобильные интерфейсы. Каждый компонент выполнен в более крупном размере для телефонов. Также в дизайн-систему включены компоненты, поддерживающие управление жестами, такие как мобильные списки.

Шаблоны для форм

В дизайн-систему включен набор компонентов для верстки форм. Поля формы используют горизонтальную разметку как наиболее экономно расходующую экранное пространство. Аналогичный подход используется в интерфейсах Apple, Microsoft и многих крупных производителей.

Веб-компоненты

Универсальная дизайн-система реализована на технологии Web Components и доступна в репозитории на GitHub. Код системы написан без использования искусственного интеллекта, компактный и легко читаемый. Архитектура системы позволяет перезаписывать свойства при помощи селектора ::part, менять цвета, размеры, использовать свои иконки и шрифты.

Бесплатно для всех

Дизайн-система распространяется по лицензии CC BY, а ее код — по лицензии MIT. Это значит, что вы можете использовать UDS бесплатно в любых целях, включая коммерческие.