Если в разработке продукта участвует более чем одна команда разработчиков (актуально для банковских приложений, крупных интернет-магазинов, приложений такси, доставки), возникает необходимость в унификации общих элементов и процессов для дальнейшего переиспользования.

Дизайн-система – это общедоступное хранилище артефактов и стандартов их использования, созданное с целью оптимизации дизайн-процесса.

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

На старте хранилище может представлять собой один файл, лежащий в облаке и доступный всем участникам, а затем превратиться в специфичную библиотеку, организованную при помощи инструментов Figma Community или UXPin Design System Tool.

На следующем этапе развития в библиотеку, помимо руководства по оформлению, входят образцы кода и компоненты для разработчиков, для этого часто используются инструменты типа Storybook. Через некоторое время дизайн-система может стать публичной, доступной для внешних подрядчиков по дизайну и разработке, а также для участников хакатонов.[60]

Очень часто дизайн-системы начинаются с общего файла UI kit с набором элементов интерфейса и разрастаются, встраиваясь в продукт на всех этапах производства, от первичного проектирования до разработки текущего оформления и управления им.

Одна из ранних версий UI kit, который использовали несколько команд для нескольких продуктов «Ак Барс Банка»

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

Веб-дизайнер Брэд Фрост популяризировал аналогию эволюционного усложнения – подход Atomic Design{7} для организации дизайн-процесса

Так атом «кнопка» может объединиться с атомом «поле ввода», чтобы стать элементом «поисковая строка».

Атомы и составленная из них молекула дизайн-системы

С древнегреческого «атом» означает «неделимый», но современные ученые опровергли представления древних греков о мире, «раздробив» атом на элементарные частицы.

Так и создатели дизайн-систем пришли к выводу, что необходимо выделить составляющие элементов интерфейса – дизайн-токены (Design Tokens).

Кнопка, кажущаяся в примере выше «неделимым атомом», может быть разложена на составные части, определяющие ее стиль, такие как отступы между краями и текстом, цвет, внешние отступы, размер шрифта и т. д.

Дизайн-токены компании Salesforce – базовые элементы дизайн-системы

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

Подробнее о дизайн-системах можно узнать в интеграторе Adele{8} от UX-Pin – это самое большое собрание дизайн-систем.

Существует множество дизайн-систем, и их состав элементов может значительно варьироваться. Ниже перечислим основополагающие элементы.