UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Лучшие плагины Figma на 2020 год, которые заслуживают вашего внимания
Редакція
Редакція

Опубліковано

Лучшие плагины Figma на 2020 год, которые заслуживают вашего внимания

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

Не секрет, что сейчас Figma является одним из флагманов инструментов создания дизайнов и прототипов. Ее преимущество перед Adobe XD или Sketch заключается в том, что Figma – это онлайн-инструмент, который дает пользователю возможность работать и сотрудничать с другими людьми в режиме реального времени. Благодаря этому, а также благодаря ее замечательной функциональности и приятному интерфейсу многие пользователи Adobe XD, Sketch и InVision начали использовать Figma.

Однако у Figma был один большой недостаток, который заставлял пользователей, «мигрировавших» с других платформ, скучать по предыдущим инструментам – это отсутствие плагинов. Эту функцию требовали многие пользователи Figma, потому что иногда им приходилось использовать сторонние приложения, что, очевидно, было не очень удобно. Мы, как дизайнеры, стремимся сделать нашу жизнь и жизнь других людей проще, и мы ищем различные способы и инструменты, которые помогут нам стать более эффективными, а также улучшить и ускорить наш рабочий процесс.

А в августе 2019 года все изменилось – после нескольких недель закрытого бета-тестирования Figma наконец объявила о запуске плагинов в своей системе. Сотрудники Figma говорят, что у них была идея добавить плагины еще 2 года назад, и, что все это время они были заняты доведением API до ума, чтобы обеспечить бесперебойную работу плагинов внутри системы.

Преимущества использования плагинов

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

На данный момент для Figma есть почти 420 плагинов. Да, они добавляются почти каждый день. Замечательный момент заключается в том, что они разрабатываются не сотрудниками компании, а обычными людьми, такими как вы и я. Все верно, если вы знаете популярные языки программирования и можете создать интересный плагин, тогда все сообщество Figma будет радо увидеть ваш продукт!

Есть и минусы

Хотя Figma, по нашему мнению, превосходит Sketch во многих отношениях, Sketch по-прежнему побеждает в области плагинов. Основная причина в том, что плагины Figma в текущем состоянии не позволяют отправлять обратно в систему измененные данные в режиме реального времени. Это ограничение является значительным и делает плагины Figma более слабыми, чем плагины Sketch.

Давайте начнем!

Топ-16 плагинов Figma собранных командой Setproduct

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

Coda for Figma

https://www.figma.com/community/plugin/738264841927149297/Coda-for-Figma

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

Это относительно новый плагин, но он быстро набирает популярность в сообществе.

LilGrid

https://www.figma.com/community/plugin/795397421598343178/LilGrid

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

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

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

Table Paste

https://www.figma.com/community/plugin/781208362060364436/Table-Paste

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

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

После этого в Excel нужно выбрать данные и скопировать их в таблицу Figma. Вуаля, ваша таблица Excel теперь стилизована под Figma.

Design System Organizer

https://www.figma.com/community/plugin/802579985985331070/Design-System-Organizer

Если вы работаете над созданием дизайн-системы , вероятно, у вас есть компоненты и стили, названия которых организованы примерно так: «Buttons / Small / States / Default».

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

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

Movie Posters

https://www.figma.com/community/plugin/797471678566755597/Movie-Posters

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

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

Dot Grid

https://www.figma.com/community/plugin/795474715778185230/Dot-Grid

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

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

GiffyCanvas

https://www.figma.com/community/plugin/803633147991628761/GiffyCanvas

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

BeatFlyer Lite

https://www.figma.com/community/plugin/776923340646658146/BeatFlyer-Lite

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

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

Color Kit

https://www.figma.com/community/plugin/797696673804519719/Color-Kit

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

И если вы знакомы с Eva Design System – сторонним приложением, которое генерирует цвета, вам понравится этот плагин, поскольку он выполняет аналогичную функцию, но вам не нужно покидать Figma.

Material Palette

https://www.figma.com/community/plugin/799767414861565467/Material-palette

Этот плагин был создан для фанатов Material Design, которые любят создавать Material палитры. Теперь, экономя свое время, вы можете создавать палитры прямо в Figma.

Вам доступны 3 типа палитр: Material, Monochrome и True monochrome. Мы надеемся, что в следующем обновлении Google обновит эту палитру, потому что некоторые цвета содержат огромные промежутки и требуют балансировки.

Wire Box

https://www.figma.com/community/plugin/764471577604277919/Wire-Box

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

Vector Maps

https://www.figma.com/community/plugin/777954172157933782/Vector-Maps

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

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

Векторная карта будет импортирована в Figma в виде отдельного фрейма.

Webgradients

https://www.figma.com/community/plugin/802147585857776440/Webgradients

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

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

LottieFiles

https://www.figma.com/community/plugin/809860933081065308/LottieFiles

На момент написания этой статьи этот плагин был добавлен в систему Figma всего 5 дней назад, но сразу попал в топ-3 нашего рейтинга, поскольку его установили более 1000 пользователей. Если это не показатель качества плагина, что тогда?

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

TinyImage Compressor

https://www.figma.com/community/plugin/789009980664807964/TinyImage-Compressor

Вы можете использовать этот плагин при экспорте изображений. Он сжимает размер ваших файлов до 90% лучше, чем экспорт по умолчанию из Figma. Этот плагин обладает множеством интересных функций: он поддерживает не только сжатие и экспорт файлов разных размеров и форматов, но также оптимизацию прозрачных PNG и прогрессивных JPEG файлов. TinyImage Compressor запоминает настройки во время экспорта. При экспорте нескольких изображений плагин автоматически экспортирует их в виде ZIP-папки.

У него есть ограничения – после 15 сжатий файлов через TinyImage вам будет предложено приобрести лицензию.

Design Lint

https://www.figma.com/community/plugin/801195587640428208/Design-Lint

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

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

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

Мы выбрали LottieFiles, TinyImage Compressor и Design Lint в качестве лидеров сегмента плагинов в январе-феврале, потому что эти инструменты очень популярны в сообществе Figma с начала 2020 года. Люди часто их используют, и определенно количество их установок будет продолжать расти.

Вот и все. Обязательно зайдите на Setproduct.com, чтобы узнать о великолепных дизайн-системах Figma и других шаблонах. Следите за обновлениями!


Перевод статьи uxdesign.cc

Топ коментарі (0)