Дизайн-системы: что это, где применяется и как освоить

Частое заблуждение — считать дизайн-системой UI-kit в Figma. Набор кнопок в файле дизайнера ничего не гарантирует: если в коде у кнопки другой радиус и свой оттенок синего, через полгода у продукта две разные кнопки. Система начинается там, где у каждого решения есть одно имя и один источник, из которого его берут и дизайнер, и разработчик.

Из чего она состоит

Нижний слой — токены. Токен — это именованное значение: не «#1F6FEB», а color.action.primary; не «16 пикселей», а space.4. Базовые токены описывают палитру и шкалы (blue.600), семантические — назначение (цвет основного действия, фон ошибки). Компоненты ссылаются только на семантические токены. Тогда тёмная тема или ребрендинг сводятся к замене значений.

У токенов есть общий формат обмена. 28 октября 2025 года группа сообщества W3C Design Tokens Community Group выпустила первую стабильную версию спецификации — Design Tokens Format Module 2025.10. Это отчёт группы сообщества, а не официальная рекомендация W3C, но в объявлении о выпуске среди инструментов, которые поддерживают или внедряют формат, названы Figma, Penpot, Sketch, Tokens Studio и Style Dictionary. Файл принято называть с расширением .tokens.json, служебные свойства начинаются со знака доллара ($value, $type, $description), а ссылка на другой токен записывается в фигурных скобках: {color.blue.600}.

Из спецификации следуют две детали, на которых спотыкаются при переносе старых файлов. Первая: имя токена или группы не может начинаться с $ и содержать точку или фигурные скобки, потому что точка разделяет путь в ссылке. Привычная шкала отступов с ключом «1.5» по формату недопустима, её придётся переименовать. Вторая: по модулю о цвете значение цвета — не строка «#ff00ff», а объект с цветовым пространством и компонентами; шестнадцатеричная запись идёт в нём необязательным полем hex, как запасной вариант. Среди 14 пространств есть oklch и display-p3. Если плагин выгружает цвета строками, это старый черновой формат, и конвертер под версию 2025.10 может его не принять. Темы описывает модуль Resolver: наборы токенов применяются по порядку, и более поздний, например «тёмная тема», переопределяет предыдущий.

Следующий слой — компоненты. В Figma у кнопки есть свойства: вариант (основная, второстепенная, опасное действие), размер, иконка слева, а также состояния — обычное, наведение, нажатие, фокус, неактивное, загрузка. В коде у того же компонента свойства с теми же названиями. Если в макете вариант зовётся Primary, а в коде kind="main", передача макетов превращается в перевод.

Третий слой — документация: когда использовать компонент, как он ведёт себя при длинном тексте и с клавиатуры. Четвёртый — версии. Изменение, которое ломает чужие экраны (переименовали свойство, убрали вариант), выходит мажорной версией с инструкцией по переходу.

Кому и зачем этот навык

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

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

Продакту навык нужен для решений: сколько времени заложить на систему, кто её поддерживает, что делать, когда команде срочно нужен компонент, которого ещё нет.

Своя система или готовая

Готовая система закрывает большинство задач внутреннего сервиса или продукта небольшой команды. Material Design даёт подробные правила и компоненты для Android и веба, Ant Design — насыщенный набор для сложных таблиц и форм. Gravity UI, открытая система Яндекса, распространяется по лицензии MIT: в базовом пакете больше 70 React-компонентов, светлая, тёмная и контрастная темы, витрина в Storybook и библиотека в Figma Community. MIT разрешает коммерческое использование при сохранении уведомления об авторских правах.

Своя система оправдана, когда у компании несколько продуктов или платформ, заметный бренд и несколько команд, которые иначе разойдутся в решениях. Частый промежуточный путь — взять готовую библиотеку и переопределить токены под бренд. Цена своей системы — постоянная работа: принимать запросы, выпускать версии, удалять устаревшее.

Учебный пример: тёмная тема для формы входа

Учебная задача: в сервисе есть форма входа из поля, кнопки и ссылки. Цвета заданы напрямую и в макете, и в коде, причём разные. Нужно добавить тёмную тему.

Сначала выписываете значения и находите расхождения: в макете у рамки поля #D0D7DE, в коде #CCCCCC. Затем заводите базовые токены (gray.300, blue.600) и семантические (border.default, action.primary, text.secondary). В Figma создаёте коллекцию переменных с двумя режимами, светлым и тёмным, и привязываете к ним свойства компонентов. Поле ввода получает состояния: обычное, фокус, ошибка, неактивное; для ошибки нужен текст подсказки, а не только красная рамка. Токены экспортируются в JSON и превращаются в CSS-переменные, а в Storybook появляется поле ввода во всех состояниях и обеих темах.

Результат проверяют тремя вопросами. Остался ли в компонентах хоть один цвет, заданный напрямую? Совпадают ли названия свойств в Figma и в коде? Хватает ли контраста текста в тёмной теме?

С чего начать и в каком порядке осваивать

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

1. Разберите чужую систему: откройте документацию Material или Gravity UI и посмотрите, как описаны кнопка и поле ввода — варианты, состояния, правила применения.
2. Освойте в Figma компоненты, свойства компонентов, Auto Layout и переменные с режимами. Этого хватит, чтобы собрать учебный UI-kit из пяти–семи компонентов.
3. Заведите токены в два уровня и выгрузите их в JSON, а затем в CSS-переменные.
4. Напишите страницу документации для одного компонента: назначение, варианты, состояния, ошибки применения.
5. Разработчику — соберите тот же набор компонентов в коде и витрину в Storybook; дизайнеру — хотя бы откройте её и сравните с макетом.
6. Выпустите вторую версию с одним ломающим изменением и опишите, как на неё перейти.

Новичку в интерфейсах удобнее изучать дизайн-систему внутри профессиональной программы: так, на курсе ProductStar «Профессия: UX/UI-дизайнер» дизайн-системе отведён блок из семи тем, от колористики и модульных сеток до библиотек компонентов, передачи в разработку и версионирования. Обучение самостоятельное, с вебинарами и домашними работами, срок — от 8 до 12,5 месяца по тарифу.

Упражнения и типичные ошибки

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

Новички чаще ошибаются в трёх местах. Называют токены по внешнему виду (blue-button) вместо назначения, и при ребрендинге синяя кнопка становится зелёной, сохранив имя. Делают компонент с десятками переключателей, которым никто не может пользоваться. Забывают про состояния: фокус с клавиатуры, загрузку, пустой список, слишком длинный текст. Проверка: попросите коллегу собрать экран только из вашей библиотеки и запишите, где ему пришлось что-то «дорисовать».

Как навык влияет на доход

Отдельной строки «за дизайн-систему» в зарплатной статистике нет: навык входит в требования к дизайнерам интерфейсов, фронтенд-разработчикам и дизайн-лидам. Общий фон задаёт исследование «Хабр Карьеры» за первое полугодие 2026 года: по 45 226 зарплатам, которые специалисты анонимно указали в калькуляторе сервиса по всей России, зарплаты дизайнеров выросли на 3 % ко второму полугодию 2025-го, медленнее, чем в IT в целом (+4 %). Это фактические зарплаты со слов специалистов, а не вакансии, и надбавку за навык они не показывают.

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

Как выбрать обучение

Смотрите не на название программы, а на то, что вы сделаете руками: заведёте ли токены и режимы, соберёте ли компоненты со всеми состояниями, напишете ли документацию, увидите ли библиотеку в коде. Если в программе нет разговора с разработкой, она учит рисовать UI-kit, а не вести систему.

Тем, у кого уже есть рабочий продукт и опыт в дизайне, подойдёт онлайн-курс Bang Bang Education «Дизайн-системы»: 13 недель, 26 вебинаров и 12 заданий, три модуля — от разбора продукта, дорожной карты и дизайн-токенов до документирования, чек-листов для разработчиков и бизнес-метрик. В обзоре сказано, что новичкам программа не подходит; выпускной проект защищают перед руководителями дизайна и разработки.

Разработчику полезнее заходить со стороны кода: токены становятся CSS-переменными, варианты — свойствами компонента, и без уверенной вёрстки и фреймворка это остаётся теорией.

С этой стороны можно посмотреть на онлайн-курс Skillbox «Фронтенд-разработчик + ИИ»: девять месяцев, перенос макета из Figma в код, JavaScript, TypeScript и выбор между React и Vue, до 17 проектов в портфолио. Отдельного модуля о дизайн-системах и Storybook в опубликованном описании нет, поэтому эту часть придётся добирать самостоятельно или уточнять у школы.

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

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