Дизайн-система T2
Как сократить время на работу с текстами в интерфейсах и оптимизировать внесение правок в макеты?
Когда у подписки, в которую входит много сервисов, регулярно появляются новые скидки, акции и изменения в составе, в работе команды возникает дополнительная нагрузка. Дизайнеры собирают макеты, редакторы обновляют тексты, добавляют новые сервисы и уточняют формулировки. Затем продакт-менеджер приносит свежие вводные, и макеты снова нужно обновлять.
Если править тексты прямо в макетах, это закономерно приводит к большому количеству ручной работы. Поэтому мы в Т2 решили придумать, как автоматизировать этот процесс: в одном месте меняем формулировку — и она автоматически подтягивается во все нужные макеты. Рассказываем, как добавляли текстовые переменные в дизайн-систему и к чему это привело.
Чаще всего тексты интерфейсов хранятся прямо в макетах. При таком подходе есть несколько типичных рисков:
- Дизайнеры могут взять элемент из старого макета и случайно использовать не актуальный вариант текста.
- При большом количестве экранов становится сложно оперативно найти все места, где нужно внести изменения.
- Один и тот же текст может слегка отличаться в разных сценариях — сложнее поддерживать единообразие.
Когда экранов десятки или сотни, поддерживать тексты в актуальном состоянии становится всё труднее. Поэтому мы начали искать способ централизовать работу с ними.
Как решить эти проблемы
Один из эффективных способов — использовать текстовые переменные в дизайн-системе. Вместо того чтобы обновлять текст на каждом экране вручную, можно хранить его в переменной и подключать туда, где он нужен.
Что такое текстовые переменные
Простыми словами, это «контейнеры» для текстов, которые можно использовать в разных местах. Например, одна переменная хранит все варианты заголовка и содержания поп-апа — и для подключения продукта, и для замены.
Почему это удобно
- Все хранится в одном месте: если нужно что-то поменять — меняешь переменную, и обновления сразу появляются во всех нужных дизайнах.
- Изменения вносятся быстро — не нужно последовательно обновлять каждый макет.
- Уменьшается количество ошибок: меньше шансов использовать неактуальный текст.
Как мы создавали файл с текстовыми переменными
Перед тем как этот подход внедрить для всех продуктов, решили проверить – а работает ли это вообще. Эксперимент начали с подписки MiXX. Это сложный продукт, в котором собраны сервисы для жизни – онлайн-кинотеатры, шоппинг, финансы и многое другое. Параметры, от которых зависит текст:
- авторизован пользователь на сайте или нет;
- это абонент Т2 или другого оператора;
- подписку какого наполнения открыл пользователь. У нас есть 3 подписки MiXX – S, M и Max. Они отличаются ценой и набором сервисов.
Параметров много, в моменте нам показалось, что выбрали слишком сложный продукт для тестирования идеи, респект таким ребятам.
В Фигме сделали несколько уровней переменных:
- Набор текстов – храним без всяких настроек: [название переменной]/[содержимое]. Папка недоступна дизайнеру для выбора.
- Авторизованная/Неавторизованная зона – тут уже разделяем все тексты на те, которые должны отображаться для пользователя, когда он вошел на сайт, и на те, когда он не вошел. Папка также недоступна дизайнеру для выбора.
- Абонент/неабонент – так как подписку MiXX может оформить абонент любого оператора. Тексты могут зависеть от того, является ли пользователь абонентом Т2, или другого оператора. Тексты в эту папку наследуются из предыдущей. Папка недоступна дизайнеру для выбора.
- Вариант подписки (S, M, Max) – конечная папка, из которой дизайнер уже и выбирает, какая переменная ему нужна, и куда ее нужно добавить. Здесь переменные так же наследуются из предыдущей папки.
Почему сделали 4 папки, а выбрать можно только из одной?
- Удобнее выбирать – меньше рисков, связанных с человеческим фактором;
- Оптимизировали заведение переменных при заведении переменных: например, если переменная влияет только на один параметр, то в остальных папках нужно задублировать переменную для различных комбинаций.
1. Добавили несколько живых примеров – потестировали, поняли, что все работает.
2. Написали гайд по использования переменных и оформили процесс.
3. Передали на тестирование в «боевых условиях» дизайнеру.
4. Получили обратную связь.
5. На ее основе доработали архитектуру и процесс.
6. Презентовали командам, работающим с такого рода задачами.
А минусы будут?
Да. Казалось бы, минусов нет, одни плюсы. Но у переменных есть особенность – текст нельзя форматировать, например, поставить буллиты, добавить в текст ссылку.
Пришлось сделать небольшой костыль. Сделали вложенный компонент, свойство которого внесли в переменные. Таким образом меняется весь необходимый текстовый контент. Ниже расскажу, как собрать такой компонент.
Как на компоненте поддержать смену варианта на переменных?
Создаем компонент, с необходимым количеством вариантов. В нашем случае – три варианта, по количеству типов подписки. Текст в компоненте форматируем так, как нам необходимо.Варианты именуем в соответствии с типом подписки. ВАЖНО. Компонент лучше сделать скрытым к публикации в библиотеке. Так как в дальнейшем, мы создадим еще один компонент на основе этого.
Создаем текстовую переменную, где в полях ввода указываем тоже значение, которое указывали для вариантов компонента.
Копируем один из вариантов Получившегося компонента. Оборачиваем получившийся инстанс в компонент и в поле выбора варианта применяем созданную переменную.
Итоговый результат
С чем можно столкнуться:
- большой объем работы на старте – нужно найти все нужные тексты и внести их в дизайн-систему;
- дизайнерам понадобится онбординг, чтобы освоить новый подход;
- для успешной работы придется скорректировать текущие процессы и коммуникацию внутри команды.
Как поддерживать новый процесс:
- вести лог изменений по текстам, чтобы команда всегда видела, что обновилось;
- делать короткие дайджесты с апдейтами для тех, кто работает с интерфейсами;
- проводить воркшопы или митапы для получения обратной связи.
Вывод
Тексты в переменных оказались хорошим инструментом не только потому, что редактору удобно. Это еще помогает сократить time to market, круги правок, ошибки и оптимизировать рутину. В итоге выигрывают все.
«Классный инструмент! Помогает быстро переключаться по типам подписки. Теперь не придется переживать, что где-то забыла внести правки по текстам».
На старте пришлось потратить достаточно времени, чтобы внести все тексты и учесть все вариации, зато в перспективе это сэкономит десятки часов работы.