ТОП-8 плагинов Фигма, которые сделают дизайнера счастливым

Плагины в Фигме — это то, что сделает работу веб-дизайнера проще, быстрее и поможет автоматизировать рутинные процессы.

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

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

В этой статье я расскажу, где искать плагины в Фигме и как их установить, а также поделюсь подборкой из 8 своих любимых плагинов, которыми я постоянно пользуюсь.

Как установить плагины в Фигму?

Относительно недавно (в 2019 году) в Фигме появился раздел Community, где пользователи со всего мира могут делиться своими дизайн-системами, иллюстрациями, иконками, а разработчики — плагинами.

Чтобы добавить плагин в арсенал своих инструментов в Фигма, нужно сделать следующее.

1. Откройте Фигму (это может быть как веб-версия, так и загруженное на компьютер ПО).
2. В боковом меню (слева) найдите раздел Community (если у вас открыт проект, нужно вернуться на главное окно программы с помощью нажатия вверху на иконку Фигмы).
3. В разделе Community выберите подраздел Plugins.

4. Листайте вниз страницы, чтобы ознакомиться со всеми доступными плагинами (описание плагинов, как и вся Фигма, на английском языке), или воспользуйтесь поиском вверху страницы, чтобы найти конкретный плагин.
5. Когда нужный плагин обнаружен, установите его с помощью кнопки Install.

Где искать установленные плагины Фигма?

После установки плагина Фигма, он появится в вашей панели инструментов. Чтобы до него добраться:

• откройте свой проект;
• нажмите иконку меню бургер в левом верхнем углу;
• тапните по строке Plugins;
• в списке выберите нужный плагин и включите его с помощью клика по названию.

Подборка плагинов Фигма, которые помогут в работе

Хочу поделиться с вами подборкой своих любимых плагинов, которые я постоянно использую в работе. Эти инструменты — моя палочка-выручалочка, которая экономит моё время и позволяет создавать дизайнерские шедевры 🙂

№ 1. Unsplash

Вы наверняка знакомы с сайтом unsplash.com, который предоставляет доступ к бесплатным стоковым изображениям. 

Плагин Unsplash в Фигма — это версия этого стокового ресурса в вашем рабочем пространстве Figma. Он помогает быстро подставить изображение в ваш макет, не отвлекаясь на поиск, копирование и скачивание картинок с других ресурсов.

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

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

№ 2. Iconify

Этот плагин содержит огромную коллекцию иконок на все случаи жизни: для соцсетей, кнопок и др.

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

В плагине вы также можете сразу настроить размеры, цвет и угол наклона иконки.

Все иконки, которые вы берёте из Iconify — векторные изображения, с которыми можно продолжать работу:

• менять размер иконки;
• убирать лишние детали или играть с их размерами
• менять цвет и др.

№ 3. Storyset by Freepik

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

Все иллюстрации — векторные изображения, детали которых можно доработать для создания своих уникальных картинок.

№ 4. arc

Тот самый плагин, который поможет сделать текст по кругу в Фигме. Очень удобно. Не нужно переключаться на Фотошоп, чтобы сделать этот эффект.

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

№ 5. Tailwind Color Generator

Этот плагин сгенерирует для вас монохромную палитру из желаемого цвета и сохранит её в стили. Не нужно сидеть и подбирать оттенки вручную. Всё это сделает компьютер.

№ 6. Lorem ipsum

В макет приходится внедрять не только посторонние картинки. Может понадобиться и текст, если вдруг заказчик ничего не предоставил. На этот случай также есть плагин, который подставляет знаменитый текст Lorem ipsum.

1. Создайте текстовый слой.
2. Выделите его.
3. Запустите плагин.
4. Выберите необходимое количество слов/предложений/параграфов.
5. Нажмите Generate.

Также есть автоматическая генерация. Плагин проанализирует размер блока и добавит необходимое количество текста.

№ 7. Avatars

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

Но есть другой вариант — плагин Avatars в Фигма. Он автоматически сгенерирует для вас аватарки людей, и вам не придётся отвлекаться на такую незначительную работу.

Также вы можете подставить людей и в свои блоки:

№ 8. Print for Figma

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

Напоминаю, что Фигма инструмент для веба, поэтому там всё в пикселях. А цветовая модель, разумеется, — RGB. Поэтому, если рисуете макет печатной продукции в Фигме, не забудьте затем перевести его в CMYK. Это можно сделать в ПО от Adobe (Photoshop, Illustrator и др.).

Надеюсь, моя подборка облегчит ваш труд и сделает вашу работу приятнее 🙂

А может быть вам уже знакомы эти плагины Фигма? Или вы пользуетесь какими-то другими? Делитесь в комментариях своими находками.