6 плагинов Figma, о которых нужно знать каждому дизайнеру

Как с помощью бесплатных дополнений сделать работу в Figma еще удобнее и эффективнее? Рассказывает эксперт Академии дизайн-профессий Pentaschool Павел Ярец. 

Академия Pentaschool продолжает цикл статей о редакторе Figma. Ранее мы знакомились с программой и обозревали ее интерфейс.

В этом материале мы поговорим о том, что такое плагины и как они могут быть полезны в работе. А в конце – приятный бонус для тех, кто хочет освоить Figma на продвинутом уровне. 

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

Чтобы установить плагин, выберите нужное дополнение в поиске и кликните на кнопку Run. После этого вы сможете пользоваться плагином во всех ваших проектах.

Если вы пока не знаете, какое дополнение хотите установить, то можете изучить каталог в разделе Community и перейти из него на страницы с описаниями плагинов.

Список установленных дополнений вы можете посмотреть в меню проекта.  

Обратите внимание на маленькую иконку, которая находится в правом нижнем углу рядом со значком самого плагина – она показывает, является ли дополнение универсальным для Figma Jam (редактор для создания схем) и самого редактора Figma (иконка, похожая на символ бесконечности) или же оно предназначено только для Figma (иконка с пером):

Количество плагинов для Figma постоянно растет. Давайте рассмотрим те из них, которые будут полезны дизайнеру для решения самых разных задач.

Unsplash 

Скринкаст: https://www.loom.com/share/5f02d6292ec6466299f412df1de0e906

Доступ к ресурсам одного из самых популярных бесплатных стоков прямо из интерфейса Figma.

Как работает:

Запускаете плагин, в поиске вводите запрос, из выдачи выбираете нужное изображение. Кликнув по изображению, дожидаетесь его загрузки в редактор.

Material Design Icons

Дополнение, позволяющее искать нужную иконку из набора Material прямо в Figma (таким же образом работают все плагины с иконками).

ВНИМАНИЕ! Этот плагин платный, но у него есть и бесплатный функционал. Если работаете с модулем постоянно, есть смысл его оплатить. А если используете для сольных проектов, рекомендую лайфхак:

1. В Community находите сет иконок Material и держите его открытым в отдельном окне.

2. Находите с помощью плагина нужную иконку.

3. Далее ищете ее в файле с иконками и копируете в рабочий документ.

Как работает:

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

Fishtext in Russian

Cкринкаст с описанием: https://www.loom.com/share/9636cb37bf3845a0b6616fe1fb64ec61

Описание:

Плагин для генерации Lorem Ipsum-текстов на кириллице. Создает абстрактный текст («рыбу») для макетов. Это помогает понять, как будут выглядеть текстовые блоки с примененными к ним стилями оформления. Продукты Adobe давно умеют автоматически генерировать тексты, а вот в Figma такая возможность появилась относительно недавно благодаря этому дополнению. Если вам нужен текст на английском, используйте плагин Lorem Ipsum.

Как это работает:

1. Устанавливаете плагин, запускаете его. 

2. Выбираете текстовый слой, группу слоев или артборд, содержащий текстовые слои.

3. Ставите галочку в строке «Заполнить текстовый слой» и указываете, что именно хотите сгенерировать (предложение, абзац или заголовок). Далее выбираете количество текста и нажимаете кнопку «Сгенерировать». После плагин генерирует абстрактное текстовое наполнение.

Image Editor

Удобные расширенные настройки для фотоэффектов. Если вы владеете Photoshop, подобные плагины вами будут восприниматься как детские игрушки, но не спешите с выводами – данный модуль расширяет функции Figma по редактированию растровых изображений.

Vector Maps

Скринкаст с примером работы: https://www.loom.com/share/add9b736c17b49d1939bdec000d2e6eb

Если вам доводилось тратить часы на поиск векторных карт с границами регионов (например, для инфографики), то этот плагин станет для вас настоящей находкой.

Как работает:

Выбираете область и нажимаете Add, чтобы добавить ее к списку регионов. Затем кликаете на кнопку Get as layer и получаете фрейм с нужными векторными границами стран. Единственный минус плагина – сильно подвисает в процессе генерации.

Pixel Perfect

Плагин, который придется по вкусу всем сторонникам Pixel Perfect Precision-подхода (стандарту в HTML-верстке, согласно которому страница должна соответствовать дизайн-макету с погрешностью не более 1-2 пискелей). Помогает округлять дробные значения объектов и текстовых филдов.

Как работает:

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

Работа с плагинами – лишь одна из многих возможностей, которые открываются пользователям Figma. Узнать больше о функционале редактора, научиться с 0 создавать прототипы сайтов и приложений, собрать портфолио и получить все знания и навыки, необходимые для работы, вы сможете на курсе по Figma от Академии дизайн-профессий Pentaschool.