что такое плагин в фигме

Плагины Figma — что это такое? Как установить? Как использовать?

Инструкция по плагинам в Figma для начинающих. Разбираем как с ними работать.

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

Что такое плагины в Figma и для чего они нужны?

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

Например перед вами стоит задача вставить изображение с сайта unsplash. Конечно вы можете зайти на этот сайт, найти там подходящую картинку, скачать её на рабочий стол или скопировать и затем вставить в Figma. Есть путь короче. Например с помощью плагина «Unsplash» это можно сделать буквально за пару кликов.

Есть плагины, которые позволяют вставлять иконки, иллюстрации, фотографии, делать таблицы, вставлять «Рыбу текст», создавать текст по кругу и т.д.

Как найти плагины в фигме?

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

Первый способ:

Чтобы найти нужные плагины перейдите во вкладку «Community». Затем нажмите на вкладку «Plagins». Внизу будет расположен список всех плагинов, от самых популярных.

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

Второй способ:

Вы можете использовать строку поиска, которая расположена сверху. Например если ввести слово «Icons», то найдете плагины с иконками.

Топ плагинов

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

Популярные плагины расположены в списке (как показано на рисунке выше) по убыванию. Рекомендую посмотреть на них обзоры (например на youtube). Также вы можете изучить информацию на нашем сайте. Мы отбираем только лучшие, которые сами используем в своей работе.

Как установить плагин в Figma

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

Чтобы установить плагин нажмите на кнопку «Install», напротив нужного представленного из списка.

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

Также добавить плагин в его описании. Там тоже есть кнопка «Install». В описание можно перейти выбрав какой-либо плагин из списка.

Как использовать плагины в Figma?

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

Как удалить плагины?

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

Удаление через вкладку «Community»

Для удаления плагинов перейдите во вкладку «Community», выберите вкладку «Plagins» и напротив того плагина, который хотите удалить нажмите кнопку «Delete».

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

Удаление через вкладку профиля

Удобно удалять плагины во вкладке профиля. Для этого нажмите на вашу аватарку сверху, слева. Перейдите во вкладку «Plagins». Там будет список всех установленных вами плагинов. Нажмите на иконку минуса, чтобы удалить не нужные.

Источник

Плагины в Figma. От идеи до 1000 инсталов

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

Внутри плагина вы можете сделать всё, что доступно разработчику на вебе. Ограничений в возможностях практически нет, кроме тех, что связаны с системой. К счастью, все они подробно описаны в документации. На тему технической реализации плагинов уже написано немало подробных статей, например здесь или здесь. Как дизайнерам продукта, нам со Львом Бруком захотелось пройти все этапы выпуска плагина от идеи и написания кода до продвижения и работы с фидбэком от реальных пользователей. Статья именно об этом.

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

Figma plugin weekend club

Началось всё со знакомства с Григорием Машковцевым. У него уже есть несколько своих плагинов, у некоторых из них по две-три тысячи активных пользователей. Есть, например, Thanos UI — плагин, который удаляет случайную половину из выделенных элементов.

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

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

Для себя мы составили чек-лист с основными этапами работы над плагином:

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

Мы использовали самую простую структуру: Not started/In progress/Completed. Мы разобрали наши задачи по тэгам: Code/Back/UI/Marketing, чтобы разделить задачи между собой. Не исключаю, что для более сложных плагинов, которые подразумевают кучу разных сложных активностей, подойдут другие подходы.

Идея плагина

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

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

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

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

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

Your plugin was approved

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

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

Какая же конверсия из просмотра в инстал?

Прямо сейчас в Figma нет никакой встроенной аналитики, чтобы узнать охват и конверсию в инстал. Но есть полезный инструмент Figma Plugin Stats, который помогает узнать чуть больше. Он собирает статистику по инсталам, лайкам и самое главное — просмотрам. Самое интересное, что количество просмотров можно увидеть по любому плагину, зная только profile handle его разработчика. В один день с нашим Hidden Kittens появился знаменитый плагин Blush от Pablo Stanley, у которого сейчас уже 36 000 инсталов. С помощью этого скрипта мы узнали, что его конверсия в инстал сопоставима с нашей. Больше, конечно, но не в 10 раз. Это значит, что у него просто больший охват. Получается, количество инсталов можно точно так же прогнозировать.

Монетизация

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

Ещё один вариант, который поможет заработать на плагине, если он будет пользоваться большой популярностью у подписчиков — ребята из Figma могут напрямую связаться с автором и совместными усилиями затащить эти функции прямо в Figma, в таком случае, сотрудничество оплачивается. Мы уточнили это у Tom Lowry на конференции London Figma Meetup, он подтвердил, что Figma очень заинтересована в таком сотрудничестве.

Однако, в будущем Figma планирует значительно упростить процесс создания и монетизации плагинов, сделать что-то вроде механики App Store.

Источник

TОП-40 плагинов Figma

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

Единственным недостатком Figma считали отсутствие плагинов, дополнительных инструментов, которые позволяли бы оптимизировать и автоматизировать некоторые рутинные задачи. Но ситуация изменилась и сейчас в Figma более 400 плагинов. Давайте рассмотрим самые интересные плагины, которые облегчат вам работу с дизайном.

Содержание

Autoflow

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

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

Avatars

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

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

BeatFlyer Lite

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

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

Blend

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

Этот инструмент помогает создать логотипы и паттерны (фоны) на основе экземпляра фигуры.

Blobs

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

Один из трендов современного дизайна – цветовое решение в виде капель (кривых Безье). Плагин «Blobs» помогает контролировать уникальность фигуры, количество точек и т.д.

Bullets

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

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

Chart

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

Плагин Chart позволяет создавать графики разнообразных форм. Работает как с рандомными данными, так и с данными клиента. Поддерживается копипаста из Google Sheet, Excel, Numbers, что значительно уменьшает время на обработку данных.

Charts

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

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

Chroma

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

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

Coda for Figma

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

С помощью этого плагина, вы сможете заполнять макеты данными из Wikipedia, Gmail, Github, Jira и т.д.

Color Kit

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

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

Content Buddy

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

Многие дизайнеры сталкивались с ситуацией, когда необходимо изменить одинаковый текст сразу в нескольких макетах. Раньше приходилось открывать каждый макет и отдельно и делать правку. Но плагин Content Buddy, позволяет организовать автоматическую правку одновременно в 50 макетах!

Content Reel

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

Этот плагин избавляет дизайнера от нужды придумывать «рыбный текст» для макета. Content Reel генерирует как текст, так и аватарки и имена пользователей, телефоны и адреса электронной почты, названия компаний и URL-адреса.

Design Lint

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

Многие дизайнеры знакомы с ситуацией, когда после сдачи макета, разработчики находят расхождения – несоответствие цветов, шрифтов, заливки и т.д. Design Lint избавляет дизайнера от таких ошибок. Он проверяет макет полностью и автоматически исправляет несоответствия. Инструмент работает динамически и учитывает при проверке уже внесённые дизайнером исправления.

Плагин позволяет работать над макетом, не зацикливаясь на ошибках и мелких помарках.

Design System Organizer

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

Этот инструмент позволяет сгруппировать элементы в удобном интерфейсе. Таким образом можно упорядочить структуру, без утомительной работы. А значит, дизайнер избавлен от необходимости прописывать вручную такие пути как «Иконки / Маленькие / Состояния / По умолчанию». Если вы переименуете название группы, то это название будет автоматически изменено для всех компонентов и стилей.

Dot Grid

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

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

Figmoji

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

С помощью плагина Figmoji можно добавлять различные Эмодзи в формате svg.

Figmotion

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

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

Font Scale

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

Это плагин для новичков в дизайне, которые ещё не приобрели навык автоматически, «на глаз», определять пропорции шрифтов. Font Scale позволяет быстро создать последовательную иерархию типографики.

Get Waves

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

С помощью плагина Get Waves вы сможете создавать собственные эффекты волн.

GiffyCanvas

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

Без этого плагина, дизайнеру приходится создавать изображения с расширением GIF в отдельной программе, а после загружать её в прототип. Плагин GiffyCanvas позволяет создать GIF прямо в Figma. Нужно только загрузить изображения, из которых должна получится гифка, и прописать чёткие параметры.

Humaaans for Figma

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

Добавив плагин Humaaans for Figma, вы получаете возможность пользоваться огромной библиотекой с иллюстрациями людей. С этими иллюстрациями можно работать прямо в Figma, комбинируя, создавая новые образы. Плагин позволяет менять причёски и одежду, добавлять разное окружение.

Image tracer

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

Плагин Image tracer поможет вам преобразовать растровые чёрно-белые изображения в кривые, чтобы получить возможность внести изменения. Подходит для тех, кто часто теряет исходники логотипов и иконок.

Isometric

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

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

LilGrid

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

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

LottieFiles

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

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

Mapsicle

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

В прототипе нужна карта? С плагином Mapsicle можно генерировать карты и вставлять в заданную область. При этом можно воспользоваться набором стилей и поиском по координатам.

Material Palette

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

Многие дизайнеры используют инструмент Material Design для создания палитр. Теперь создавать палитры можно прямо в Figma, экономя время и силы. Сейчас в плагине три типа палитр: True monochrome, Monochrome и Material.

Movie Posters

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

Movie Posters – полезный плагин для тех, кто занимается созданием сайта по тематике «Кино, ТВ и сериалы». В векторный объект, созданный дизайнером, подгружается постер фильма, сериала или ТВ-шоу, популярный на данный момент.

Palette

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

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

Status

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

Плагин Status позволяет помечать статус дизайна. Когда над макетом работают несколько разработчиков, бывает трудно понять – какие страницы уже готовы к реализации, а над какими ещё ведётся работа. Воспользуйтесь плагином Status, чтобы решить эту проблему.

Table Paste

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

Table Paste – ещё один табличный плагин, который позволяет перенести данные из Excel в стилизованные таблицы в Figma. Работать с ним достаточно просто – нужно создать свой стиль таблицы, а затем переносить данные из Excel, они автоматически стилизуются.

Themer

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

Дизайнеры знают, как много времени и нервов отнимают сложные макеты, когда требуется переключать темы. С помощью плагина Themer можно создавать «темы», закрепив за ними стили из библиотек. А затем по одному клику менять стили.

TinyImage Compressor

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

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

Translate

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

Плагин Translate помогает автоматически перевести интерфейс на выбранный язык. Пока количество языков ограничено, но у расширения огромный потенциал.

Tumble

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

Плагин Tumble добавит эффект гравитации и прибьёт объекты к нижней границе фрейма. Таким образом, можно быстро создать забавные паттерны, которые «работают благодаря силе Ньютона».

Unsplash

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

Плагин Unsplash интегрируется со стоковым сервисом и позволяет выбрать бесплатное стоковое изображение на любую тему. Можно использовать случайные снимки или поискать внутри расширения близкую по тематике.

Vector Maps

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

С помощью Vector Maps можно загрузить в макеты векторные карты. Для выбора страны или региона достаточно ввести название в поиск или выбрать на карте. Карта импортируется в Figma в виде отдельного фрейма.

Webgradients

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

В плагине Webgradients встроенный фильтр позволяет выбрать сочетания цветов для создания градиентов. Созданные градиенты можно добавить в избранное, чтобы, работая над разными страницами одного макета, экономить время на подборе.

Wire Box

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

Плагин Wire Box позволяет преобразовать макет высокой точности в варфреймы, помогая сосредоточиться на UX, а не на UI. Конечно, работать в системах hi-fi быстрее и проще, но иногда требуется вернуться в lo-fi. Изменение цвета прототипа на навязчивый розовый показывает, что прототип уже в варфрейме.

Вывод

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

Источник

Figma: плагины для продуктового дизайна. Локальный топчик с видео-инструкцией

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

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

Но можно накидать локальный местечковый топчик для продуктового дизайнера например. В нём не будет плагинов в духе «смотрите, какая любопытная идея» или «если вдруг вам когда-нибудь понадобится заменить все картинки на фото Николаса Кейджа». Только ежедневные трудяги. Я уверен, этот список будет полезен не только UI-дизайнерам и сочувствующим. Что-то полезное найдут для себя и все остальные фанаты Figma.

В конце статьи будет ссылка на видео-инструкцию.

Иерархия библиотек в Ozon

Я служу рядовым разработчиком интерфейсов в Ozon, где наша маленькая, но гордая команда занимается внутренними продуктами компании. Всяческие админки и CRM-ки. Впрочем, и до основного сайта мы дотягиваемся.

Сейчас у нас в Ozon есть несколько типов библиотек:

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

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигмеБиблиотечная иерархия

Рабочие лошадки и удобные пони

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

Master

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

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

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

Тут у нас типичная ситуация. Форма собрана из молекулярных библиотечных компонентов. Спроектированы разные её состояния. Становится понятно, что она достойна быть добавленной в сценарную библиотеку. Если делать это штатными средствами, придётся перенастраивать кучу экранов. Но у нас есть Master.

Да пребудет с тобой сила, Master!

Design System Organizer

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

В народе DSO. Крутейший комбайн по управлению стилями и компонентами. Кроме удобной системы организации стилей по папкам, переименованию и дублированию, DSO умеет перелинковывать стили и компоненты на библиотечные. Причём не по одному компоненту, а массово. Может экспортировать и импортировать стили между файлами. Всё это позволяет, достаточно безболезненно переезжать между версиями дизайн-системы, дублировать библиотеки и проворачивать всякие эксперименты.

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

Style Organizer

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

Этот штепсель помогает не ударять в грязь лицом перед разработчиками. Проверяем, откуда тянутся стили. Ловим нестильные шейпы и тексты. Чиним в ручном или автоматическом режиме. Соответствуем высоким стандартам разработки Ozon и ублажаем личного беса-перфекциониста.

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

Вот тут у нас типичная ситуация. На глазок всё в порядке, но так ли это? Стартуем Style Organizer. И видим, что один из чёрных квадратов имеет локальный стиль, второй — библиотечный, а третий — вообще без стиля. Можно пробежаться по списку ошибок в ручном режиме, «сшивая» стили, а можно нажать Auto Fix Color и Style Organizer будет действовать сам.

Similayer

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

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

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

Instance Finder

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

Ищет и выделяет только инстансы. Зато делает это шустрее Similayer и работает по всему документу, а не по одной странице.

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

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

Select Layers

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

Ещё один незаменимый выделятель. Чаще всего ловлю им слои по названию (он поддерживает частичное вхождение запроса). В отличии от Similayer, Select Layers не требует выделять образец для поиска соответствия и, что крайне важно, может искать только в выделенном.

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

Вот тут у нас мега-вариант инпута. Выделяем поля пароля и запускаем плагин. Пишем название нужного слоя — и вуаля! Можем поменять иконку, например.

Sorter

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

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

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

Quantizer

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

Расставляет элементы в сетку с заданным количеством колонок и отступами. Сильно помогает в работе над вариантами.

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

Выделяем, что нужно, и стартуем Quantizer. Сделаем колонки с отступами по 40 px.

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

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

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

Выделяем два объекта, запускаем команду Swap и, собственно, всё.

Layer Counter

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

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

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

Retextifier

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

Может массово заменять текст в выделенных блоках. Но есть досадный недочёт при работе в Windows — лишний перевод строки, с которым можно бороться внешними средствами, заменив символ \n на \r или прогнав текст через сам плагин.

Замечательный инструмент, если умеешь им пользоваться и у тебя macOS.

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

Copy and Paste Text

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

В отличие от предыдущего, этот плагин вставляет во все выделенные слои одинаковый текст из буфера. Безусловно полезно.

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

Find & Replace

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

Поиск и замена по текстовым слоям с поддержкой регулярных выражений (Regex). Для тех, кто умеет в регулярки и понимает, как это круто.

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

Nisa Text Splitter

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

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

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

Change Text to Layer Name

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

Не самый необходимый штепсель, но частенько выручает. Меняет текст на название слоя. Использую в связке со штатным Rename Selection.

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

Data Roulette

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

Когда работаешь над продуктом, у тебя есть постоянно используемые наборы данных. Эти наборы накапливаются и кочуют из продукта в продукт. Data Roulette позволяет хранить их в Google-таблицах и рандомно заполнять ими макеты. И текстами, и фотками.

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

Делаем Google-таблицу. Линк на неё добавляем в Data Roulette. Называем целевые слои в соответствии с названиями колонок таблицы поставив в начало решётку. Можно сделать это в мастер-компоненте. По мере необходимости добавляем в Google-таблицу новые колонки.

Content Reel

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

Для того, кому лень возиться с Google-таблицами, Microsoft наплагинил Content Reel. Только нужно залогиниться. Тогда можно будет создавать свои наборы данных.

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

Тут всё просто. Выделяем целевые слои, выбираем свой или чужой набор данных, вставляем.

Copypasta

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

Очень часто нужно что-то добавить на все экраны сценария. В одно и то же место. И Copypasta прекрасно решает эту задачку.

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

Safely Delete Components

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

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

Safely Delete Components удаляет неиспользуемые мастер-компоненты. Но этот плагин нужно использовать с осторожностью. Не стоит запускать его в библиотеках.

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

SBOL-Typograph

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

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

что такое плагин в фигме. Смотреть фото что такое плагин в фигме. Смотреть картинку что такое плагин в фигме. Картинка про что такое плагин в фигме. Фото что такое плагин в фигме

Хорошо, но где же тот самый плагин?

Конечно, это не полный список годноты. Я не ставил абсолютно все плагины и мог что-то упустить. К сожалению, механизмы каталогизации и сортировки в Figma Community оставляют желать лучшего. По сути их и нет вовсе. Поисковая строка да ранжирование по количеству установок. А популярность далеко не всегда результат качества. Поэтому ищите, ставьте, испытывайте и делитесь вашими рабочими лошадками в комментариях.

Всем удачи на продуктовом фронте!

Источник

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

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