Агентство
интернет-маркетинга

 

ТОП-20 плагинов Figma

20.10.2022

Сложность: средняя

10 мин.

3 253

разные плагины для фигмы

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

Работа с текстом плагины для фигмы

 № 1. Fishtext in Russian. Рыбный текст, который создается путем генерации. При запуске плагина потребуется установить специальные опции, после чего инструмент сгенерирует текст. Как работает:

  • Запускаем плагин.

Fishtext in Russian

  • Появится всплывающее окно.
  • Выберите вариант на вопрос, что генерируем? Доступно следующее: предложение, абзац и заголовок. 

плагины для фигмы

При выборе первого пункта (предложения) устанавливаем ползунок, сколько предложений хотите создать 5, 10, 15. В итоге текст получится сплошной, без отступов. Если принципиально разбить текст на абзацы, то второй пункт устанавливает количество абзацев. Что касается заголовков, то здесь ползунок отсутствует, так как заголовок может состоять только из одного предложения. Если требуется делать одни только заголовки, то для этого есть специальный плагин Typeout

Когда требуется быстро заполнить интерфейс случайным контентом, Fishtext станет подходящим решением. 

№ 2. Text Prettier. Позволяет исправлять текст. Здесь подразумеваются те ошибки, которые довольно часто допускают при составлении текстов. Например, лишние пробелы или запятые, а также кавычки вместо елочек. 

Действия, которые нужно выполнить при правке текста. Выделите текст, который подлежит исправлению, мышкой. Щелкните по нему правой кнопкой мыши, перейдите в plugins, выбираем Text Prettier и ждем когда завершиться правка. 

Text Prettier плагин для фигма

Ниже предоставлен пример «до» и «после». 

Text Prettier плагин для figma

Инструмент позволяет быстро сделать текст аккуратным и правильно сформированным.  

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

SpellChecker плагин для figma

После этого появится всплывающее меню, там будет показана статистика количества слов, букв и ошибок. 

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

№ 4. Font Fascia. С помощью этого плагина вы сможете получить список всех шрифтов, которые используются в макете. Запускаем, во всплывающем окне и получаем список шрифтов и их количество использования в тексте. 

Font Fascia плагин для фигма

№ 5. Better Font Picker. Помощь при подборе шрифтов. В списке все шрифты идут списком и трудно понять, какого начертания шрифт, и насколько он подходит под выбранную стилистику. С помощью же Better Font Picker можно увидеть, как будет выглядеть текст в выбранном шрифте. Получается удобный предпросмотр, пример на картинке:

Better Font Picker плагин для фигма

Использовать этот plugin можно через опцию раскрывающийся список, который вызывается из главного меню.

Better Font Picker

№ 6. To Path, плагин текст по кругу. Иногда перед дизайном встает задача, сделать круговой текст. В этом случае поможет To Path. Это плагин фигма который делает текст по кругу. 

Что делаем? Рисуем примитив “круг”, пишем любой текст. Выделяем текстовое поле и круг, нажимаем правой кнопкой мыши и через контекстное меню выбираем plugin. Делаем настройки во всплывающем окне. 

To Path плагин фигма текст по кругу

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

плагин фигма текст по кругу

№ 7. Find and Replace. Название говорит само за себя. Поиск и замена. Плагин в текстовом поле ищет слово и заменяет его. 

Find and Replace

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

Плагины для figma — создание дизайна

№6. Batch Styler. Умеет менять стили, которые были созданы ранее. В несколько кликов можно поменять цвет, к примеру, у карточек товаров и посмотреть результат ко всем элементам, где используется одинаковый style. То же самое касается и шрифта, такие параметры как размер и “Family” меняются в несколько кликов. 

Batch Styler

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

Batch Styler плагин для figma

№ 8. Image Palette. При начальном этапе создания интерфейса, важно создать мудборд —  это коллекция изображений, которая будет использоваться  при создании будущего проекта. Обычно коллекция картинок оформляется в виде коллажа. 

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

Чтобы применить Image Palette добавьте изображение на рабочую область figma, потом щелкните по иллюстрации и выберите в меню нужный инструмент, как показано на скриншоте. 

Image Palette 

После все цвета будут собраны и отображены в виде кружков. 

Image Palette топ плагинов для фигмы 

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

№ 9. Color Compass. Занимается тем, что парсит цвет на оттенки. Воспользоваться им достаточно просто вызовите всплывающее окно, выберите цвет такого формата “#7b8385” и добавьте его в строку, после этого вы увидите результат. Вернемся к предыдущему примеру. Щелкаем по любому цветному кругу и в свойствах копируем цвет. 

топ плагинов для фигмы 

 Дальше добавляем в поле Color Compass и нажимаем Update Palette, получаем оттенки. 

Color Compass топ плагинов для фигмы 

№ 10. Blobs. Специальный плагин фигма фигуры, который создает пятно случайной формы. Каждый Blob уникален. Присутствует всего две настройки, Complexity — сложность и Uniqueness — уникальность. 

плагин фигма фигуры

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

Blobs плагин фигма фигуры

Для чего это может понадобиться? Например, украсить задний фон сайта или же создать начальный шаблон, куда будут добавляться элементы дизайна, картинки, а также применяться фильтры. Ниже пример как можно использовать Blobs, сделать форму и добавить туда картинку.

 

Чтобы создать форму, используя плагин фигма фигуры, нужно запустить Blobs, настроить опции во всплывающем окне и нажать Insert.  

Blobs настройки

№ 11. Webgradients, uiGradients и Mesh Gradient. Для создания привлекательного дизайна уместно использовать градиенты. Это позволяет придать проекту объемность.

градиенты пример

Существует два вида градиента линейный и радиальный. На сайте выше использовался линейный градиент. Для настройки цветовых переходов есть специальные плагины для фигмы. 

Webgradients. Ссодержит список градиентов. За пару кликов они могут быть наложены на примитив, будь то квадрат или круг. Чтобы воспользоваться Webgradients нажмите правой кнопкой мыши на примитив и в раскрывающемся списке выберите Plugins-> Webgradients. В сплывающемся окне щелкните по градиенту. Если вас не устраивает стандартный набор палитры вы всегда можете его изменить. Пример показан ниже. 

Webgradients

uiGradients. Как и предыдущий plugin обладает своей коллекцией градиентов. Вызывается через контекстное меню при щелчке правой кнопкой мыши по объекту.

Ниже пример панели управления uiGradients. 

uiGradients

Mesh Gradient. Умеет делать тонкую настройку градиентов. Достаточно мощный инструмент для работы с палитрами. Перемешивает цвета, полученный результат генерируется и размещается на холсте. Ниже панель опций.

Mesh Gradient

  1. При нажатии на этот маркер открывается палитра, удерживая кнопку мыши, следует ввести по ней и таким образом перекрашивать область вокруг кружка. 
  2. Точки, расположенные с четырех сторон, позволяют выполнять более тонкую настройку, а именно переходы между оттенками.
  3. Colors — меняет цвета по углам градиентного поля. Рядом находится опция, которая  устанавливает количество маркеров перемешивания. По умолчанию 2x2 (т.е. 4), можно так же 3x3 (9) или 4x4(16).
  4. Контроль видимости. Открывает доступ к дополнительным параметрам — Handles перемещает основные маркера, Lines показывает линии, которые действуют, как кривая безье, когда один из четырех точек маркера меняет позицию, линия становится извилистой. 
  5. Generate — создает объект на холсте. Готовый градиент можно сохранить, если нажать на “Save”, после чего он добавится в общую коллекцию.

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

№ 12. Figma дополнительные плагины  для дизайна. При графическом оформлении сайта или приложения довольно часто требуется заполнить пустое пространство или же выделить важное место, чтобы сконцентрировать внимание клиента. Здесь на помощь приходит дополнительные плагины Figma.

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

Logo creator. Когда нужно создать логотип и поместить в специально отведенное место, но сам лого пока отсутствует, то библиотека Logo Creator подойдет для временного использования. Здесь собраны логотипы известных брендов.

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

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

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

Bootstrap Icons figma дополнительные плагины

Vectary 3D elements. Набор 3d графических моделей, которые можно повернуть под разным углом и добавить в проект. Каждую модель можно редактировать менять цвет и даже обернуть ее в текстуру (Skin). Пример ниже.

Vectary 3D elements figma дополнительные плагины

№13. UI Faces. При оформлении страницы отзывов, довольно часто требуется вставить фотографию пользователя. С этой задачей справится UI Faces. В панели настроек доступны опции, которые позволяют сделать отбор фотографий по определенным параметрам. Возраст, пол, цвет волос, эмоции (улыбка или нейтральная). 

UI Faces figma дополнительные плагины

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

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

№ 14. Charts (диаграмма). На крупных предприятиях все бизнес процессы отображаются в диаграммах. Чтобы создать страницу аналитики, где будут показаны диаграммы потребуется специальный плагин для фигмы, в этом случае поможет charts. Он умеет генерировать как случайный данные, так и получать их из внешних источников, например из CSV-документа. Как пользоваться? Запускаете плагин.

Charts плагин 

Во всплывающем окне меняете параметры  и нажимаете кнопку «Add chart». После диаграмма будет помещена в проект. У каждой линии можно поменять цвет. В Charts существует много разных опции, здесь вы можете выбрать стиль диграммы. Один из примеров диаграммы на картинке.

Charts плагин для фигма

№ 15. Easometric и Isometric. Эти плагины умеют поворачивать элементы под определенным углом. Способ применения — открываете Isometric, появится окно, вводите значение и нажимаете одну из кнопок Perspective (в какую сторону повернуть).

Isometric плагин для figma

Выше на картинке Isometric, а вот наглядный интерфейс Easometric. Поворот с помощью четырех кнопок. 

Easometric плагин для фигма

Эти кнопки также доступны в контекстном меню, там находится ссылка на открытие окна и  в том же разделе доступно Isometric.

плагины для фигмы

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

Isometric пример

Адаптивность

Теперь перечислим плагины для figma решающие проблему адаптивности. 

№ 16. Viewports. Создает макеты под разные цифровые устройства. Plugin запускается через главное меню. Откроется окно шаблонов, здесь указаны размеры, а также показано в процентах, сколько используется данного экрана под определенную операционную систему.  

Viewports адаптивность

Дизайнер может выбрать не только тип устройства (Mobile, Desktop или Tablet), но и местность Asia, Europe, America и т.д.

Дополнительные функции:

Generate (desktop, mobile, tablet) views — генерирует несколько шаблонов, что позволяет разрабатывать макеты сразу под несколько устройств. Для того чтобы воспользоваться этой функцией выберите стартовый фрейм нажмите на кнопку, например Generate mobile views и фреймы сгенерируются автоматически.

Show data — показывает данные, тип устройства и страну. При щелчке по любому из шаблонов, он будет добавлен автоматически. 

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

плагины для figma

Если все сделано правильно, то по кнопке Clone можно щелкнуть и клонировать объект. При тестировании удалось клонировать одиночный объект.

Component Cloner

№ 18. Quantizer. Предназначен для быстрой перестановки и упорядочивании слоев. Например в фрейме разбросаны элементы. Quantizer сумеет выстроить все слои по порядку. 

Условие, при котором Quantizer начнет перестановку, это наличие фрейма, где размещены товары. Щелкаете по фрейму правой кнопкой мыши, из меню выбираете plugin. 

Quantizer

Открывается окно, меняете настройки и нажимаете Change. После этого объекты будут упорядочены и выстроены по порядку, и не придется все делать вручную. Всего пару кликов и готово. Результат смотрите ниже до и после.

Quantizer плагин figma

№ 19. AutoLayout. Тоже делает упорядочивание. Только процесс проходит автоматически, при изменении шаблона. Отличная демонстрация того, как дизайн будет смотреться под разные устройства.

Здесь много настроек.

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

Padding — делает отступы от края фрейма. Значения указывается в пикселях. Основные параметры, Top (сверху), Right (справа), Left (слева), Bottom (снизу).

Horizontal, Vertical — меняет местоположение сразу группы объектов. Например, разместить их в центре, справа, слева, сверху, снизу.

Width и Height — каждый из них принимает два параметра “Высоту и Ширину”, а также Resize To Fit, расположение на всю рабочую область фрейма. Соответственно, отсутствует возможность менять размер макета.

AutoLayout плагин figma

№ 20. Auto Flow. Установка связей между макетами. Запускаем плагин. Удерживая клавишу Shift, щелкаем по одному макету, потом по другому. Связь будет установлена, дополнительные настройки, это толщина линии, цвет и закругление. 

Auto Flow плагин figma

Чтобы изменить свойства связи нужно щелкнуть по линии. Доступно несколько полей для редактирования. После изменения одного поля следует нажать Enter, тогда новые параметры вступят в силу.

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

Если нужно сделать адаптивность? Пожалуйста! Пару кликов и ваш шаблон отлично смотрится под все цифровые устройства. Собрать мудбоард, для будущего дизайна, нет проблем вместо пипетки запустить плагин для фигма и он все сделает автоматически. 

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

Готовы пообщаться?Готовы пообщаться?Готовы пообщаться?

Комментарии

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Кейсы