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

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

1. Создаем вот такой попап в темной теме, на его примере будет работать с variables. Цветовых стилей при этом у меня нет.

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

3. Переносим готовые кнопки-компоненты в попап. У нас получилась вот такая простая структура.

4. Убираем выделение со всех элементов, находим справа в панели Local variables. И нажимает на иконку настройки

5. Как мы видим, пока тут пусто, нажимаем на + Create variable

6. Нам предлагают выбор между цветом и другими переменными. Они тоже очень полезные. Например Number используют для того, чтобы добавить определенные скругления, или высоту, или что-то еще. В общем любой параметр из панели справа, выраженный в цифрах. Это нужно, чтобы например у вас на мобиле, десктопе и планшете были одни и те же скругления. Или для того, чтобы высота таббара на всех девайсах была одной и той же (ну а вдруг). String - переменная, удобная для локализации. Например вы создаете ру/англ версию сайта. Привязываете переменную к текстам и просто в 1 клик переключаете языки, чтобы убедиться что все локализовано + тексты не поехали. Boolean – это уже что-то на программистком, но можно использовать для того, чтобы показать/скрыть слой. Например на мобильных устройствах у вас есть бургер, а на десктопе он пропадает. Для этого лучше использовать true/false булеву переменную.

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

8. Создаем две переменные для цвета кнопки. Primary для основной и secondary для доп. кнопок. Так же забиваем цвета. Например синий у нас не изменится, будет везде синим, а вот черная кнопка изменится на серую. Такие HEX и вставляем.

9. Как видите, то, что писал выше мы добавили, а еще накидали переменных для текста. Черный текст у нас станет белым, а серый останется серым, так как выбран оттенок, хорошо различимый на фоне.

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

11. Теперь применяем для второй кнопки button-secondary. Но почему-то она покрасилась в белый, и очевидно, что что-то пошло нет так. Разбираемся

12. Находим у кнопки вот такие гаечки в разделе Layer.

13. Дальше находим нашу коллекцию и выбираем нужный Mode.

14. Теперь наша кнопка покрасилась в нужный цвет с примененной темной темой. Теперь все ок. Но обратите внимание, что кнопка покрасилась, а компонент остался таким же. В этом случае нужно было применять переменную к компоненту.

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

16. Для кнопок исправляем ошибку выше и красим кнопочки в компоненте.

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

18. Добавляем значения.

19. У нас появился новый токен surface-primary

20. Теперь нажимаем на layer и находим этот токен.

21. Применяем его к подложке.

22. Заключительный шаг, создаем секцию вокруг попапа.

22. Нажимаем на секцию и применяем для нее Light mode. И казалось бы все должно заработать. Но ничего не произошло. Почему? Потому что мы для попапа добавили dark переменные грубо говоря хардкодом. В таком случае попап не слушается внешнего регулятора.

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

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

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