Лучшие плагины Figma


06.03.2020 Время чтения - 6 минут 195

В настоящее время среди дизайнеров существует крошечный спор о том, какой инструмент лучше всего подходит для проектирования. Поскольку сложность дизайна возрастает ежедневно, самая большая битва ведётся между Sketch, Figma и Adobe XD.

Хороший, современный дизайн должен не только соответствовать стандартам, но также выполняться с максимальным качеством и в кратчайшие сроки.

На данный момент в Figma есть почти 420 плагинов. Они разрабатываются для облегчения работы и быстрого взаимодействия с инструментами.

В этой статье приведён список популярных и очень удобных плагинов для облегчения задачи дизайна.

Coda for Figma

Этот плагин работает с инструментом генерации документов под названием Coda. Благодаря этому плагину вы можете заполнить макеты данными из таких сервисов как: Spotify, Wikipedia, Dropbox, Gmail, Календарь Google, Jira, Shopify, Github и т. д.

LilGrid

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

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

LilGrid не меняет элементы вашего дизайна, а только размещает их на холсте.

Table Paste

Этот плагин будет очень полезен для тех, кому необходимо перенести данные из таблиц Excel в стилизованные таблицы, созданные в Figma.

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

Design System Organizer

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

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

Figma Dashboard UI kit

Данная библиотека Figma основана на многократно используемых шаблонах панели, тщательно отобранных из самых успешных приложений. Она содержит масштабируемые и ограниченные компоненты для ускорения разработки приложений, включая 550+ элементов дизайна, 48 полноразмерных шаблонов, 1000+ значков материалов.

Movie Posters

Отличный плагин от создателей Must App. Архиполезно для тех, кто хочет создать приложение или сайт, посвящённый фильмам и сериалам.

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

Dot Grid

Этот плагин для тех, кто любит работать с сетками. Добавьте некую привлекательность вашим сеткам в Figma с помощью Dot Grid. Вы можете настроить стили, поэкспериментировав с такими параметрами, как ширина, высота, размер, цвет и т.д.

GiffyCanvas

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

BeatFlyer Lite

Прекрасный инструмент! Этот плагин позволяет вам анимировать и добавлять впечатляющие эффекты вашим проектам всего несколькими щелчками мыши.

Благодаря BeatFlyer Lite ваши дизайны всегда будут выделяться среди других.

Color Kit

Этот плагин поможет вам генерировать цветовые градации. Если вы знакомы с Eva Design System, вам будет приятно работать с Color Kit в Figma, поскольку он выполняет аналогичную операцию, но вам не нужно выходить из приложения.

Vector Maps

Плагин Vector Maps позволяет загружать векторные карты стран, регионов и городов в макеты Figma.

Найти страну или регион довольно просто — выполнить поиск возможно по названию или выбрать на карте.

Webgradients

Этот мощный плагин генерирует красивые градиенты, которые помогут вашим проектам выглядеть потрясающе.

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

Figma iOS UI kit

Набор для разработки Figma iOS основан на проверенных и повторно используемых мобильных шаблонах, собранных из известных и успешных приложений. Он содержит более 240 светлых и темных адаптивных шаблонов, которые вы можете настраивать в соответствии со своей миссией.

LottieFiles

С LottieFiles вам открыты тысячи бесплатных анимаций, которые вы можете использовать в своих макетах в виде файлов GIF или кадров анимации в виде файлов SVG. Чтобы увидеть анимацию в действии, убедитесь, что вы используете «Прототип».

TinyImage Compressor

Этот плагин поддерживает не только сжатие и экспорт файлов разных размеров и форматов, но также оптимизацию прозрачных PNG и прогрессивных JPEG. При экспорте нескольких изображений плагин автоматически экспортирует их в виде ZIP-папки.

TinyImage Compressor платный, после 15 сжатий файлов вам будет предложено приобрести лицензию.

Design Lint

Прежде чем передать свою работу разработчикам, убедитесь, что ваши файлы дизайна соответствуют друг другу. Этот потрясающий бесплатный плагин с открытым исходным кодом для Figma проверяет расхождения в ваших макетах (то есть находит недостающие стили в ваших проектах во всех слоях — проверяет цвета, шрифты, эффекты, заливки, рамки) и исправляет несоответствия. Одна из замечательных особенностей плагина заключается в том, что он работает динамически, а это означает, что когда вы вносите исправления во время работы, Design Lint автоматически обновляется в соответствии с внесёнными вами исправлениями.

Отличный инструмент, который поможет вам сосредоточиться на процессе проектирования, а не на исправлении ошибок.

 Autoflow

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

Blobs 

Теперь вы можете использовать плагин Blobs для создания органических форм капель. Сгенерированные фигуры являются SVG и основаны на кривых Безье, так, что вы с легкостью можете настроить их.

Content Reel

Использование Lorem Ipsum в качестве текста-заполнителя — знакомое явление в мире дизайна. Он дает представление наполненного контентом сайта, для понимания реальных масштабов и пропорций.

 Contrast

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

uiGradients

UiGradients — это огромная библиотека  350+ градиентов, которые вы можете добавить в один клик. Единственная опция, которая отсутствует — это возможность использовать углы градиента.

Font Scale

Если вы когда-либо испытывали трудности с созданием иерархии типографики, плагин Font Scale — это то, что вам нужно! Он генерирует размеры шрифта на основе выбранного базового размера.

Get Waves

Используя плагин Get Waves, вы легко сможете управлять сгенерированными волнами для вашего макета. У него довольно большая панель (по сравнению с другими плагинами), но выглядит она очень красиво и содержит много вариантов создания идеальной волны.

To Path

Используя плагин To Path, вы можете задать направление  текста или фигуры одним щелчком мыши, настраивая некоторые параметры пути на панели плагинов.

Feather Icons

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

Image Palette

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

Заключение

«Мне нравится проектировать и создавать инструменты, которые помогают дизайнерам работать быстрее и эффективнее, и, надеюсь, вдохновлять других делать то же самое». — Jackie Chui, UX Designer Microsoft

Источники:

10 Figma Plugins That Will Skyrocket Your Design Workflow

Best Figma plugins for 2020 which deserve your attention

Читайте также: Понимание правил композиции в UI