Подробный гайд как сделать темную тему с помощью variables фигмы
Всем привет. Недавно фигма выкатила крупное обновление и с его помощью можно создавать очень удобные переменные, которые так же могут использоваться для создания темной и светлой темы. В этом гайде я расскажу именно про это, так как это очень просто и удобно. Чтобы разобраться как все это работает я специально выбрал неправильный алгоритм, чтобы наглядно показать ошибки, которые вы можете совершить. Итак, приступим.
- Создаем вот такой попап в темной теме, на его примере будет работать с 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. В таком случае его цвета и токены будут управляться через внешнюю секцию. Получается вот такая игрушка. Можете пойти хвастаться перед коллегами.
Спасибо тем, кто дочитал, успехов вам с дизайном. Помните, что делая такую систему, один фронтендер облегченно выдыхает, благодаря вас.
Комментарий удален модератором
у каждого свой подход, как в продукте нет универсального пути его успеха. Я показал то, что может работать для маленьких команд и стартапов. Если знаете, как делать правильно – покажите
У тебя всё ок кроме распределения цвета (оттенков).
Чем ближе слой, тем он светлее.
Кнопка не может быть черной.
Черный для поля ввода текста.
Просто соблюдай законы, и всё.
Согласен, это можно поправить, но статья про другое, так что ничего страшного)
Я очень сильно поржал с "неможет" и "правил" - это дизайн, тут нет правил и много душнил. (О нет. поставил "-" вместо "—" перед это, я злостный нарушитель)
В творчестве нет правил, в дизайне есть. Если тебе легче воспринять, то не правила, а определенные законы.
Надеюсь ты знаешь какую задачу призван решать дизайн, и как минимум читал определение — что такое дизайн и для чего он служит?
И если да, тогда ты не можешь делать как тебе вздумается, ты должен следовать решаемой задаче, и как минимум, учитывать разный опыт взаимодействия людей с объектом дизайна, от продуктового до графического. И уж точно учитывать людей с различными дисабилитис, например визуальными нарушениями зрения.
Поэтому да, есть и законы и правила.
В даркмоде тёмная кнопка с более светлом БГ это дырка.
Комментарий удален модератором
HIG, Material Design Guidelines, Inclusive Best Practices вышли из чата.
Продолжай 👌🏼
Понятно. Дизайнер со скиллбокса
Спасибо что поделился.
Я догадывался.
Статья все-таки не про построение тем, а про пример работы с variables для создание разных цветовых тем. Не душите и научитесь видеть для себя пользу во всем 😉
Комментарий удален модератором
Печально, что для цвета теней нет поддержи variables
Это временно, на презентации говорили, что поддержка для эффектов тоже будет скоро
Темная тема это отдельный вид искусства, не могу представить любое приложение без темных тем
Подавляющее большинство приложений крупных ретейлеров не имеет темных тем
Зато у Озон, Авито, WB, Яндекс маркет есть 👍🏻
Где в WB и ЯМ такие настройки?
Автоматически
Спасибо за статью конечно, но я еще больше запуталась(
Это нормально, попробуйте сами поковырять
Печально, что для цвета теней нет поддержи variables
Фигма жоско двинулась вперёд, это чудо господне какое-то. Научилась гарнитуры показывать, это что вообще!
Цвет теней нет поддержи variables
спасибо за кейс ,сохраню чтобы не потерять
Нет variables-ов для цвета теней, если что
Мож я туплю, но объясните про переменные типа string. Почему я могу добавить переменную к текстовым полям, кроме только тех случаев, когда текстовое поле в компоненте привязано к property / text
Это бага и ждать обновлений? Это фича и надо поудалять проперти в библе?
Можете подсказать как уже в большом проекте перенести все цвета из стилей в variables? Чтобы можно потом быстро все это настроить
Умельцы уже начали плагины писать. Можете поискать что-то типа styles to variables
Нихрена не понятно, но все равно спасибо...