Подробный разбор переменных Figma Variables

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

Если в проекте необходимо заменить значение этой переменной, то это можно сделать в одном месте, легко обновив значение во всём проекте.

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

Что такое переменная

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

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

Переменные могут иметь пять семантических стилей написания:

• camelCase — каждое слово начинается с заглавной буквы, кроме первого;
• PascalCase — каждое слово начинается с заглавной буквы;
• snake_case — вместо пробела ставится нижнее подчеркивание;
• kebab-case — вместо пробела ставится тире;
• flatcase — все буквы находятся в нижнем регистре и без пробелов.

$variablesName: #FFFFFF; // camelCase
$VariablesName: #FFFFFF; // PascalCase
$variables_name: #FFFFFF; // snake_case
$variables-name: #FFFFFF; // kebab-case
$variablesname: #FFFFFF; // flatcase

Каждый из стилей является правильным. Выбор зависит от языка программирования и контекста использования. Но для переменных в Figma подойдёт любой стиль, который будет удобен и читаем для вас.

На этом с основной теорией всё.

Переменные в Figma

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

Что можно сохранить в переменную:

• цвет;
• число;
• строку (текст);
• булевую операцию (да или нет).

Каждое из этих значений можно привязать к заливкам, границам, размерам фрейма, размерам сетки, шрифтам, вариантам компонентов и даже прототипам.

Базовые знания о Figma Variables

Создание переменной

Переменные находятся в правой панели инструментов, когда на основном канвасе не выбран никакой объект. Этот раздел называется «Local variables».

При открытии мы видим пустое окно с предложением создать переменную: цвет, число, строку или булевую операцию (да/нет).

Коллекции

Переменные можно разделить на логические группы, которые называются «Collections». Таким способом можно разделить, например, цветовую палитру и числовые значения.

В контекстном меню можно создать коллекцию или переименовать текущую.

Наименование переменных

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

Такой подход используется в Figma давно: в наименовании слоёв, компонентов и стилей.

Переопределение переменных

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

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

Чтобы создать второй набор переменных, достаточно нажать на «Плюс» справа в верхнем ряду.

Наследование или алиасы

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

Настройка переменной

У каждой переменной есть настройки. Некоторые из них повторяют то, что видно на самой панели: название и значение. Дополнительно можно добавить описание переменной, показать синтаксис кода для web, iOS и Android, а также выбрать место, к которому можно применить данную переменную.

На вкладке Scope можно выбрать всё или включить/выключить определённое место. Например, цветовую переменную можно использовать только для границ.

Визуальные метки

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

Публикация библиотеки

Как со стилями и компонентами, переменные также можно опубликовать в командной библиотеке. Чтобы запретить публикацию, в настройках переменной включите чекбокс «Hide from publishing».

Использование

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

Давайте разбираться на примерах.

Пример. Цветовая переменная (color)

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

Подготовка

Создадим две группы переменных: для светлой и тёмной темы.

На примере ниже представлена собранная палитра по семантике. Каждая переменная обозначает, к чему она будет привязана, и для обеих тем задан свой цвет.

Каждому элементу назначаем соответствующую переменную.

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

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

Результат

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

Пример. Числовая переменная (number)

Числовая переменная может быть привязана к различным параметрам, где необходимо изменить число: отступы в Auto Layout, межколонные расстояния в Layout Grid, размеры шрифтов и даже ширину макетов, чтобы в пару кликов создавать адаптивные макеты.

Подготовка

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

Создадим 4 режима: Desktop, Laptop, Tablet, Mobile — и несколько переменных:

• width / breakpoint — размер фрейма, в который будет вписываться макет;
• grid / columnNum — количество колонок в сетке;
• grid / columnGap — расстояние между колонками;
• grid / columnMargin — отступы по краям макета.

Привязка переменных

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

Результат

Теперь при переключении набора переменных изменяется ширина фрейма и размеры сетки.

Дополнительно можно посмотреть, как работает переключение размерных сеток, на видео.

Пример. Текстовая переменная (string)

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

Подготовка

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

Создадим 4 языка: русский, английский, сербский и китайский — и несколько переменных:

• onBoarding / title — текст заголовка;
• onBoarding / subtitle — текст подзаголовка;
• onBoarding / button — текст кнопки.

Привязка переменных

Теперь на каждом макете привязываем текстовое поле к соответствующей переменной. Привязка переменных происходит на правой панели инструментов в разделе «Text».

Результат

Далее, простым способом переключаем режимы переменных для макетов (или отдельных секций/страниц) и получаем переведённую версию макета с автоматически обновлёнными значениями переменных.

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

Пример. Булевая переменная (boolean)

Булевая переменная — это логический тип данных, который хранит значения true (истина) или false (ложь). Её можно использовать в связке с компонентом, где требуется управлять отображением или скрытием его элементов.

Создание переменной

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

Пример компонента с булевой переменной (в интерфейсе Figma это выглядит как переключатель true / false):

Создадим переменную типа Boolean. Настроим два набора значений:

• Полный вид (изображение и описание отображаются).
• Короткий вид (элементы скрыты).

Привязка переменной

Привязка переменной выполняется не к мастер-компоненту, а к его экземпляру (instance).

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

Результат

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

Результат в действии можно увидеть на видео.

Заключение

Переменные в Figma — это несложно. А главное — полезно.

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

Переменные:

• экономят время;
• убирают дубли;
• делают макеты гибкими и масштабируемыми.

Начать можно с малого: заведите цветовые переменные или числа для адаптивов. Со временем переменные станут вашей опорой в построении системного и удобного дизайна.