Плагины для управления стилями в Figma

Безусловно, стили в Figma наряду с компонентами значительно повышают скорость и качество разработки дизайна. Разбираемся, как сделать работу со стилями еще удобнее. 

Ниже подборка плагинов, и традиционно публикуем ссылку на краткий гайд по установке плагинов. 

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

Themer

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

Плагин бесплатный, но довольно непростой в использовании и требует регистрации на стороннем сервисе. 

Как пользоваться Themer

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

 

Установка

1. Устанавливаем плагин (ссылка в конце главы)
2. Запускаем, плагин показывает нам окно приветствия, в котором нам потребуется ввести ключ API
3. Заходим на сайт jsonbin.io , авторизовываемся через одну из социальных сетей и попадаем в личный кабинет
4. Кликаем на свою аватарку и переходим в раздел API Keys

Жмем GENERATE KEY, копируем сгенерированный ключ (сохраняем его себе куда-нибудь)

5. Возвращаемся в Figma и вводим ключ в поле для ключа, второе поле «BIN url» оставляем пустым 

На этом этапе плагин настроен. 

Создание темы

Первое, что стоит учесть, это то, что все стили, которые используются в теме, должны быть опубликованы в командную библиотеку. Если вы работаете единолично, вы могли упустить этот момент. Поэтому при создании стилей обязательно заходите в командную библиотеку (macOS: ⌥ Option — 3 , Windows: Alt + 3 ) и обновляйте стили. 

Итак, основной принцип работы Themer строится на одинаковых названиях стилей. Например, если в теме 1 есть стиль «background color», то и в теме 2 должен быть стиль с таким же названием. 

Также, для изменения темы, в текущем файле тоже обязательно должна быть создана тема. Нельзя применить созданные в других файлах темы в файле, у которого своей темы нет 

Итак, для создания двух (на самом деле их может быть сколько угодно) взаимозаменяемых тем. 

1. В одном файле (Sample) создаем наши стили для темы 1. Не забываем их публиковать
2. В другом файле (Sample 2) создаем стили для темы 2. Не забываем публиковать и их
3. В файле (Sample) вызываем плагин Themer и нажимаем +
4. Создаем тему «Светлая тема»
5. В файле Sample 2 также вызываем плагин и тоже создаем тему — «Темная тема»

 

 

 

 

 

 

 

 

 

Теперь мы можем переключать эти две темы в этих двух файлах. 

На практике нам потребуется сделать это в третьем файле, поэтому создаем его (у нас он называется «проект») и создаем там элементы со стилями, повторяющие названия стилей в первых двух файлах. 

Далее обязательно создаем тему (мы назвали тоже «Проект»), и теперь мы можем переключать темы в этом третьем файле. 

 

 

Видео работы

Темы, использующие префикс

Вы можете создавать темы прямо в одном файле, сгруппировав стили с помощью префиксов. 

Как создать темы из групп стилей

1. Создаем наши локальные стили
2. Объединяем их в группы с помощью префиксов
3. Вызываем плагин, жмем «+» для создания новой темы
4. Ставим  чекбокс «Split prefixed styles into themes»

 

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

Названия стилей должны совпадать для корректной работы. 

Где скачать 

Ссылка на плагин: https://www.figma.com/community/plugin/731176732337510831/Themer 

 

UI Kit

Плагин UI Kit собирает ваши стили (причем как основываясь на стилях, так и на основе элементов без стилей — опционально) и показывает все это в виде UI-кита. 

Где скачать

Ссылка на плагин: https://www.figma.com/community/plugin/747227147599827533/UI-Kit 

Помогла ли вам эта статья?