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

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

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

После этого перемещаем наши кнопки-компоненты в попап, получая простую структуру.

Снимаем выделение со всех элементов и находим в правой панели раздел Local variables, где нажимаем на иконку настроек.

Замечаем, что раздел пуст, и выбираем + Create variable.

Перед нами выбор между цветом и другими типами переменных, которые тоже могут быть очень полезны. Например, переменные типа Number используют для задания скруглений, высоты или других параметров, выраженных числами, чтобы обеспечить единообразие дизайна на разных устройствах. Переменные типа String удобны для локализации, позволяя легко переключаться между языковыми версиями сайта и убеждаться в правильности локализации. Boolean переменные, хоть и более технические, могут быть использованы для показа или скрытия слоя, например, для отображения меню-бургера на мобильных устройствах и его скрытия на десктопной версии, используя логические переменные true/false.

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

Создаем две переменные для цветов кнопок: одну для основных (primary) и другую для второстепенных (secondary) кнопок, задавая соответствующие цвета. К примеру, синий цвет будет постоянным для основных кнопок, в то время как цвет второстепенных кнопок изменится с черного на серый. Именно такие HEX-коды мы и используем.

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

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

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

Обнаруживаем у кнопки специальные значки в разделе Layer.

Находим наш набор переменных и выбираем подходящий Mode.

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

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

Исправляем ранее упомянутую ошибку, окрашивая компоненты кнопок в соответствии с выбранными переменными.

Оказывается, мы пропустили фон попапа! Добавляем еще одну переменную под названием surface, которая будет служить фоном для нашего попапа.

Вводим конкретные значения.

У нас теперь есть новый токен под названием surface-primary.

Затем выбираем слой и находим этот токен.

Применяем токен к основанию попапа.

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

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

Чтобы устранить эту проблему, перенастраиваем все элементы в попапе на автоматические переменные. При этом светлый режим отображается в наших переменных в первой колонке, и по умолчанию будет применен именно он. Так что если планируете использовать разделение по темам с автоматическим переключением, рекомендуется установить настройку на auto. Если же у вас есть макеты для светлой и темной тем, вам может потребоваться ручная настройка режима.

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

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

В качестве примера создаем попап в темной теме и будем работать с переменными на его примере. При этом у меня не заданы цветовые стили.
Затем создаем компонент для кнопок, чтобы ускорить применение наших токенов и избежать многократных кликов.
После этого перемещаем наши кнопки-компоненты в попап, получая простую структуру.
Снимаем выделение со всех элементов и находим в правой панели раздел Local variables, где нажимаем на иконку настроек.
Замечаем, что раздел пуст, и выбираем + Create variable.
Перед нами выбор между цветом и другими типами переменных, которые тоже могут быть очень полезны. Например, переменные типа Number используют для задания скруглений, высоты или других параметров, выраженных числами, чтобы обеспечить единообразие дизайна на разных устройствах. Переменные типа String удобны для локализации, позволяя легко переключаться между языковыми версиями сайта и убеждаться в правильности локализации. Boolean переменные, хоть и более технические, могут быть использованы для показа или скрытия слоя, например, для отображения меню-бургера на мобильных устройствах и его скрытия на десктопной версии, используя логические переменные true/false.
После разъяснения различий между типами переменных создаем переменную цвета и добавляем еще одну колонку, нажимая на плюсик сверху справа. Эта вторая колонка будет отвечать за темную тему, создавая своего рода сравнительную таблицу между светлой и темной версиями.

В качестве примера создаем попап в темной теме и будем работать с переменными на его примере. При этом у меня не заданы цветовые стили.
Затем создаем компонент для кнопок, чтобы ускорить применение наших токенов и избежать многократных кликов.
После этого перемещаем наши кнопки-компоненты в попап, получая простую структуру.
Снимаем выделение со всех элементов и находим в правой панели раздел Local variables, где нажимаем на иконку настроек.
Замечаем, что раздел пуст, и выбираем + Create variable.
Перед нами выбор между цветом и другими типами переменных, которые тоже могут быть очень полезны. Например, переменные типа Number используют для задания скруглений, высоты или других параметров, выраженных числами, чтобы обеспечить единообразие дизайна на разных устройствах. Переменные типа String удобны для локализации, позволяя легко переключаться между языковыми версиями сайта и убеждаться в правильности локализации. Boolean переменные, хоть и более технические, могут быть использованы для показа или скрытия слоя, например, для отображения меню-бургера на мобильных устройствах и его скрытия на десктопной версии, используя логические переменные true/false.
После разъяснения различий между типами переменных создаем переменную цвета и добавляем еще одну колонку, нажимая на плюсик сверху справа. Эта вторая колонка будет отвечать за темную тему, создавая своего рода сравнительную таблицу между светлой и темной версиями.

Подробный гайд как сделать темную тему с помощью variables фигмы