Для Figma написан целый легион плагинов на все случаи жизни. Постоянно появляются рейтинги и топ-листы супер-пупер-мега-лучших. Но этот инструмент используют люди разных конфессий, решая разные свои задачки. Рыцари фриланса рисуют лендинги, студийные братья собирают промо-сайты, еретики даже визитки и плакаты пытаются делать в Figma. И для всех есть свои плагины. Поэтому делать общий топ-100 — пустое занятие.
![](https://habrastorage.org/getpro/habr/upload_files/d2a/397/7a4/d2a3977a49a932e3e986ef232096b1d8.png)
Но можно накидать локальный местечковый топчик для продуктового дизайнера например. В нём не будет плагинов в духе «смотрите, какая любопытная идея» или «если вдруг вам когда-нибудь понадобится заменить все картинки на фото Николаса Кейджа». Только ежедневные трудяги. Я уверен, этот список будет полезен не только UI-дизайнерам и сочувствующим. Что-то полезное найдут для себя и все остальные фанаты Figma.
В конце статьи будет ссылка на видео-инструкцию.
Иерархия библиотек в Ozon
Я служу рядовым разработчиком интерфейсов в Ozon, где наша маленькая, но гордая команда занимается внутренними продуктами компании. Всяческие админки и CRM-ки. Впрочем, и до основного сайта мы дотягиваемся.
Работа в нашей команде строится по следующей схеме: для каждой Job или User Story мы делаем отдельный файл с элементарным линейным сценарием. Там мы собираем экраны, пройдя которые пользователь решает свою задачу. В таких сценариях, конечно же, появляются повторяющиеся паттерны, которые можно переиспользовать в других User Story и они достойны переноса в отдельную сценарную библиотеку. Этот подход позволяет не раздувать файлы, держать всю систему под контролем и достаточно свободно вносить правки, затрагивающие множество сценариев.
Сейчас у нас в Ozon есть несколько типов библиотек:
Атомарные токены дизайн-системы.
Молекулярные библиотеки с элементами интерфейса. Из них собираются экраны сценариев.
Сценарные библиотеки, в которые попадают проектные организмы. Оттуда мы можем централизованно использовать их в других сценариях. Повторюсь, разговор не только про сайт ozon.ru — компании нашего масштаба имеют огромное количество внутренних продуктов, которые также подчиняются единой дизайн-системе.
![Библиотечная иерархия Библиотечная иерархия](https://habrastorage.org/getpro/habr/upload_files/f60/616/262/f6061626216be6f8dc107a45cbbb9f7e.png)
Рабочие лошадки и удобные пони
Но хватит зауми! Вперёд к хит-параду. И да, тут будут представлены и платные сокровища, но что значат деньги, когда дело касается Продукта и Продуктивности.
Master
![](https://habrastorage.org/getpro/habr/upload_files/b3f/e87/261/b3fe872612d53de36276c34641d48936.png)
Этот плагин достоин носить джедайское звание Мастер. Сложно переоценить, сколько времени он сэкономил нашей команде. Я уже рассказывал о нём на своём YouTube-канале, а сегодня подчеркну его полезность для продуктовой работы. Мало того, что он умеет перелинковывать инстансы к новому мастер-компоненту, сохраняя все оверрайды, так он ещё может делать это с библиотечными компонентами.
![](https://habrastorage.org/getpro/habr/upload_files/9e2/751/e9a/9e2751e9a514b0dbb06ac6b8ba53eec7.png)
Тут у нас типичная ситуация. Форма собрана из молекулярных библиотечных компонентов. Спроектированы разные её состояния. Становится понятно, что она достойна быть добавленной в сценарную библиотеку. Если делать это штатными средствами, придётся перенастраивать кучу экранов. Но у нас есть Master.
Копируем одну из форм и вставляем её в сценарную библиотеку. Делаем компонент и публикуем. Запускаем команду Pick Target Component
из арсенала плагина Master. Возвращаемся в файл сценария и выделяем все наши формы. Запускаем команду Link Objects to Target Component
.
Да пребудет с тобой сила, Master!
Design System Organizer
![](https://habrastorage.org/getpro/habr/upload_files/294/c72/a98/294c72a981c081e6c3154ac23c34ba3c.png)
В народе DSO. Крутейший комбайн по управлению стилями и компонентами. Кроме удобной системы организации стилей по папкам, переименованию и дублированию, DSO умеет перелинковывать стили и компоненты на библиотечные. Причём не по одному компоненту, а массово. Может экспортировать и импортировать стили между файлами. Всё это позволяет, достаточно безболезненно переезжать между версиями дизайн-системы, дублировать библиотеки и проворачивать всякие эксперименты.
![](https://habrastorage.org/getpro/habr/upload_files/c99/7ce/908/c997ce908e3154a03232617fc5a26108.png)
Тут у нас локальные цветовые и типографские стили. Надо привязать их к таким же библиотечным. Идём в библиотеку и запускаем DSO. Заходим в цветовые стили, выделяем нужную группу и выбираем из выпадающего меню Set As Target
. Возвращаемся в наш файл, запускаем DSO и выбираем Relink Styles
. Бум! Стили теперь тянуться из командной библиотеки. Таким же образом перелинковываем другие стили или компоненты.
Style Organizer
![](https://habrastorage.org/getpro/habr/upload_files/43b/10c/9f7/43b10c9f74716d8289417949fd809a58.png)
Этот штепсель помогает не ударять в грязь лицом перед разработчиками. Проверяем, откуда тянутся стили. Ловим нестильные шейпы и тексты. Чиним в ручном или автоматическом режиме. Соответствуем высоким стандартам разработки Ozon и ублажаем личного беса-перфекциониста.
![](https://habrastorage.org/getpro/habr/upload_files/824/a3e/87b/824a3e87b9d72140909634fcd5bdc916.png)
Вот тут у нас типичная ситуация. На глазок всё в порядке, но так ли это? Стартуем Style Organizer. И видим, что один из чёрных квадратов имеет локальный стиль, второй — библиотечный, а третий — вообще без стиля. Можно пробежаться по списку ошибок в ручном режиме, «сшивая» стили, а можно нажать Auto Fix Color
и Style Organizer будет действовать сам.
Similayer
![](https://habrastorage.org/getpro/habr/upload_files/eff/245/891/eff245891f84a8f7f066cbfa73d046a3.png)
Все знают об этом замечательном плагине. Но не упомянуть его было бы нечестно, ведь мы говорим о лучших. Он может выделить почти всё, что угодно по множеству признаков.
![](https://habrastorage.org/getpro/habr/upload_files/983/9ce/c50/9839cec508c8f670849dcfb0494b1f0b.png)
Давайте выделим слово Zen синего цвета, вне зависимости от стиля текста. Выделяем один синий Zen и запускаем Similayer. Выбираем параметры Fill Style
и Text Characters
.
Удобненько!
Instance Finder
![](https://habrastorage.org/getpro/habr/upload_files/c31/81e/477/c3181e477e9af052fdb50a4e0cdda658.png)
Ищет и выделяет только инстансы. Зато делает это шустрее Similayer и работает по всему документу, а не по одной странице.
![](https://habrastorage.org/getpro/habr/upload_files/8fd/3ee/5ac/8fd3ee5acc3ad61cba811b5721e9d919.png)
Выделяем мастер или любой из инстансов и запускаем поиск. Можно сразу выделить все найденные на странице инстансы.
Select Layers
![](https://habrastorage.org/getpro/habr/upload_files/fe3/de4/444/fe3de4444786187830d23295890ea2e1.png)
Ещё один незаменимый выделятель. Чаще всего ловлю им слои по названию (он поддерживает частичное вхождение запроса). В отличии от Similayer, Select Layers не требует выделять образец для поиска соответствия и, что крайне важно, может искать только в выделенном.
![](https://habrastorage.org/getpro/habr/upload_files/7b3/aff/a97/7b3affa97a9424291bb980d10d63d404.png)
Вот тут у нас мега-вариант инпута. Выделяем поля пароля и запускаем плагин. Пишем название нужного слоя — и вуаля! Можем поменять иконку, например.
Sorter
![](https://habrastorage.org/getpro/habr/upload_files/f5a/e20/dda/f5ae20ddacc0f03692093f29b3456318.png)
Часто возникает необходимость пронумеровать экраны. Чтобы цифры шли по порядку, фреймы должны быть в нужной последовательности в панели слоёв. Sorter может отсортировать их по положению на листе (и не только). После чего их можно переименовать штатными средствами.
![](https://habrastorage.org/getpro/habr/upload_files/fed/6ae/4fb/fed6ae4fb7ea6ed256ed49ef165064bd.png)
Если попытаться пронумеровать экраны, не расставив их в панели слоёв, получим хаос. Ну ок. Выделяем все экраны, запускаем команду Sort Position
и после этого уже штатный Rename Selection
.
Порядочек.
Quantizer
![](https://habrastorage.org/getpro/habr/upload_files/714/8a4/df6/7148a4df621e33636a25ff8b84c331d0.png)
Расставляет элементы в сетку с заданным количеством колонок и отступами. Сильно помогает в работе над вариантами.
![](https://habrastorage.org/getpro/habr/upload_files/1c6/b83/524/1c6b8352457dc8ce5a9e565f721ca7d8.png)
Выделяем, что нужно, и стартуем Quantizer. Сделаем колонки с отступами по 40 px.
Кстати, вы знали, что можно таскать объекты в сетке за круглые маркеры в центре? А менять отступ, хватаясь за маркеры между? Если делать это с Shift
, шаг будет кратен вашему Nudge Amount.
Swap
![](https://habrastorage.org/getpro/habr/upload_files/8bc/c9c/9a3/8bcc9c9a3fb0633f6fb2a8116c8e1aae.png)
Плагин, достойный горячей клавиши. Меняет между собой два любых объекта. Выставляет по координатам верхнего левого угла.
![](https://habrastorage.org/getpro/habr/upload_files/7a9/c16/75a/7a9c1675a7234d59a6ce0b3d48d96cb3.png)
Выделяем два объекта, запускаем команду Swap и, собственно, всё.
Layer Counter
![](https://habrastorage.org/getpro/habr/upload_files/1e3/a0c/bf8/1e3a0cbf87d74d99b75ef68ad011b1ac.png)
Карманный бухгалтер для ваших макетов. Подсчитает всё и вся. Выделяем, запускаем. Наслаждаемся статистикой.
![](https://habrastorage.org/getpro/habr/upload_files/d94/537/6ef/d945376ef9d7eda404b8a712e6ffe685.png)
Если снять галку Include Nested Layers
, увидим только количество выделенных фреймов.
Retextifier
![](https://habrastorage.org/getpro/habr/upload_files/826/741/5fd/8267415fd9433b513c1e2f6b306eb9d5.png)
Может массово заменять текст в выделенных блоках. Но есть досадный недочёт при работе в Windows — лишний перевод строки, с которым можно бороться внешними средствами, заменив символ \n
на \r
или прогнав текст через сам плагин.
Замечательный инструмент, если умеешь им пользоваться и у тебя macOS.
![](https://habrastorage.org/getpro/habr/upload_files/165/943/f9b/165943f9ba0760ebabe436d392b8c142.png)
На macOS: копируем текст, например, колонку из Google-таблицы. Выделяем целевые текстовые слои и запускаем плагин. Вставляем текст комбинацией Cmd+Shift+V
.
Если у вас Windows, действуем немного сложнее. Сначала вставляем скопированный текст в файл Figma. Выделяем его, запускаем Retextifier, копируем и тут же вставляем текст, жмём Change
. Копируем изменённый текст, далее действуем как на macOS. Надеюсь, автор плагина что-то придумает по поводу этого недоразумения.
Copy and Paste Text
![](https://habrastorage.org/getpro/habr/upload_files/b23/ded/178/b23ded178a73ea404fc16cfe2566966f.png)
В отличие от предыдущего, этот плагин вставляет во все выделенные слои одинаковый текст из буфера. Безусловно полезно.
![](https://habrastorage.org/getpro/habr/upload_files/019/d61/84d/019d6184d1cf4d48e0f088cc231c33da.png)
Копируем нужный текст, выделяем целевые слои, запускаем команду Paste Text
.К
Find & Replace
![](https://habrastorage.org/getpro/habr/upload_files/0ea/553/112/0ea5531123f85c301034630abf324f1f.png)
Поиск и замена по текстовым слоям с поддержкой регулярных выражений (Regex). Для тех, кто умеет в регулярки и понимает, как это круто.
![](https://habrastorage.org/getpro/habr/upload_files/ad9/ee1/7d3/ad9ee17d32fa68beceb9de3c4c978746.png)
Сейчас мы поменяем местами буквы и цифры. Запускаем плагин, включаем поддержку Regex и пишем регулярное выражение. Найти (.*)-(.*)
и заменить на $2-$1
.
Мистика!
Nisa Text Splitter
![](https://habrastorage.org/getpro/habr/upload_files/ed0/986/076/ed0986076740a41c2436cc9b531d959d.png)
Разрезает текстовый блок на строки, сортирует, сшивает, расставляет буллиты и многое другое. Рекомендую.
![](https://habrastorage.org/getpro/habr/upload_files/4ac/2ce/59a/4ac2ce59a0dc2abf7d8f40a9eaa31fa1.png)
Давайте расставим фильмы по хронологии. Запускаем Nisa Text Splitter и режем наш блок на строчки. Сортируем по алфавиту — Sort by alphabet
и сшиваем обратно в один блок —Join text
. Внутри плагина ещё много другой годноты. Например, сразу делать Auto Layout из нарезанного текста.
Change Text to Layer Name
![](https://habrastorage.org/getpro/habr/upload_files/f4b/6e6/676/f4b6e667629b4bfeee677a6dec31b6ce.png)
Не самый необходимый штепсель, но частенько выручает. Меняет текст на название слоя. Использую в связке со штатным Rename Selection.
![](https://habrastorage.org/getpro/habr/upload_files/d89/086/f46/d89086f46ae311fdd6b5ab3a6d145458.png)
Выделяем текстовые блоки, применяем Rename Selection, оставляем старое название, добавляем к нему дефис и номер. Запускаем команду Change Text to Layer Name
.
Математично!
Data Roulette
![](https://habrastorage.org/getpro/habr/upload_files/68c/783/d39/68c783d3919c0ddb4b5f143205c9d0dd.png)
Когда работаешь над продуктом, у тебя есть постоянно используемые наборы данных. Эти наборы накапливаются и кочуют из продукта в продукт. Data Roulette позволяет хранить их в Google-таблицах и рандомно заполнять ими макеты. И текстами, и фотками.
![](https://habrastorage.org/getpro/habr/upload_files/7f7/429/76d/7f742976d67460fea9f075e90a28d136.png)
Делаем Google-таблицу. Линк на неё добавляем в Data Roulette. Называем целевые слои в соответствии с названиями колонок таблицы поставив в начало решётку. Можно сделать это в мастер-компоненте. По мере необходимости добавляем в Google-таблицу новые колонки.
Рулетка рулит!
Content Reel
![](https://habrastorage.org/getpro/habr/upload_files/25c/56f/898/25c56f898284d17d74e14050543a1684.png)
Для того, кому лень возиться с Google-таблицами, Microsoft наплагинил Content Reel. Только нужно залогиниться. Тогда можно будет создавать свои наборы данных.
![](https://habrastorage.org/getpro/habr/upload_files/475/ecd/8ec/475ecd8ec4cf42c359e4e97bf7501681.png)
Тут всё просто. Выделяем целевые слои, выбираем свой или чужой набор данных, вставляем.
Copypasta
![](https://habrastorage.org/getpro/habr/upload_files/990/603/119/9906031190b474d6996cdf7c3796b7cb.png)
Очень часто нужно что-то добавить на все экраны сценария. В одно и то же место. И Copypasta прекрасно решает эту задачку.
![](https://habrastorage.org/getpro/habr/upload_files/6fb/65d/572/6fb65d5725ea682752698c9030f40513.png)
Выделяем нужную деталь, запускаем Copypasta, жмём Save selection
, выбираем целевые экраны, Duplicate Layers
.
Шикарно.
Safely Delete Components
![](https://habrastorage.org/getpro/habr/upload_files/4ae/263/9cb/4ae2639cbaea393826e9b683cdbcc3ce.png)
Как я рассказал в начале, мы стараемся не оставлять локальных компонентов в рабочем файле сценария. Всё должно тянуться из библиотек. Заканчивая работу, нужно подчистить за собой.
Safely Delete Components удаляет неиспользуемые мастер-компоненты. Но этот плагин нужно использовать с осторожностью. Не стоит запускать его в библиотеках.
![](https://habrastorage.org/getpro/habr/upload_files/3f7/7f2/60b/3f77f260b08a8e6b5f80bba6d86f54f1.png)
После переноса компонентов в сценарную библиотеку, выделяем компоненты локальные и запускаем Safe Delete
.
SBOL-Typograph
![](https://habrastorage.org/getpro/habr/upload_files/860/b68/ee1/860b68ee12847358c16c8d8be5bdf2cc.png)
Не забываем о правильной типографике. Кавычках-ёлочках, длинных и средних тире. В хорошем продукте всё должно быть прекрасно и грамотно. Этот плагин работает сразу по всему документу, без выделения текстового слоя, чем и примечателен.
![](https://habrastorage.org/getpro/habr/upload_files/ad8/fe3/f01/ad8fe3f0169279cbc63687056b40db8f.png)
Божечки-Ёжечки!
Хорошо, но где же тот самый плагин?
Конечно, это не полный список годноты. Я не ставил абсолютно все плагины и мог что-то упустить. К сожалению, механизмы каталогизации и сортировки в Figma Community оставляют желать лучшего. По сути их и нет вовсе. Поисковая строка да ранжирование по количеству установок. А популярность далеко не всегда результат качества. Поэтому ищите, ставьте, испытывайте и делитесь вашими рабочими лошадками в комментариях.
Всем удачи на продуктовом фронте!
P.S.: Видео-версию статьи можете посмотреть на моём YouTube-канале.
P.P.S.: Я серьёзно про комментарии.