🪄 Мой топ-5 полезных Figma-плагинов для работы с компонентами и токенами — UX/UI дизайн

Привет, я Арсен – UX/UI-дизайнер, работаю в основном над мобильными интерфейсами, делающий всё от исследования до High-Fidelity прототипа и органиации дизайн-кита.

Вот мой тг-канал, если вдруг интересно: t.me/apollosvg
Говорят, если дать ссылки сразу, то люи чаще переходят👀

Итак, к сути!

Вот базовые и самые нужные плагины, которыми я пользуюсь регулярно в своих проектах при разработке интерфейсов и организации ui-китов. Это не глупенький список дизайн-инфлюенсера из линкедина, понабравшего ссылок из топа гугла, а реальный выпаренный-вываренный концентрат полезных плагинов, лучших в своей категории (для моих задач, конечно же).

Основная тема этих плагинов: работа с компонентами и токенами. Больше упор на организацию дизайн-кита. Возможно, позже докину сюда плагины для упрощения документации прямо в фигме.

Design Tokens Manager

Поможет в экспорте/импорте переменных и стилей в Json файл в простом виде, а не новомодном ⚹¹, чрезмерно перегруженном для мох задач. Мне помог переструктурировать и добавить недостающие токены вручную вне фигмы, а потом залить обратно.

Добавлять токены (они же переменные, они же variables) в Figma – сплошное мучение, каждую переменную нужно добавлять в несколько кликов. А в json файле можно быстренькое кучкой продублировать. А вот с комбинацией нескольких коллекций переменных в одну в фигме вы никак не справитесь, это просто невозможно сделать ванильными способами.

Минус только в том, что экспортирует всё сразу кучей и стили и переменные, но лишнее можно самому удалить из манифест-файла и архива.
Кстати, напишите, если хотите какой-нибудь урок по реструктуризации переменных.

Swap Variables

Заменяет переменные из одной коллекции на переменные из другой, при том можно менять между двумя локальными коллекциями (аналоги так не умеют, уникальный плагин). Очень полезно, если нужно поддерживать много тем, а модов не хватает.

На Professinal и Organization тарифах в Figma доступно только 4 мода для переменных. На бесплатном – вообще 1 (никаких переключений тем, только один столбец переменных)! И только на Enterprise-тарифе доступно больше (сильно больше — 40 модов). Этот плагин позволяет организовывать переключение модов заменяя переменные для выделенного экрана/объекта на аналогичные из другой коллекции. Тем самым с каждой дубликат-коллекцией количество модов удваивается.

Плагин, кстати, от российского дизайнера (Qurle). Приятно, что РУ-дизайнеры не перепрыгнули на Pixso, а всё ещё делают что-то уникальное, крутое и полезное для всех дизайнеров мира в Figma.

Randomise Variants

Этот плагин рандомно изменяют пропсы (properties, свойства) выбранного инстанса. Можно выбрать, какие рандомить. Ещё один плюс – видит даже nested пропсы.

Copy Exposed Instance Properties

Копирует nested пропсы из одного инстанса в другой. Фигма нативно пока не умеет

Property Randomizer

Рандомно изменяет выбранные свойства объекта (тут речь уже про высоту/ширину/т.д., а не про пропсы), очень сильно настраиваемый плагин, что классно. Нужно довольно редко, но когда нужно – мастхэв.

Это всё.

Самый необходимый набор для работы с компонентами и дизайн билиотеками. Ещё раз повторюсь, это лично мой список самых необходимых плагинов. Много раньше необходимых плагинов отвалилось после обновления фигмы (в хорошем смысле): например плагин от icons8 который удалял фоны уже не нужен, фигма умеет нативно. А с ai переводом стали не нужны и множество других плагинов.

Кстати, у меня есть статья про обновление Фигмы (которое я получил в день релиза по невероятной удаче). Многие из косяков оттуда уже починили и даже реализовали мою личную хотелку ⚹². Но это уже совсем другая история 🙂

Если полезно — напишите комментарий, сохраните, апвотните или что там обычно делают. Кстати, поделитесь вашими мастхэв плагинами в работе, которые вот реально используете каждый день.

А вот, кстати, мой абсолютно ненавязчивый и ни разу не упомянутый ранее тг-канал:
@Apollosvg
Говорят, если дать ссылки в конце, то люди чаще переходят 👀

Upd. Там уже накидали ещё полезных плагинов в комментариях