Топ-20 лучших плагинов для Figma в 2023 — журнал «Доктайп»

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

Iconify

Более 100 наборов значков, например Material Design, FontAwesome, значки Jam, EmojiOne, Twitter Emoji. Просто откройте окно и выберите нужную иконку из наборов. Если не хотите долго искать — используйте поиск, он тоже работает:

Поиск по запросу «Head»

Скачать

Vectary 3D Elements

Добавит третье измерение в ваши 2D проекты. Интеграция работает в обе стороны: можно импортировать изображения из Figma в 3D сцены Vectary, так и наоборот — сделать какой-нибудь объемный объект в Vectary и закинуть его в Figma.

В плагине есть большая библиотека готовых 3D-элементов (например, смартфоны) или вы можете загрузить туда любую 3D-модель по ссылке — например, если у вас в компании есть 3D-моделлеры.

Скачать

Anima — Export Figma to HTML, React, Vue code

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

👉 — Экспорт Figma в код HTML, CSS, React или Vue.

— Создание прототипа на основе кода.

— Возможность поделиться URL-адресом с вашей командой и пользователями.

Скачать

Unsplash

Красивые картинку сразу в Figma. Теперь не нужно лезть в фотосток в браузере, искать картинки, скачивать, а только потом добавлять в пространство.

Скачать

Lorem Ipsum

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

Скачать

Blobs

Создаёт уникальные фигуры. Вы можете выбрать количество точек и сложность элемента в генераторе.

Скачать

Mockup

Возможность перенести дизайн на экран. Плагин также предлагает готовые варианты дизайна.

Скачать

Arc

Возможность изогнуть текст вверх, вниз или в круг. Регулируйте, как вам нужно.

Скачать

Better Font Picker

Помогает выбирать шрифты с помощью предварительного просмотра. Удобнее, чем стандартная выпадашка со шрифтами.

Скачать

Charts

Создаёт диаграммы: линейную, площадную, круговую, кольцевую, точечную и гистограмму. У каждой есть собственные значения, которые вы выставляете, как нужно. Также не забывайте выделять область, где необходима диаграмма.

Скачать

Noise

Создаёт новый слой в виде сгенерированного шума. Вы сами регулируете плотность, контраст и масштаб. А если нажать In__ve__rt, то будет сгенерирован светлый шум на темном фоне_. П__рофилактика_ теперь у вас в Figma.

Скачать

Mapsicle

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

Скачать

SkewDat

Исказит любой объект. Можно искажать несколько объектов одновременно и есть возможность вернуться к исходному значению.

Скачать

Get Waves

Генератор волн создаёт вектор с заливкой. В генераторе есть настройка типа волны, размера и направления.

Скачать

Illustrations

Бесплатные популярные библиотеки иллюстраций.

Скачать

Avatars

Генерирует аватарки рандомными людьми в выбранную область. Есть возможность сгенерировать сразу несколько объектов.

Скачать

Contrast

Проверяет контрастность цветов во время работы. Выберите слой, и функция Контрастность найдет цвет непосредственно за выбранным цветом и покажет коэффициент контрастности.

Скачать

Humaaans for Figma

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

Скачать

Autoflow

Рисует линию между выбранными объектами. Есть выбор цвета, толщины, наклон линий. Удобно для рисования блок-схем или для замены Miro.

Скачать

Blush

Ещё одни готовые иллюстрации. Просто выберите коллекцию, композицию и поместите ее к себе.

Скачать

Прочие материалы

• 8 полезных плагинов VS Code для вёрстки
• 34 инструмента для веб-разработчика на каждый день
• Фигма или Фотошоп. Что выбрать новичку

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

20 топ-плагинов Figma для маркетолога

Идеи

Прокачайте сервис, чтобы работать быстрее

Чтобы сделать красиво
Чтобы визуализировать данные
Чтобы проверить дизайн
Чтобы работать с файлами и ссылками
Как пользоваться плагинами

Мы в Telegram

В канале «Маркетинговые щи» только самое полезное: подборки, инструкции, кейсы.

Не всегда на серьёзных щах — шуточки тоже шутим =)

Подписаться

Станьте email-рокером 🤘

Пройдите бесплатный курс и запустите свою первую рассылку

Подробнее

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

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

Рассмотрим бесплатные плагины Figma, которые будут особенно полезны в маркетинге.

Чтобы сделать красиво

Изначально Figma заточена под дизайн кнопок и плашек для интерфейсов. Решив собрать там рекламный креатив, вы столкнётесь с довольно скудным набором дефолтных инструментов. Но если наш длинный гайд по Adobe Photoshop вас пугает, без паники. С плагинами Figma можно легко добавлять эффекты и пользоваться библиотеками с готовой графикой.

Magic Cut для удаления фона. Изначально в Figma можно вырезать объект из фона с помощью инструмента «Перо». Но если точное выделение по контуру вам даётся с трудом, а предмет на фото отчётливо выделяется, смело используйте плагин. Даже если автоматически он сделает неидеальный контур, ему можно намекнуть, что стереть, а что добавить — используя красные и зеленые кисти. Со сложными детализированными объектами на пёстром фоне работать будет проблематично — там всё-таки нужно «Перо». Но яблоки, чайники, котиков или людей на однородном бэкграунде Magic Cut выделяет легко.

Blurhash для создания размытия. В лендингах, постах или рекламных баннерах фото в качестве фона зачастую не походят: на них плохо виден текст. Другое дело — градиенты. Если хочется чего-то более интересного, чем растяжка от одного цвета к другому, можно найти фото с подходящими цветами и размыть с помощью Blurharsh. В таком градиенте будет больше цветовых переходов, и он будет смотреться «живее».  

Noise & Texture для наложения текстур и паттернов. Если хотите «состарить» изображение зернистой текстурой, наложить мягкие блики или несложные паттерны, поможет этот плагин. Можно корректировать параметры наложения, цвет и пробовать разные режимы смешивания — прямо как в Photoshop.

Illustrations для добавления иллюстраций. Большая бесплатная библиотека иллюстраций в разной стилистике структурирована по именам художников, участвующих в проекте. Есть плоские и трехмерные картинки на любой вкус. Многие из них можно редактировать в Figma самостоятельно: видоизменять формы и цвета.

Fraction для бесшовного импорта иконок. Fraction — один из самых известных бесплатных стоков с пиктограммами. Можно найти подходящую иконку на сайте, скачать и загрузить в файл Figma. А можно установить плагин и искать иконки, не закрывая программу, а потом импортировать в один клик.

3dicons для трехмерных иконок. Это небольшая библиотека с бесплатными 3D-иконками, которые могут пригодиться для разных проектов. Главная ценность — иконки редактируемые. Плагин позволяет менять в них цвета и разворот. 

Blobs для генерации случайных пятен. Векторные кляксы часто используют в интерфейсах и рекламе — как часть фона для иллюстрации или в качестве подложки под текст. Если не хочется долго думать над формой кляксы и вырисовывать её «Пером», можно автоматически создать нужную фигуру с помощью плагина. Можно варьировать параметры «сложности» и «уникальности» кляксы, а потом покрасить получившееся пятно в любой цвет.

Morph для создания модных эффектов. Объемные формы, эффект матового стекла, глитч, неоновый свет — эти эффекты делают дизайн свежее и современнее. Превратить обычные фигуры в объемные, светящиеся или полупрозрачные можно в несколько кликов с помощью плагина. В Morph есть несколько популярных эффектов и довольно много вариантов настроек для каждого: можно задать прозрачность, размытие, интенсивность теней, а также выбрать форму сечения объёмной фигуры.

Coolors для подбора гармоничных оттенков. Если выбор цветовой палитры вызывает у вас ступор, здесь можно подсмотреть удачные решения. В бесплатной версии плагина можно генерировать рандомные палитры или смотреть популярные сочетания. При клике на понравившийся цвет его код автоматически копируется — можно быстро покрасить нужные объекты.

Чтобы визуализировать данные

Построить график, схему или большую таблицу вручную бывает непросто. И это можно автоматизировать с плагинами.

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

Simple arrow drawer для рисования стрелочек. Стрелки в Figma можно рисовать вручную «Пером», настроив соответствующее окончание линии. Но проще и быстрее — с помощью плагина. Просто выделяете два объекта, настраиваете толщину стрелки, отступы и её положение по отношению к объектам (слева, справа, снизу или сверху). Так превратить кучу разрозненных фигур в схему можно в несколько кликов.

Table Creator для создания таблиц. Нехитрый плагин, который тем не менее поможет сэкономить время. Не нужно ничего строить вручную, просто выбираете нужное количество ячеек и их размер — прямо как в Microsoft Word. В готовой табличке можно автоматически выделять строки и столбцы и работать с ними.

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

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

Чтобы проверить дизайн

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

Contrast Checker чтобы проверить контрастность. Плохо различимый текст на фоне — частая проблема в дизайне, и дело обычно в недостаточном цветовом контрасте. Хорошая новость: ученые уже все измерили и разработали международный стандарт. Если не уверены, насколько дизайн легко читаем, это поможет разобраться. Плагин позволяет быстро выбрать два цвета и проверить контраст между ними. Если контраст сомнительный, программа порекомендует использовать цвет только для крупного текста. А если совсем слабый, будет подсвечивать и средний, и крупный текст красным.

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

Mockup для просмотра дизайна на мокапах. Плагин позволяет в несколько кликов поместить макет на реальные объекты, не выходя из Figma. Есть мокапы с цифровыми носителями — телефонами, ноутбуками, часами — а также с полиграфией и наружной рекламой. Выбираете нужный мокап, с помощью знака «+» добавляете на него нужное изображение, и готово.

Чтобы работать с файлами и ссылками

Ещё несколько полезных плагинов.

Downsize для сжатия изображений. Этот плагин помогает скачать все выделенные файлы пакетом с общими настройками. Программа может сама отделять файлы с прозрачностями и скачивать их как PNG, а без файлы без прозрачностей — как JPEG (в этом формате они будут меньше весить). Также можно задавать значения, насколько вы хотите сжать исходные картинки и насколько уменьшить или увеличить их размер.

Quick Tracing для получения редактируемых иллюстраций. PNG и JPEG — форматы, в которых изображения  состоят из пикселей. Такие иллюстрации трудно редактировать, и в интерфейсе они будут дольше загружаться. Плагин позволяет перевести файлы в векторный формат. Они станут легче, а вы сможете легко менять контуры и цвета, как в обычных фигурах в Figma. При конвертации плагин может слегка искажать цвета, но их легко восстановить: выделяйте фрагмент иллюстрации как обычную фигуру и назначайте любой оттенок.

QR Code Generator чтобы создать QR-код. Если вы делаете дизайн для печати, обычные ссылки почти бесполезны — аудитория должна быть уж очень заинтересованной, чтобы набирать адрес сайта вручную.  Оптимальное решение — QR-код. Его в два счёта можно создать с помощью плагина.

Как пользоваться плагинами

Установленные плагины можно найти в меню под иконкой Figma, кликнув на «Plugins». Там можно увидеть недавно использованные плагины, а чуть ниже — все скачанные «Saved Plugins».

Хотите еще больше плагинов? Заходите в Figma Community, там регулярно публикуют что-то новое.

Поделиться

СВЕЖИЕ СТАТЬИ

Другие материалы из этой рубрики

Не пропускайте новые статьи

Подписывайтесь на соцсети

Делимся новостями и свежими статьями, рассказываем о новинках сервиса

«Честно» — авторская рассылка от редакции Unisender

Искренние письма о работе и жизни. Свежие статьи из блога. Эксклюзивные кейсы
и интервью с экспертами диджитала.

Оставляя свой email, я принимаю Политику конфиденциальности

Наш юрист будет ругаться, если вы не примете 🙁

Как запустить email-маркетинг с нуля?

В бесплатном курсе «Rock-email» мы за 15 писем расскажем, как настроить email-маркетинг в компании. В конце каждого письма даем отбитые татуировки об email ⚡️

*Вместе с курсом вы будете получать рассылку блога Unisender

Оставляя свой email, я принимаю Политику конфиденциальности

Наш юрист будет ругаться, если вы не примете 🙁

Руководство по быстрому запуску подключаемого модуля

| Plugin API

Это краткое руководство поможет вам настроить рекомендуемую нами среду разработки: использование TypeScript в Visual Studio Code. Вам не нужно использовать эту комбинацию. Вы можете писать непосредственно на JavaScript — или на любом языке, переводимом на JavaScript — и использовать предпочитаемый вами текстовый редактор.

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

Загрузить инструменты

Прежде чем мы начнем, вам необходимо установить следующие инструменты:

• Настольное приложение Figma: Для разработки и тестирования плагинов требуется настольное приложение Figma. Figma потребуется прочитать код вашего плагина, сохраненный как локальный файл. Вы можете скачать его со страницы загрузок Figma. Если у вас уже установлено настольное приложение, убедитесь, что вы используете последнюю версию.
• Код Visual Studio: Это среда разработки, которую вы будете использовать для краткого руководства.

Создать новый плагин

1. Войдите в настольное приложение и создайте новый файл дизайна.
2. В меню перейдите к Плагины > Разработка , затем выберите Новый плагин.
3. Из Создайте модальный плагин , выберите Figma design и дайте вашему плагину имя.

1. Выберите С пользовательским интерфейсом и API браузера.
2. Нажмите Сохранить как , чтобы сохранить его в любом месте на диске.

Откройте папку кода плагина

1. Запустите Visual Studio Code.
2. Перейдите к Файл > Открыть папку и затем выберите папку, которую вы сохранили при создании нового плагина.
3. Если вы видите модальное окно подтверждения, установите флажок и нажмите Да, я доверяю авторам , чтобы продолжить.

Установить зависимости проекта

При первом открытии проекта в Visual Studio Code вы можете заметить несколько ошибок, выделенных в наших файлах. Чтобы это исправить, нам нужно установить некоторые зависимости проекта.

Node.js и npm

Node позволяет запускать JavaScript вне браузера, а npm является менеджером пакетов по умолчанию для Node.

Npm — это инструмент командной строки и онлайн-репозиторий проектов Node.js с открытым исходным кодом. Вместо того, чтобы вручную включать зависимости в наш проект, npm упрощает установку этих зависимостей с помощью скриптов.

Когда вы загружаете Node с веб-сайта Nodejs.org, ваша загрузка также включает npm.

1. Выберите программу установки, чтобы запустить мастер установки Node.js.
2. Когда установщик спросит об инструментах для собственных модулей, отметьте Автоматически устанавливать необходимые инструменты и выберите Далее .
3. Выбрать Установить .
4. После завершения установки выберите Готово .

TypeScript

Мы рекомендуем использовать TypeScript для разработки плагинов Figma. Мы предоставляем файл типизации с аннотациями типов для всего API плагина.

Когда вы устанавливаете типизацию для Plugin API, Visual Studio Code предоставляет вам предложения по мере написания кода.

Это помогает уменьшить количество ошибок и критических случаев. Вы можете использовать файл typings только с TypeScript.

Если вы посмотрите на файл с именем package.json в разделе devDependencies , вы заметите, что мы уже включили TypeScript и файл типизации Figma.

Npm позволяет нам установить все зависимости от package.json с помощью одной команды.

1. Откройте терминал в Visual Studio Code. Вы можете переключить вид терминала в разделе View > Terminal . Если вы хотите начать с нового терминала, перейдите к Терминал > Новый терминал .
2. В терминале введите npm install и нажмите Enter .

Если зависимости были установлены, в наших файлах не должно быть выделено ошибок. Вы также заметите новый раскрывающийся список в Проводнике под названием 9.0117 узлы_модули .

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

Настройка компиляции TypeScript

После установки зависимостей все, что нам осталось сделать, это убедиться, что TypeScript компилируется в JavaScript для запуска подключаемого модуля.

Поскольку плагины Figma запускаются в браузере, а браузеры поддерживают только JavaScript, main в нашем манифесте будет всегда указывать на файл JavaScript.

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

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

1. Нажмите Ctrl- Shift - B в Windows или Command - Shift 90 117 — B` для Mac.
2. Выберите watch-tsconfig.json

Запустите образец плагина

1. Откройте файл дизайна, который вы создали в настольном приложении Figma.
2. Перейдите к Плагины > Разработка , затем выберите имя вашего плагина.
3. Когда появится модальное окно плагина, нажмите Создать , чтобы запустить плагин.

Вы должны увидеть пять оранжевых прямоугольников на холсте.

Настройка завершена! Готовы начать программировать свой первый плагин? Посмотрите четвертое видео из нашей серии видеороликов «Создайте свой первый плагин».

Плагины Figma и FigJam | Plugin API

Plugin API позволяет вам получить доступ к содержимому файлов дизайна FigJam и Figma. В Plugin API файлы дизайна Figma и файлы FigJam обрабатываются как отдельные editorTypes .

Несмотря на то, что ряд функций, узлов и свойств являются общими для двух типов редакторов, виды выполняемых вами действий — и требуемые плагины — совершенно разные. В нашей статье «Сравните Figma и FigJam» рассматривается контекст и варианты использования для каждого типа файлов.

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

Неподдерживаемые функции

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

Рекомендуем ознакомиться с этими функциями. Даже если вы собираетесь создать условный плагин, который поддерживает действия как в файлах Figma, так и в файлах FigJam.

Только подключаемые модули FigJam

Если для параметра editorType установлено значение Только файлы FigJam, вы не сможете получить доступ к следующим функциям или методам:

Страницы

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

Компоненты

Файлы FigJam имеют свои собственные специальные стикеры, к которым вы можете получить доступ в файлах FigJam вместе с любыми компонентами из ваших активированных библиотек. Вы также можете вставлять целые проекты из файлов дизайна Figma в файлы FigJam. Вы сможете получить доступ к любым локальным стилям или экземплярам в этом файле.

Невозможно создавать новые компоненты в файле FigJam или комбинировать существующие компоненты в качестве вариантов. Вы не сможете использовать следующие функции:

• createComponent()
• combAsVariants()

Стили

При доступе к файлам FigJam через Plugin API вы можете получить доступ только к стилям, примененным к существующим узлам. Вы не сможете создавать локальные стили или управлять ими с помощью следующих функций:

• createPaintStyle()
• createTextStyle()
• createEffectStyle()
• createGridStyle()
• moveLocalPaintStyleAfter ()
• перемещениеLocalTextStyleAfter()
• moveLocalEffectStyleAfter()
• moveLocalGridStyleAfter()
• moveLocalPaintFolderAfter()
• moveLocalTextFolderAfter()
• moveLocalGridFolderAfter() 90 014

Плагины только Figma

Специальные узлы FigJam

Файлы FigJam имеют несколько определенных типов узлов, которые являются уникальными для этого типа файлов. Это типы узлов StickyNode, ShapeWithTextNode, ConnectorNode, MediaNode и TableNode.

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

Если вы установите для editorType только файлы Figma, вы не сможете получить доступ к следующим функциям, относящимся к этим узлам:

• ()
• figma.createCodeBlock()
• figma.createGif()
• figma.createTable(numRows, numColumns)

Таймер FigJam

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

Таймер специфичен для файлов FigJam. Вы не сможете получить доступ к функции figma.timer , если для параметра editorType установлено значение только Figma. Сюда входят любые события и свойства, связанные с этой функцией.

Узлы

Некоторые узлы и функции поддерживаются только в одном EditorType.