Блог > Дизайн-система для UX-редактора: практические рекомендации

Дизайн-система для UX-редактора: практические рекомендации

18 ноября 2025

Мы уже не раз проводили выпуски UX-Марафона, посвящённые тексту в интерфейсе и тем, кто с ним работает. Но тема не теряет актуальности, поэтому уже 20 декабря мы снова вернёмся к ней на UX-Марафоне #41 | Стать или остаться UX-редактором в 2026. А чтобы вы смогли заранее погрузиться в контекст, мы решили подготовить цикл публикаций по докладам предыдущих онлайн-конференций для редакторов интерфейсов.

Анна Акулова, старший UX-редактор, отвечает за тексты в финансовых сервисах Avito. На UX-Марафоне Текст в интерфейсе: профи уровень она рассказала, как её команда создавала собственную дизайн-систему внутри продукта для управления контентом.

Что такое дизайн-система

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

UI-кит – визуальный язык продукта (цвета, шрифты, иконки, кнопки, буллиты, изображения и другие элементы видимой части интерфейса)
Гайдлайны – набор инструкций, шаблонов и правил использования элементов, которые упорядочивают процесс работы
Фреймворки – библиотека кода, которая написана под каждый из элементов интерфейса, а также плагины для анимации, теги и метки для навигации

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

Однако, если в компании есть несколько платёжных сценариев, то легко заметить, что, во-первых, все они очень похожи и имеют общую структуру, а, во-вторых, примерно 90% их дизайна так или иначе составляет текст. Так почему бы не попробовать работать с этими текстовыми элементами так же, как с компонентами дизайна: собрать в одном месте готовые «детальки» текстового конструктора, чтобы использовать их в нужный момент?

От дизайн-системы к контент-дизайн системе

Обычная дизайн-система, которую создают для всей компании, не подходит для системной работы с текстом, ведь в этом случае она потеряет свою универсальность. Поэтому в финтех-команде Авито сделали доменную продуктовую дизайн-систему, по сути – контент-дизайн систему. С одной стороны, к ней подключены все библиотеки из общей дизайн-системы Авито, так что она наследует визуальный язык всей компании. Но при этом в собственной контент-дизайн системе хранятся только те компоненты, которые реально используются в работе команды. Это позволяет фокусироваться не только на визуальной стороне интерфейсов, но и на смысловой.

Изначально для работы с библиотеками в Фигме была создана отдельная папка с тремя файлами, по числу продуктов: кошелёк, кредиты и платёжные формы. Постепенно количество библиотек росло – для сквозных процессов, таких как двухфакторная идентификация, присутствующая во всех трёх продуктах, были выделены собственные файлы.

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

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

Чтобы получить этот блок, были созданы вариации для каждого из его внутренних элементов, а затем их наполнили нужным контентом. Далее были собраны варианты всего блока в зависимости от ситуации использования. Теперь, добавляя этот блок в макет, нужно лишь указать тип (C2C или B2B), контекст (на какой странице используется блок), а также кредит это или рассрочка. Подходящая версия блока автоматически подтянется из библиотеки, так что дизайнеру не придётся ломать голову, какой контент необходимо выбрать в каждом конкретном случае.

Одна структура - бесконечные конфигурации

Шаблонизировать таким образом можно не только отдельные элементы, но и целые страницы – например, страницу оплаты. При сборке типового сценария, включающего в себя платёжную страницу, в макет добавляется шаблон, выбирается тип шаблона в зависимости от операции (оплата, получение возврата и т.д.), а затем настраиваются детали.

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

Документация

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

Как правило, каждый экран описываем по такой структуре:

Что это за экран, что на нём происходит, зачем он нужен
При каких условиях он появляется
Из каких частей состоит (структура)
Действия на этом экране: что произойдёт при нажатии на кнопку, крестик, ссылку и т.д.

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

Что даёт контент-дизайн система

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

Бесшовный опыт пользователя за счёт похожих конструкций. Например, если человек хотя бы раз оплатил товар на Авито через платёжную форму, он быстрее разберётся, как вывести деньги из кошелька, потому что уже будет представлять как здесь всё работает.
Актуальность. Тексты пишутся в библиотеке и все изменения сразу отображаются во всех макетах
Общая база, благодаря которой любая команда легко может встроиться во флоу.

***

В формат одной статьи сложно уместить всю полезную информацию, прозвучавшую в докладе. Если вам интересно узнать больше о дизайн-системе, разобраться, для каких задач она незаменима, а когда без неё можно обойтись, а также понять как UX-редактору ничего не сломать при работе с библиотеками – предлагаем вам посмотреть доклад Анны Акуловой Интеграция UX-редактора с дизайн-системой: практические рекомендации и советы полностью на нашей платформе UX-Марафон.

А если вы работаете или собираетесь работать с текстами для интерфейса – запланируйте на 20 декабря участие в UX-Марафоне Стать или остаться UX-редактором в 2026, чтобы прокачаться в профессии вместе с экспертами-практиками.

Теги: #Текст в интерфейсе