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

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

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

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

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

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

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

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

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

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