Токены в дизайн системе

Рассказывает о токенах в дизайн системе Парфёнов Александр, продуктовый дизайнер Центра цифровых решений для корпоративного бизнеса.

О токенах в дизайн системе я узнал из выступления Юры Ветрова в далеком и прекрасном 2019 году на конференции Frontend Conf. «Интересная идея», подумал я тогда, и забыл про них еще на пару лет, переодически читая статьи разных дизайн системах, которы как грибы после дождя начали появляться то в одной крупной компании, то в другой. Применить накопившуюся информацию в реальных проектах не удавалось. Не хватало понимания, для чего это может быть нужно проекту и мне лично, а мотивация заниматься этим на боевых проектах была бесконечно мала.

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

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

«Это оно!», — подумал я и стал искать материалы в старых закладках, которые помогут разобраться в решении подобных задач. И разобравшись, сделал некоторые выводы для себя. Но обо всем по порядку.

Дизайн-токены — это переменные в мире дизайна, условно коробочки куда мы можем положить значения — отступы, цвета, типографика, стили объектов. Положив их в эту коробочку, мы можем на них ссылаться как на стиль объектов, которые мы добавляем на экран. Например, мы определили основной цвет нашего приложение как красный. Отлично, теперь мы создадим токен-коробочку, под этот цвет и назовём её ”color-primary”, и положим туда это значение. И на всех макетах, где будет использоваться наш основной цвет мы будем не прописывать цвет вручную, а ссылаться на нашу коробочку. Теперь представим, что нам нужно изменить оттенок нашего цвета в связи с ребрендингом, вместо траты 100500 человеко-часов для того, чтобы изменить цвет по всем макетам, мы просто заменяем его в коробочке. В коробочки вместо цвета может лежать любой стиль: цвет, скругление, тень или даже такие свойства типографики (размер, толщина, межстрочное, шрифт), как по одному, так и все вместе.

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

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

Вот на что это похоже:

Дизайнер и программист находятся в разных мирах. Но сейчас есть возможность подтолкнуть эти миры друг к другу, сделав над собой усилия. Инструменты для этого уже есть, и осталось договориться как ими пользоваться.

Мы уже говорили что токены это переменные, из которых состоят более крупные модули. И мы можем передать их разработчику в виде готовых данных прямо из Figma.

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

Это обычная конструкция, которая помогает унифицировать ваши токены-переменные.

[Category]-[Type]-[Item]-[SubItem]-[State]

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

Подробно об этом написано в статье Евгения Швецова https://habr.com/ru/company/usetech/blog/673196/ . Она большая, но довольно подробно описывает процесс создания поддержки и интеграции токенов.

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

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

Делается это средствами плагина Design Tokens или Figma Tokens

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

Токены – новый уровень взаимодействия дизайнеров и разработчиков. Это первый адекватный шаг в сторону автоматического преобразования дизайн макетов в код. И он, как и все сложные системы нужен далеко не всем и не везде.

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

Касаемо моей идеи с темной темой, я остановился на создании структурированной библиотеки стилей и коммуникации с разработчиками, без автоматической выгрузки токенов в json и автозамены значений в сборках приложения. А темную тему сделал через дублирование компонентов и добавление новых стилей, это позволит быстро редактировать цвета светлой и темной темы. Остаётся надеяться что других цветовых тем у нас не будет.