
Раз и навсегда разбираемся с функционалом переменных Figma Variables. Изучаем базу и применяем на практике
Переменные — это условные контейнеры, которые содержат в себе значение, которое можно переиспользовать множество раз.
Если в проекте необходимо заменить значение этой переменной, то это можно сделать в одном месте, легко обновив значение во всём проекте.
Кроме того, переменные можно переопределять. Такая возможность есть и в Figma, но прежде чем мы погрузимся в инструмент, давайте немного углубимся в теорию.
Переменные широко используются в разработке. Конструкция переменной всегда имеет вид ключ: значение.
Под ключом подразумевается название переменной, а в значении указываются данные, которые она должна хранить. Всё просто.
Переменные могут иметь пять семантических стилей написания:
$variablesName: #FFFFFF; // camelCase
$VariablesName: #FFFFFF; // PascalCase
$variables_name: Каждый из стилей является правильным. Выбор зависит от языка программирования и контекста использования. Но для переменных в Figma подойдёт любой стиль, который будет удобен и читаем для вас.
На этом с основной теорией всё.
Figma предлагает удобный инструмент, который помогает поддерживать макеты в порядке, переопределять стили и артефакты, а также переключать их в зависимости от условий.
Что можно сохранить в переменную:
Каждое из этих значений можно привязать к заливкам, границам, размерам фрейма, размерам сетки, шрифтам, вариантам компонентов и даже прототипам.
Переменные находятся в правой панели инструментов, когда на основном канвасе не выбран никакой объект. Этот раздел называется «Local variables».
При открытии мы видим пустое окно с предложением создать переменную: цвет, число, строку или булевую операцию (да/нет).

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

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

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

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

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

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

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

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

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

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

Теперь, в зависимости от условий, макет, который попадает в настроенную секцию или на страницу, перекрашивается простым движением. Результат можно посмотреть на видео.
Числовая переменная может быть привязана к различным параметрам, где необходимо изменить число: отступы в Auto Layout, межколонные расстояния в Layout Grid, размеры шрифтов и даже ширину макетов, чтобы в пару кликов создавать адаптивные макеты.
Соберём коллекцию с размерной сеткой адаптивов и несколькими размерами сетки. Воспользуемся тем же подходом с несколькими режимами, которые будут переопределять переменные.
Создадим 4 режима: Desktop, Laptop, Tablet, Mobile — и несколько переменных:

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

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

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

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

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

Такие наборы переменных удобно использовать в мультиязычных приложениях и сайтах. Кроме того, их можно применять для подмены знаков валют в макетах.
Булевая переменная — это логический тип данных, который хранит значения true (истина) или false (ложь). Её можно использовать в связке с компонентом, где требуется управлять отображением или скрытием его элементов.
Допустим, у нас есть компонент карточки записи с изображением и описанием. Эти элементы могут скрываться в зависимости от контекста использования компонента.
Пример компонента с булевой переменной (в интерфейсе Figma это выглядит как переключатель true / false):

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

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

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

Результат в действии можно увидеть на видео.
Переменные в Figma — это несложно. А главное — полезно.
С ними легче поддерживать порядок в проекте, переиспользовать значения и быстрее вносить правки. Один раз настроили — и переключаетесь между светлой и тёмной темой, языками или вариантами компонентов в пару кликов.
Переменные:
Начать можно с малого: заведите цветовые переменные или числа для адаптивов. Со временем переменные станут вашей опорой в построении системного и удобного дизайна.