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

Что такое дизайн-токен простыми словами

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

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

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

В мире дизайна существует что-то атомарное, когда мы переходим от меньшего к большему. То есть, наш дизайн состоит из атомов — маленьких составных элементов, таких как цвета, кнопки и другое.

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

Как правильно называть дизайн-токены?

Токен должен содержать пять значений:

1. Категория (category) — это может быть цвет (color) или шрифт (font).
2. Тип (type) — текст (text), фон (bg), граница (border).
3. Элемент (item) — к какому элементу относится токен (Input, button, table).
4. Подэлемент (subitem) — тип элемента (Primary / Secondary).
5. Состояние (state) — Hover / Default.

Структура зависит от конкретного элемента и может меняться.

Использование этих пяти значений позволяет систематизировать и легко идентифицировать дизайн-токены в масштабах вашего проекта.

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

Когда и кому использовать дизайн-токены?

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

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

В компании Revend Group команда UX/UI в своих проектах использует либо стили, либо переменные, и в зависимости от сложности или запроса клиента решает, что выбрать. Хотя оба подхода могут давать схожие результаты, переменные оказываются более продвинутой функцией. Таким образом, если вы работаете над дизайн-системой или часто создаете прототипы, переменные могут быть вашим лучшим выбором.

А на практике?

На практике дизайн-токены открывают множество возможностей:

1. Быстро создавать светлые и темные режимы или различные темы.
2. Переменные можно использовать и в прототипах. Для этого в Figma добавили поддержку условий if else (если, то), а также операции сложения, вычитания, деления и умножения. Эта функция может значительно сократить количество отдельных состояний для прототипов, которые нужно воспроизводить. Теперь можно создавать стили не только для цветов, но и для скругления углов модулей, значений их высоты и ширины, отступов внутри Auto Layout, текста внутри кнопок.
3. Используйте переменные как токены для управления дизайн-системами.
4. Определяйте свойства элементов для различных контрольных точек.
5. Создавайте макеты на нескольких языках.

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

Использование типов переменных для цветов

На презентации команда UX/UI делится опытом и экспериментирует с созданием первой переменной для цвета фона кнопки. Цветовые переменные могут эффективно использоваться для настройки заливки или контура объекта в дизайне.

Итак, давайте создадим нашу первую переменную цвета фона этой кнопки.

1. Откройте панель переменных, нажмите «Создать переменную» и выберите «Цвет».
2. Переименуйте переменную в «фиолетовый» и задайте значение #C7B9FF.
3. Создайте еще одну переменную для текста и контура кнопки.

Как применять переменные к объектам

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

Что лучше использовать: переменные или стили?

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

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

Надеемся, что наша презентация заинтересовала вас и помогла лучше понять важность дизайн-токенов в творческом процессе.

Если у вас возникнут дальнейшие вопросы или нужна консультация, не стесняйтесь обращаться к нам.

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

Спасибо за внимание, и до новых встреч!