Топ-5 примеров мировых дизайн систем, которые задают стандарты в UI/UX-дизайне

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

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

Откуда берутся открытые примеры дизайн-систем

Дизайн-система — это тщательно продуманная экосистема, где каждая деталь выверена так, чтобы любые члены команды могли использовать её ресурсы без необходимости переделывать что-то заново. В идеале — всё должно работать как единый, согласованный механизм.

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

В последние годы дизайнеры крупных брендов стали делиться не только кодом, но и исходниками в Figma. Теперь можно изучать, как устроены реальные интерфейсные библиотеки, а также быстро адаптировать их компоненты для собственных проектов, что особенно полезно для нативных приложений.

В этой подборке — крупнейшие и самые влиятельные примеры дизайн-систем, которые используют не только внутри компаний, но и за их пределами: Apple, Google, IBM, Microsoft, Atlassian.

Пример №1: дизайн-система Apple

Web, macOS, iOS, iPadOS, watchOS, visionOS, tvOS

Apple Human Interface Guidelines (HIG) — одна из старейших и наиболее проработанных дизайн-систем в мире. Со временем в ней накопился обширный набор правил и примеров, помогающих не только внутренним командам Apple, но и всем разработчикам, создающим приложения для экосистемы компании. Следование этим рекомендациям — не просто хорошая практика, а требование: без соблюдения стандартов HIG приложение не получит одобрение в App Store.

Пример дизайн-системы Apple Human Interface Guidelines.

Что включает в себя HIG?

• Принципы работы с типографикой.
• Системы сеток и лейаутов (включая поддержку языков с написанием справа налево).
• Цветовые схемы, прозрачность и адаптация тёмной темы.
• Гайдлайны по иконкам, SF-символам и оформлению приложений.
• Каталог компонентов.
• UX-паттерны и сценарии взаимодействия.
• Рекомендации по брендингу.
• Стандарты редакторского оформления.
• Доступность, инклюзивность и аспекты конфиденциальности.

Apple разделяет рекомендации не только по платформам macOS, iOS и iPadOS, но и для других устройств: Apple Watch (watchOS), VR-гарнитуры (visionOS), телевизоров (tvOS).

Отличительная черта HIG — широкий охват сценариев взаимодействия. Помимо стандартных методов, таких как курсор и нажатия на экран, дизайн-система описывает управление через жесты, игровую консоль, гироскоп, слежение за глазами, клавиатуру, Apple Pencil и другие способы ввода. Каждая деталь интерфейса — кнопки, формы, меню — имеет подробные спецификации для всех типов устройств.

В отличие от многих дизайн-систем, HIG предлагает широкий выбор загружаемых материалов для дизайнеров. Apple публикует файлы в форматах Sketch, Figma, Adobe XD и Photoshop, хотя их организация оставляет желать лучшего. Тем не менее, макеты гайдлайнов Apple/iOS и UI-kit в Figma регулярно обновляются и считаются одними из самых детализированных среди всех дизайн-систем.

Пример №2: дизайн-система Google

Web, Android, Flutter

Google Material Design — одна из самых распространённых дизайн-систем в мире. Её представили в 2014 году, и с тех пор она стала эталоном в создании цифровых интерфейсов. В 2021 году Google выпустила третью версию системы — Material You (или просто Material Design 3), обновлённую с учётом новых возможностей Android и выхода смартфонов Google Pixel. Эволюцию Material Design можно проследить по архивным версиям на m2.material.io и m1.material.io.

Пример дизайн-системы Google Material 3.

Что включает Material Design 3?

• Основные принципы: доступность, работа с контентом, настройка интерфейсов, дизайн-токены, состояния элементов, жесты, компоновка.
• Визуальный стиль: палитра, глубина, иконография, анимации, формы, типографика.
• Компоненты: все базовые элементы — от кнопок и диалоговых окон до навигационных паттернов.

Material Design не просто описывает правила проектирования интерфейсов, но и обучает дизайнеров UX/UI-логике. В примере дизайн-системы подробно расписаны рекомендации для всех уровней — от базовых принципов построения кнопок до сложных концепций работы с типографическими токенами.

В отличие от других дизайн-систем, Material Design уделяет особое внимание обоснованию выбора тех или иных решений. Например, в её документации можно найти объяснения, сколько вариантов текстовых стилей нужно использовать и какие ошибки допускают при работе с карточками.

Популярность системы подтверждают цифры: её официальный файл для Figma (M3) скачали более 500 000 раз. В библиотеке Google в Figma собраны ключевые инструменты для проектирования:

• Готовые UI-киты для Android и Flutter.

• Обширные наборы адаптивных иконок.

• Системы визуализации динамических цветов и вариативных шрифтов.

Material Design остаётся одной из самых гибких и хорошо документированных систем, на основе которой можно создавать продукты с высоким уровнем визуального и функционального качества.

Пример №3: дизайн-система IBM

Web, React, React Native, Angular, Vue, Svelte, Vanilla

Carbon Design System — это open-source дизайн-система IBM, запущенная в 2017 году. К 2023 году она уже достигла своей одиннадцатой версии, что делает её одной из самых активно развивающихся среди корпоративных решений.

В отличие от Human Interface Guidelines от Apple и Material Design от Google, которые ориентированы в основном на независимых разработчиков и агентства, Carbon создавалась специально для сложных enterprise-систем. В таких продуктах критически важна надёжность, поэтому на официальном сайте есть отдельный раздел Contributing. В нём собраны рекомендации для дизайнеров, разработчиков и тестировщиков, охватывающие документацию, баг-репорты, графику, работу с компонентами и другие технические аспекты.

Ключевые особенности Carbon Design System

Одно из главных отличий этой дизайн-системы — обширные кейсы по её интеграции в разные продукты IBM, например, IBM Cloud и IBM Commerce Platform. Также она включает детальные руководства по визуализации данных и проектированию сложных пользовательских сценариев, включая работу с фильтрами, формами, шапками интерфейсов, состояниями компонентов и прочими аспектами взаимодействия. Это обусловлено спецификой продуктов, построенных на Carbon: в основном это SaaS-сервисы, финтех-решения, бизнес-инструменты и серверное ПО.

Основные разделы системы:

• Доступность и инклюзия.
• Каталог компонентов.
• Грид-системы, лейауты, отступы.
• Цветовые схемы и темы.
• Иконки и пиктограммы.
• Типографика.
• Редакторский гайд.
• Анимация и переходы.

Carbon Design System ориентирована на создание интерфейсов с высокой информационной нагрузкой, поэтому её спецификации глубже проработаны, чем в HIG или Material Design 3. Например, в разделе Grid представлена не только стандартная сетка, но и стратегии построения сложных интерфейсов для больших платформ.

IBM активно поддерживает дизайн-ресурсы в Figma — сейчас там доступна последняя, одиннадцатая версия Carbon. Все модули оформлены с помощью variants, что позволяет мгновенно переключать состояния компонентов и значительно ускоряет процесс проектирования.

Помимо основного UI-кита, в Figma можно найти расширенные наборы: тёмную и серую темы, библиотеки иконок, пиктограмм, цветовых схем и текстовых стилей. А для пользователей Sketch IBM разместила отдельные UI-киты в разделе Kits на официальном сайте.

Пример №4: дизайн-система Microsoft

Web, React, iOS, Windows

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

Основной принцип системы — сохранять простоту там, где это возможно, и не усложнять дизайн без необходимости. Вместо разработки новых элементов с нуля, Fluent предлагает использовать уже готовые, протестированные компоненты, которые адаптированы к различным сценариям.

Ключевые особенности Fluent

В отличие от HIG и Material Design, Microsoft не перегружает документацию длинными описаниями и примерами использования. Каждая страница содержит основную информацию о компоненте, его ключевые характеристики, рекомендации по применению и ограничения по доступности. Дополнительно представлены кодовые спецификации, ссылки на CodeSandbox и Fluent UI, что упрощает процесс разработки.

Основные элементы Fluent:

• Цвета и глубина.
• Иконки и пиктограммы.
• Системы лейаутов.
• Редакторские стандарты.
• Анимации и переходы.
• Формы и закругления (shapes).
• Типографика.
• Каталог компонентов.
• Доступность и инклюзия.
• Дизайн-токены.

Microsoft активно обновляет свои UI-киты в Figma, и на данный момент доступны комплекты для Fluent 2 с обновлёнными библиотеками для веба и iOS. В последних версиях классические цветовые стили и тёмная тема были заменены на Variables, что делает настройку тем более гибкой. Также Microsoft провела рефакторинг файлов, уменьшив их размер почти вдвое, что значительно ускоряет работу с ресурсами.

Fluent продолжает развиваться, оставаясь одной из самых удобных и практичных дизайн-систем для тех, кто проектирует продукты в экосистеме Microsoft.

Пример №5: дизайн-система Atlassian

React, TypeScript

Atlassian Design System (ADS) — это внутренняя дизайн-система компании, разработавшей Jira, Trello и другие продукты. Её создание началось ещё в 2012 году, вскоре после появления Human Interface Guidelines от Apple. Сегодня ADS входит в число самых детализированных дизайн-систем в мире.

Как и IBM с Microsoft, Atlassian сосредоточена на проектировании решений для сложных сервисов, работающих с массивами данных. Эти продукты разрабатываются международными командами, поэтому ADS задаёт строгие правила, позволяющие поддерживать единый визуальный и функциональный стандарт.

Что входит в ADS?

• Готовые интерфейсные компоненты.
• Гайд по брендингу.
• Стандарты редакторского оформления.
• Библиотеки иконок, паттернов и иллюстраций.
• Анимации и переходы.
• Типографическая система.
• Сетки, отступы, макетирование.
• Доступность и UX-гайдлайны.
• Цветовые схемы и тени.

Компоненты ADS адаптированы для построения сложных интерфейсов. В системе можно найти примеры реализации групповых аватаров, динамических таблиц, сложных форм с множеством полей, статусных индикаторов, древовидных таблиц и других элементов, необходимых для управления данными.

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

Кроме того, в бета-версии ADS появился расширенный раздел для фронтенд-разработчиков. В нём подробно рассматриваются работа с примитивами, адаптивные сетки, xCSS, флексы и другие ключевые инструменты.

Atlassian активно поддерживает свои Figma-ресурсы. Весной 2023 года компания полностью обновила стили, переведя их на Variables, что значительно упростило работу с кастомизацией дизайна.