В этой статье мы собрали полезные плагины для Figma, которые упростят вам работу и пополнят арсенал новыми удобными инструментами — и все это бесплатно. При установке они привяжутся к вашему аккаунту и будут запускаться как в десктопной версии, так и в браузере.
1. Better Font Picker
Для чего нужен: плагин позволяет просматривать, как будут выглядеть шрифты, прямо в Figma — по аналогии с панелью «Символ» в Photoshop.
Как пользоваться: в любой рабочей области нажмите правую клавишу мыши и выберите в меню Plugins → Better Font Picker. Появится окно, где можно сразу посмотреть, как выглядят установленные в вашей системе шрифты.
2. To Path
Для чего нужен: с помощью этого плагина можно расположить текст по любой форме объекта.
Как пользоваться: создайте текст и фигуру (например, круг), откройте плагин через Main menu (сверху слева) → Plugins → To Path или просто кликнув по рабочей области и нажав Plugins → To Path. Далее выберите оба элемента, задайте нужные параметры и нажмите Link.
В результате вы получите изогнутый текст, а фигуру под ним можно удалить.
3. Iconify
Для чего нужен: большая библиотека разнообразных иконок в формате SVG. Можно выбрать из готового и не тратить время, если вдруг поджимают сроки.
Как пользоваться: откройте плагин через Plugins → Iconify после правого нажатия на рабочую область или через Main menu, как удобнее.
Бесплатные паки с готовыми иконками в Figma также есть в разделе Community. Чтобы их открыть, в меню слева сверху нажмите на иконку с домиком. Далее выберите Community (изображен как глобус), вбейте в поиск icons и найдите подходящий набор.
4. Palette
Для чего нужен: с помощью этого плагина можно извлечь подборку цветов из любого изображения и сформировать готовую палитру для своего проекта, не теряя времени на работу вручную.
Как пользоваться: перенесите изображение в область Figma и примените к нему плагин Plugins → Palette. Внизу появится небольшое окно со всеми основными цветами из картинки, их можно использовать для своих целей.
5. PixCut Background Remover
Для чего нужен: можно быстро и не заморачиваясь вырезать из изображения несложный объект. Хорошо работает, когда на картинке или фото один главный элемент — если их будет много, могут возникнуть сложности.
Как пользоваться: чтобы вырезать объект, выберите изображение в Figma и примените к нему плагин через Plugins → PixCut Background Remover. Фон исчезнет автоматически.
6. Pixel Perfect
Для чего нужен: привязывает выбранные слои к пиксельной сетке и выравнивает положение всех объектов, округляя их до точных значений. Больше никаких дробных чисел вроде 79,98 или 100,05.
Как пользоваться: выделите слои, которые требуется адаптировать, запустите плагин — и он автоматически изменит положение каждого из них так, чтобы высота и ширина соответствовали целым значениям.
7. Text Prettier
Для чего нужен: поправит кавычки, уберет лишние пробелы, заменит дефис на тире, добавит специальные знаки, где нужно — в общем, улучшит типографику и сделает текст комфортнее для чтения.
Как пользоваться: выберите текст в рабочем пространстве Figma и кликните на него правой кнопкой мыши. Затем перейдите в Plugins → Text Prettier → Run TextPrettier.
После запуска плагин сам подберет подходящие параметры и адаптирует текст, чтобы он выглядел опрятным и читабельным.
8. Isometric
Для чего нужен: позволяет создать изометрическую проекцию дизайна прямо в Figma, не прибегая к помощи Photoshop и других графических редакторов.
Как пользоваться: выберите фигуру, которую нужно изменить. Нажмите на нее правой мышью и запустите плагин через Plugins → Isometric.
Введите желаемый угол наклона в специальном окне. Осталось выбрать перспективу (Perspective) — и изометрическая проекция готова.
9. Soroka
Для чего нужен: плагин сам подбирает и показывает шрифтовые пары на основе библиотеки Google Fonts, что экономит время и помогает найти неочевидные комбинации.
Как пользоваться: откройте плагин через Plugins → Soroka, в появившемся окне выберите из каталога шрифт, который собираетесь использовать в проекте. Упростить себе задачу можно с помощью поиска и фильтров, например, если вы ищете только кириллицу.
Пункты в списке можно раскрывать и сразу в Figma искать сочетания. Доступен предпросмотр шрифтовых пар по символам, словам и отрывкам текста.
10. Mesh gradient
Чем полезен: поможет создать красивые сложные градиенты с тонкой настройкой прямо внутри Figma.
Как пользоваться: запустите плагин, например, через Main menu (сверху слева) → Plugins → Mesh gradient. Откроется окно с параметрами. Созданные через него изображения с градиентами можно сохранить в высоком качестве.
Еще Mesh gradient способен запоминать настройки понравившихся сетчатых градиентов, чтобы использовать их в следующих проектах.