Для Figma написан целый легион плагинов навсе случаи жизни. Постоянно появляются рейтинги итоп-листы супер-пупер-мега-лучших. Ноэтот инструмент используют люди разных конфессий, решая разные свои задачки. Рыцари фриланса рисуют лендинги, студийные братья собирают промо-сайты, еретики даже визитки иплакаты пытаются делать вFigma. Идля всех есть свои плагины. Поэтому делать общий топ-100 пустое занятие.
Номожно накидать локальный местечковый топчик для продуктового дизайнера например. Внём небудет плагинов вдухе смотрите, какая любопытная идея или если вдруг вам когда-нибудь понадобится заменить все картинки нафото Николаса Кейджа. Только ежедневные трудяги. яуверен, этот список будет полезен нетолько UI-дизайнерам исочувствующим. Что-то полезное найдут для себя ивсе остальные фанаты Figma.
В конце статьи будет ссылка на видео-инструкцию.
Иерархия библиотек вOzon
Яслужу рядовым разработчиком интерфейсов вOzon, где наша маленькая, ногордая команда занимается внутренними продуктами компании. Всяческие админки иCRM-ки. Впрочем, идоосновного сайта мыдотягиваемся.
Работа внашей команде строится последующей схеме: для каждой Job или User Story мыделаем отдельный файл сэлементарным линейным сценарием. Там мысобираем экраны, пройдя которые пользователь решает свою задачу. Втаких сценариях, конечноже, появляются повторяющиеся паттерны, которые можно переиспользовать вдругих User Story иони достойны переноса вотдельную сценарную библиотеку. Этот подход позволяет нераздувать файлы, держать всю систему под контролем идостаточно свободно вносить правки, затрагивающие множество сценариев.
Сейчас унас вOzon есть несколько типов библиотек:
-
Атомарные токены дизайн-системы.
-
Молекулярные библиотеки сэлементами интерфейса. Изних собираются экраны сценариев.
-
Сценарные библиотеки, вкоторые попадают проектные организмы. Оттуда мыможем централизованно использовать ихвдругих сценариях. Повторюсь, разговор нетолько про сайт ozon.ru компании нашего масштаба имеют огромное количество внутренних продуктов, которые также подчиняются единой дизайн-системе.
Рабочие лошадки иудобные пони
Нохватит зауми! Вперёд кхит-параду. Ида, тут будут представлены иплатные сокровища, ночто значат деньги, когда дело касается Продукта иПродуктивности.
Master
Этот плагин достоин носить джедайское звание Мастер. Сложно переоценить, сколько времени онсэкономил нашей команде. Яуже рассказывал онём насвоём YouTube-канале, асегодня подчеркну его полезность для продуктовой работы. Мало того, что онумеет перелинковывать инстансы кновому мастер-компоненту, сохраняя все оверрайды, так онещё может делать это сбиблиотечными компонентами.
Тут унас типичная ситуация. Форма собрана измолекулярных библиотечных компонентов. Спроектированы разные её состояния. Становится понятно, что она достойна быть добавленной всценарную библиотеку. Если делать это штатными средствами, придётся перенастраивать кучу экранов. Ноунас есть Master.
Копируем одну изформ ивставляем её всценарную библиотеку. Делаем
компонент ипубликуем. Запускаем команду Pick Target
Component
изарсенала плагина Master. Возвращаемся вфайл
сценария ивыделяем все наши формы. Запускаем команду Link
Objects toTarget Component
.
Дапребудет стобой сила, Master!
Design System Organizer
ВнародеDSO. Крутейший комбайн поуправлению стилями икомпонентами. Кроме удобной системы организации стилей попапкам, переименованию идублированию, DSO умеет перелинковывать стили икомпоненты набиблиотечные. Причём непоодному компоненту, амассово. Может экспортировать иимпортировать стили между файлами. Всё это позволяет, достаточно безболезненно переезжать между версиями дизайн-системы, дублировать библиотеки ипроворачивать всякие эксперименты.
Тут унас локальные цветовые итипографские стили. Надо привязать
ихктакимже библиотечным. Идём вбиблиотеку изапускаемDSO. Заходим
вцветовые стили, выделяем нужную группу ивыбираем извыпадающего
меню Set AsTarget
. Возвращаемся внаш файл, запускаем
DSO ивыбираем Relink Styles
. Бум! Стили теперь
тянуться изкомандной библиотеки. Такимже образом перелинковываем
другие стили или компоненты.
Style Organizer
Этот штепсель помогает неударять вгрязь лицом перед разработчиками. Проверяем, откуда тянутся стили. Ловим нестильные шейпы итексты. Чиним вручном или автоматическом режиме. Соответствуем высоким стандартам разработки Ozon иублажаем личного беса-перфекциониста.
Вот тут унас типичная ситуация. Наглазок всё впорядке, нотакли
это? Стартуем Style Organizer. Ивидим, что один изчёрных квадратов
имеет локальный стиль, второй библиотечный, атретий вообще без
стиля. Можно пробежаться посписку ошибок вручном режиме, сшивая
стили, аможно нажать Auto Fix Color
иStyle Organizer
будет действоватьсам.
Similayer
Все знают обэтом замечательном плагине. Нонеупомянуть его былобы нечестно, ведь мыговорим олучших. Онможет выделить почти всё, что угодно помножеству признаков.
Давайте выделим слово Zen синего цвета, вне зависимости отстиля
текста. Выделяем один синий Zen изапускаем Similayer. Выбираем
параметры Fill Style
иText
Characters
.
Удобненько!
Instance Finder
Ищет ивыделяет только инстансы. Зато делает это шустрее Similayer иработает повсему документу, анепоодной странице.
Выделяем мастер или любой изинстансов изапускаем поиск. Можно сразу выделить все найденные настранице инстансы.
Select Layers
Ещё один незаменимыйвыделятель. Чаще всего ловлю им слои по названию (он поддерживает частичное вхождение запроса). В отличииотSimilayer, SelectLayersне требует выделять образец для поиска соответствия и, что крайне важно, может искать только в выделенном.
Вот тут унас мега-вариант инпута. Выделяем поля пароля изапускаем плагин. Пишем название нужного слоя ивуаля! Можем поменять иконку, например.
Sorter
Часто возникает необходимость пронумеровать экраны. Чтобы цифры шли попорядку, фреймы должны быть внужной последовательности впанели слоёв. Sorter может отсортировать ихпоположению налисте (инетолько). После чего ихможно переименовать штатными средствами.
Если попытаться пронумеровать экраны, нерасставив ихвпанели
слоёв, получим хаос. Нуок. Выделяем все экраны, запускаем команду
Sort Position
ипосле этого уже штатный Rename
Selection
.
Порядочек.
Quantizer
Расставляет элементы всетку сзаданным количеством колонок иотступами. Сильно помогает вработе над вариантами.
Выделяем, что нужно, истартуем Quantizer. Сделаем колонки сотступами по40px.
Кстати, вызнали, что можно таскать объекты всетке закруглые
маркеры вцентре? Аменять отступ, хватаясь замаркеры между? Если
делать это сShift
, шаг будет кратен вашему Nudge
Amount.
Swap
Плагин, достойный горячей клавиши. Меняет между собой два любых объекта. Выставляет покоординатам верхнего левого угла.
Выделяем два объекта, запускаем команду Swap и, собственно, всё.
Layer Counter
Карманный бухгалтер для ваших макетов. Подсчитает всё ився. Выделяем, запускаем. Наслаждаемся статистикой.
Если снять галку Include Nested Layers
, увидим
только количество выделенных фреймов.
Retextifier
Может массово заменять текст ввыделенных блоках. Ноесть досадный
недочёт при работе вWindows лишний перевод строки, скоторым можно
бороться внешними средствами, заменив символ \n
на\r
или прогнав текст через сам плагин.
Замечательный инструмент, если умеешь импользоваться иутебя macOS.
НаmacOS: копируем текст, например, колонку изGoogle-таблицы.
Выделяем целевые текстовые слои изапускаем плагин. Вставляем текст
комбинацией Cmd+Shift+V
.
Если увас Windows, действуем немного сложнее. Сначала вставляем
скопированный текст вфайл Figma. Выделяем его, запускаем
Retextifier, копируем итутже вставляем текст, жмём
Change
. Копируем изменённый текст, далее действуем как
наmacOS. Надеюсь, автор плагина что-то придумает поповоду этого
недоразумения.
Copy and Paste Text
Вотличие отпредыдущего, этот плагин вставляет вовсе выделенные слои одинаковый текст избуфера. Безусловно полезно.
Копируем нужный текст, выделяем целевые слои, запускаем команду
Paste Text
.К
Find & Replace
Поиск изамена потекстовым слоям споддержкой регулярных выражений (Regex). Для тех, кто умеет врегулярки ипонимает, как это круто.
Сейчас мыпоменяем местами буквы ицифры. Запускаем плагин,
включаем поддержку Regex ипишем регулярное выражение. Найти
(.*)-(.*)
изаменить на$2-$1
.
Мистика!
Nisa Text Splitter
Разрезает текстовый блок настроки, сортирует, сшивает, расставляет буллиты имногое другое. Рекомендую.
Давайте расставим фильмы похронологии. Запускаем Nisa Text
Splitter ирежем наш блок настрочки. Сортируем поалфавиту Sort
byalphabet
исшиваем обратно водин блок Join
text
. Внутри плагина ещё много другой годноты. Например,
сразу делать Auto Layout изнарезанного текста.
Change Text to Layer Name
Несамый необходимый штепсель, ночастенько выручает. Меняет текст наназвание слоя. Использую всвязке соштатным Rename Selection.
Выделяем текстовые блоки, применяем Rename Selection, оставляем
старое название, добавляем кнему дефис иномер. Запускаем команду
Change Text toLayer Name
.
Математично!
Data Roulette
Когда работаешь над продуктом, утебя есть постоянно используемые наборы данных. Эти наборы накапливаются икочуют изпродукта впродукт. Data Roulette позволяет хранить ихвGoogle-таблицах ирандомно заполнять ими макеты. Итекстами, ифотками.
Делаем Google-таблицу. Линк нанеё добавляем вData Roulette. Называем целевые слои всоответствии сназваниями колонок таблицы поставив вначало решётку. Можно сделать это вмастер-компоненте. Помере необходимости добавляем вGoogle-таблицу новые колонки.
Рулетка рулит!
Content Reel
Для того, кому лень возиться сGoogle-таблицами, Microsoft наплагинил Content Reel. Только нужно залогиниться. Тогда можно будет создавать свои наборы данных.
Тут всё просто. Выделяем целевые слои, выбираем свой или чужой набор данных, вставляем.
Copypasta
Очень часто нужно что-то добавить навсе экраны сценария. Водно итоже место. ИCopypasta прекрасно решает эту задачку.
Выделяем нужную деталь, запускаем Copypasta, жмём Save
selection
, выбираем целевые экраны, Duplicate
Layers
.
Шикарно.
Safely Delete Components
Как ярассказал вначале, мыстараемся неоставлять локальных компонентов врабочем файле сценария. Всё должно тянуться избиблиотек. Заканчивая работу, нужно подчистить засобой.
Safely Delete Components удаляет неиспользуемые мастер-компоненты. Ноэтот плагин нужно использовать состорожностью. Нестоит запускать его вбиблиотеках.
После переноса компонентов всценарную библиотеку, выделяем
компоненты локальные изапускаем Safe Delete
.
SBOL-Typograph
Незабываем оправильной типографике. Кавычках-ёлочках, длинных исредних тире. Вхорошем продукте всё должно быть прекрасно играмотно. Этот плагин работает сразу повсему документу, без выделения текстового слоя, чем ипримечателен.
Божечки-Ёжечки!
Хорошо, ногдеже тот самый плагин?
Конечно, это неполный список годноты. Янеставил абсолютно все плагины имог что-то упустить. Ксожалению, механизмы каталогизации исортировки вFigma Community оставляют желать лучшего. Посути ихинет вовсе. Поисковая строка даранжирование поколичеству установок. Апопулярность далеко невсегда результат качества. Поэтому ищите, ставьте, испытывайте иделитесь вашими рабочими лошадками вкомментариях.
Всем удачи напродуктовом фронте!
P.S.: Видео-версию статьи можете посмотреть намоём YouTube-канале.
P.P.S.: Ясерьёзно про комментарии.