Дизайн-системы, которые правят миром интерфейсов

Ещё лет десять назад дизайн-система была чем-то вроде красивого PDF с логотипом, фирменными цветами и парой правил про отступы. Сегодня это полноценный слой продуктовой архитектуры — наравне с базой данных, API и CI/CD. Она влияет не только на то, как продукт выглядит, но и на то, как быстро он растёт: на скорость разработки, стабильность релизов и стоимость поддержки.

И это не лозунг, а цифры. По разным оценкам, возврат на вложения в дизайн-систему измеряется сотнями процентов: в исследовании Forrester фигурирует цифра до 671%, более консервативные оценки дают 135–170% за пять лет. По сообщениям Atlassian, время разработки новых фич сократилось почти на 65%. А во внутреннем эксперименте Figma дизайнеры с готовой системой решали задачи примерно на 34% быстрее, чем те, кто собирал интерфейс с нуля.

Крупные компании выработали собственные подходы к построению таких систем. Но универсального решения не существует: каждая система — это слепок масштаба, процессов и ограничений конкретной команды. То, что спасает IBM с сотнями продуктов, утопит стартап из пяти человек.

В этой статье я разберу самые влиятельные подходы к организации дизайн-систем, покажу их сильные и слабые стороны на реальных примерах — и объясню, почему мой личный подход, «атомарная матрёшка», находится в одном концептуальном ряду с enterprise-системами вроде Atlassian Design System и IBM Carbon, но при этом заточен под реальную работу в Figma.

Подход, предложенный Брэдом Фростом (книга «Atomic Design» вышла в 2016 году), стал фундаментом для большинства современных систем. Фрост подсмотрел метафору у химии: любая материя состоит из атомов, атомы складываются в молекулы, молекулы — в сложные организмы. Интерфейс устроен так же.

Иерархия из пяти уровней:

Atomic Design гениален как ментальная модель: он даёт команде общий язык и приучает мыслить переиспользуемыми компонентами, а не отдельными экранами. Но в чистом виде он плохо учитывает реальность:

Google представил Material Design в 2014 году как язык, построенный на метафорах реального мира: свет, тень, движение, «материальные» поверхности, которые ведут себя как бумага. В 2018-м появилось Material Theming, а в 2021-м — Material You (Material Design 3), дебютировавший в рекламе Pixel 6 с динамическими палитрами, подстраивающимися под обои пользователя.

Ключевая особенность современного Material — токено-центричный подход. Дизайн-токены описывают цвет, типографику и отступы по назначению, а не по виду: не «синий #2E5BFF», а «цвет основного действия». Одни и те же токены живут и в макетах, и в коде, и в инструментах.

Логика системы:

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

HIG от Apple — один из старейших гайдлайнов в индустрии (первые версии появились ещё в конце 1980-х). Его философия принципиально иная: он строится не вокруг компонентов, а вокруг сценариев и пользовательского опыта. Когда показать модальное окно? Как должна ощущаться анимация? Что уместно на маленьком экране Apple Watch, а что — на огромном дисплее Mac?

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

Atlassian Design System — образцовая платформенная дизайн-система. Она обслуживает не один продукт, а целую экосистему: Jira, Confluence, Trello, Bitbucket и десятки сервисов. Поэтому строится она слоями:

Именно переход на токены позволил Atlassian безболезненно выкатить тёмную тему сразу на все продукты — то, что без единого источника правды превратилось бы в многомесячный ад ручных правок.

Carbon Design System — классический enterprise-подход, открытый и построенный на IBM Design Language. В нём более 50 production-ready компонентов, и каждый жёстко связан с кодом, версионированием и governance-моделью. Хочешь добавить свой компонент в общую библиотеку? Он должен пройти ревью команды governance, соответствовать стандарту доступности WCAG 2.1 AA и следовать соглашениям об именовании.

Это система «на годы вперёд», обеспечивающая консистентность сотен IBM-продуктов. Цена — высочайший порог входа: такой уровень дисциплины оправдан для корпорации, но раздавит небольшую команду бюрократией.

Когда-то в Spotify сосуществовало 22 несвязанных дизайн-системы — каждая команда лепила своё. Итог: визуальный разнобой и дублирование работы. Решение — система Encore, где всё связано через общие токены. Encore разделена на три слоя: фундамент (токены, цвет, типографика, движение), слой стилей компонентов и слой их поведения, причём «безголовые» компоненты строятся на React ARIA. Это позволило сохранить свободу команд, не теряя целостности бренда.

Airbnb пошла против привычки делать отдельные системы для iOS, Android и веба и построила единый язык дизайна (DLS) с одним источником правды для токенов, который транслируется в нативный код каждой платформы. По оценкам, которые приводят в разборах этого кейса, время на передачу макетов в разработку сократилось примерно на 35%, а консистентность интерфейсов выросла около 20%.

Цена входа — это не только деньги, но и время, дисциплина и необходимость выделенной команды сопровождения.

Мой подход не конкурирует с этими системами — он находится в том же концептуальном поле, но решает другую задачу. «Атомарная матрёшка» берёт лучшее из enterprise-мира — слоистость, токены, разделение ответственности — и приземляет это на реальность продуктовой команды, работающей в Figma.

Свою методологию я уже подробно описывал раньше — в статье «Атомарная матрёшка» в масштабе экосистемы: апдейт методологии.

Она стоит в одном ряду с enterprise-подходами, Atlassian Design System и IBM Carbon по строгости архитектурного мышления, но при этом:

Без погружения в детали — пять опор «матрёшки»:

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

«Атомарная матрёшка» — это практичный гибрид лучших индустриальных решений, адаптированный под реальную продуктовую работу в Figma. Она не требует, чтобы вы были IBM, но мыслит так же системно.

Спасибо, что дочитали. Подписывайтесь на мой канал о дизайне привычных вещей «Lorrrem». Там про дизайн, технологии и окружающий нас мир.

Впервые опубликовано на «Дизайнерс»: https://dsgners.ru/denis-zelenykh/47096-dizayn-sistemyi-kotoryie-pravyat-mirom-interfeysov