Как перевести цветовые стили в Figma Variables

На днях Фигма презентовала Figma Variables. С их помощью можно завязать свойства элементов и создавать несколько тем приложения, адаптивные макеты, мультиязычные интерфейсы, делать более сложные прототипы.

Наверняка, у многих возникли такие же вопросы, как и у меня: как перевести мои стили в переменные так, чтобы не пришлось перепроставлять цвета на всех макетах? И как сделать так, чтобы стили и переменные не дублировались на панеле Fill? Делюсь проверенным способом:

1. Разберем на примере этого компонента, к которому уже привязаны наши системные цвета

2. Открываем файл, где у вас хранятся стили, и запускаем этот Плагин

3. Плагин дублирует в переменные все наши стили с тем же неймингом и группировкой. Но, самое главное: переменные автоматически линкуются к соответствующим стилям. Неплохо!

4. Если провалиться в настройки наших стилей можно увидеть, что в их Properties появился линк к соответствующей переменной. Рекомендую провалиться в настройки всех стилей и проверить везде ли верно создался этот линк.

5. При этом, на панели Fill теперь кроме старых стилей (кружочки) появились новые переменные (квадраты). Это нормально. Теперь, когда мы все проверили, можно удалить старые стили (кружочки).

6. Публикуем изменения

7. Готово! После публикации изменений ко всем компонентам и макетам уже будут привязаны новые переменные вместо стилей.

Если статья была вам полезна — заходите в мой телеграм канал, в котором я делюсь опытом продуктового дизайнера, мыслями и крутыми подборками про интерфейсы ✌