20 плагинов Figma, которые упростят работу с сервисом

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

Разработчики прислушались к мнению аудитории и в 2019 году показали новое обновление редактора в режиме бета-тестирования. Улучшенная версия имеет поддержку плагинов, а это значит, что каждый, кто владеет java script и знает html, способен разработать свое расширение. Все функции работают через API, то есть новую разработку можно легко установить и удалить. Каждый установленный модуль открывает дополнительные возможности сервиса Фигма. В этой статье мы перечислим способы улучшить функционал сервиса.    

Полезные плагины

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

№1. Аdd number to text – плагин Фигма текст

В сервисе присутствует расширение для оформления контентной части. Допустим, при заполнении карточки товара требуется перечислить характеристики продукта, в таком случае вам понадобится plugin “Аdd number to text”. Он способен легко создавать нумерованные или алфавитные списки. 

Работает он следующим образом: для начала нужно создать определенное количество полей, число зависит от того, сколько характеристик в одной карточке. Добавим название, потом выделяем все области, нажимаем правой кнопкой мыши и в раскрывающемся списке выбираем “Add number to text”. 

Появится всплывающее окно и, используя спецсимволы, туда можно вносить изменения. 

Списки:

1. $n — нумерованный
2. $a – алфавитный, при указании большой буквы – алфавит будет верхнего регистра.
3. $r – римские цифры
4. $& — указать первоначальное название без изменений.

Дополнительные команды, это арифметические формулы, при их использовании можно высчитать определенное значение. Существуют математические функции, такие как random и round. 

С помощью кнопок, можно быстро вызвать нужную, команду. Пример ниже.

Параметры под кнопками, означают способ отображения. Установив флажок в разделе  “Increase number” перечисление будет наоборот, начиная с максимальной позиции и заканчивая минимальной, например 5,4,3,2,1. 

Start at – это стартовая позиция нашего списка, здесь мы указываем число, с него будет начинаться перечисление. Если присутствуют буквенные значения, то они также будут стартовать с указанной позиции. Укажем – 3, то отобразиться третья буква английского алфавита.

Формирование списка завершается кнопкой Apple. После того как список был сформирован, то рекомендуется его объединить в целый объект. Делается это с помощью TextCutter, у него присутствует подсписок, там два значения Join (присоединить) и Split (разбить на строки). Чтобы объединить все слои нужно их выделить, потом нажать правой кнопкой мыши и воспользоваться TextCutter, как показано ниже. Сначала убедитесь, что он установлен, взять его можно с официального источника. 

Помимо нумерации, можно добавить и маркеры (точки), делается это с помощью Simple Bullets. В отличие от “Add number to text”, здесь можно разместить все в одном текстовом поле. Чтобы поставить точку следует создать несколько строк, потом выбрать из контекстного меню – Simple Bullets, никаких дополнительных параметров, он не содержит.

№2. Change Text – плагин Фигма текст

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

№3. Content Buddy 

Как и предыдущий вариант заменяет text, но действие происходит не конкретно со словом, а с предложением целиком. Щелкаем по слою, где есть текст, нажимаем правую кнопку мыши, открываем контекстное меню и кликаем по Content Buddy.

Дальше нажимаем на текстовый блок и в строке “Replace To”, добавляем новой контент. После этого жмем Replace, замена завершена. 

№4. Text Counts 

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

№5. Typograf 

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

“Типограф” работает в фоновом режиме, меню настроек нет, просто выберите описание которое хотите подвергнуть типографической правке и через контекстное меню вызовите “Typograf”, после этого некоторые знаки заменяться на спецсимволы.  

№6. Lorem Ipsum 

Если требуется быстро подобрать описание в контейнерах, то можно воспользоваться Lorem, он умеет добавлять небольшие абзацы в слои. Данный plugin существует в двух видах “обычный” и “Generator”. В первом случае потребуется создать текстовые поля, чтобы туда сгенерировать content, а “Генератор” это делает в автоматическом режиме. Чтобы воспользоваться обоими инструментами, нужно перейти в меню и там их выбрать. На скриншоте они обозначены цифрами.

1. Открывается окно, где нужно выбрать текстовый слой, дальше нажимаем кнопку Generate. В параметрах можно указать цифры, они означают объем генерируемого контента.
2. Lorem Ipsum Generator – открываются всплывающие настройки, где нужно указать “количество предложений”, а потом нажать Create. После этого строки автоматически создадутся.

Два варианта Lorem Ipsum, подойдут дизайнерам для быстрого заполнения макета текстом и просмотра верстки.       

№7. Nisa Text Splitter 

Умеет разделять и объединять текстовые поля. Допустим, существует одна общая колонка, которая нужно разбить на две колонки и вторую расположить рядом. 

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

Вызываем настройки с помощью пункта меню “Nisa Text Splitter”, и нажимаем Columns как показано ниже. 

Остальные действия Join(Объединить два поля в одно), alignment (выровнять по горизонтали и вертикали). Также можно произвести разные манипуляции (сортировка, поменять местами выделенные столбцы “Reverse”).

№8. Morph 

Предназначен для создания интересных эффектов, например: Skeuo, Neon, Glitch, Reflect, Glassy и Gradient. Преобразование происходит в несколько кликов. Выберите любой объект – квадрат, окружность, слой, содержащий text, и примените над ним следующие действия.

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

Для быстрого вызова существует меню в списке. Но если требуется графически оценить, как будет выглядеть эффект, в этом случае следует нажать “Open morph”. При выборе эффекта откроется набор кнопок и ползунков, которые можно менять на свое усмотрение и сразу видеть изменения.

 “Морф” подойдет для тех, кому нужно быстро украсить макет и подобрать необычное графическое оформление. Все эффекты 100 % бесплатные, регистрации тоже не требуется.

№9. Content Reel 

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

Здесь присутствует список графических и текстовых элементов, нажимаем на любой и примитивы автоматически заменяться изображениями, а инструмент text, можно заполнить адресом, именем, номером телефона или иконками. Когда нужно добавить данные сразу в несколько прямоугольных  форм, в этом случае следует выделить их мышкой в Content Reel и нажать “Apple All”. На скриншоте показан пример заполнения нескольких блоков разной информацией, кроме того интерфейс переключен во вкладку Icons, которую тоже можно использовать для добавления иконок.

Набор постоянно пополняется новым графическим контентом, пользователь также может принять участия, для этого существует вкладка “Add”. 

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

№10. Iconscout – плагин Фигма иконки

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

№11.

Iconify 

Предлагается более 50000 иконок, чтобы их добавить нужно перейти в редактор Iconify и перетащить на рабочую область иконку или нажать “Import Icon”. Присутствует также дополнительные настройки, где можно сменить цвета и увеличить размер.

№12. Icon resizer 

Простой plugin позволяющий менять размер фрейма. Гораздо удобнее работать, если значки одинакового размера. Управление довольно простое – выделите один frame или несколько, потом воспользуйтесь Icon resizer, установите размеры и нажмите “Run”.

№13. Better Font Picker – плагин для Фигмы, шрифты

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

№14. Figmotion – фигма плагин анимация

Создает эффект движения у объектов в проекте. Для перемещения используются настройки объектов. Чтобы передвинуть элемент по оси координат, нужно изменять параметры x,y, кроме того еще доступны свойства width, height, opacity (прозрачность), border radius (округлить края), rotation (поворот), fill color(залить цветом), stroke width и stroke color (поменять ширину и цвет обводки).  

Рассмотрим несколько примеров, как работать с figmotion. Добавим в проект frame и примитивы, например Rectangle (прямоугольник), Star(звезда). Нажмем в левом углу логотип программы и откроем меню, где наведем курсором на figmotion, выдвинется подменю, кликаем на втором пункте. 

Запуститься панель, здесь следует указать frame, где будет происходить анимация. 

Сделаем три действия: плавное появление квадрата, вращение звезды и смещение текста из-за края на рабочую область. 

1. Opacity (прозрачность) – параметр подойдет для rectangle, чтобы примитив плавно появился во фрейме. Рядом с параметром устанавливаем точку и делаем настройки как показано ниже.

Сверху есть временная шкала, с помощью неё перемещаемся на 1000ms, это одна секунда. Для удобства можно воспользоваться свойством, расположенным в левом углу, нажимаем “ромбик” opacity, чтобы шкала автоматически оказалась на нужной отметке, последовательность действий смотрите ниже.

2. Rotation – это свойство подойдет для вращения объекта. Допустим звезду нужно повернуть вокруг своей оси. Стартовые параметры такие же, как и  с прямоугольником.

Задаем ms в левом углу, чтобы сразу попасть на точное время, к примеру, 2000 ms. Нажимаем “ромбик”, и отрезок автоматически переместиться в нужное место. Дальше в всплывающем окне настраиваем опции. 

3. Выдвигающийся text из-за границы холста – здесь требуется изменять “x”. Следует установить отрицательное значение, чтобы наше сообщение оказалось за границей.

И последнее указать в timeline, точку конца анимации.

Дополнительные кнопки, расположенные верхней части инструмента:

• Первая кнопка “Play” воспроизводит анимацию.
• Update Layers – обновление списка слоев, чтобы отобразить новые добавленные объекты.
• Render – проигрывает созданную анимацию в видео формате. 
• Export – позволяет получить анимацию в CSS и JSON формате.
• Windows size – меняет размер фрейма. 

№15. Map maker – фигма плагин карты   

Когда нужно показать проезд в офис, то для этого существует данный plugin. Теперь необязательно заходить в google.maps, чтобы сгенерировать территорию вашего города. Map maker может сделать это вместо Гугла, достаточно ввести адрес, чтобы увидеть результат. Для начала следует запустить данное расширение.

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

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

Zoom Level – масштабирование. 

Show Marker – показать отметку

Вторая вкладка MapBox также обладает дополнительными настройками.

Address, Style и Zoom Level – похожи на параметры гугла. 

Bearing – поворачивает карту вокруг своего центра.

Pitch – наклоняет карту создавая эффект перспективы.

№16. Table creator – плагин Фигма таблицы

Простой инструмент для создания таблицы. Запуск осуществляется с помощью “create table”, как показано на скриншоте ниже. 

Так же из списка доступны следующие пункты: 

1. Select Column – выделяет колонку.
2. Select Row – похож на предыдущий вариант только вместо колонки – строка. 
3. Settings – настройки, которые можно применить к таблице.

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

Параметр Width равен 100, это ширина нашей таблицы, если требуется изменить размер в большую сторону, то меняем это свойство.

Таблица полностью состоит из компонентов. Они вложены друг в друга, самый низкий уровень – это ячейка (Cell), именно она содержит текстовое поле. Подойдет для записи и заполнения таблицы в целом.

№17. Remove BG плагин Фигма

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

Для запуска требуется зарегистрироваться на официальном сайте www.remove.bg, получить ключ Api и вставить его в специальное окно.

№18. Плагин Arc Фигма  

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

№19. Плагин для Фигмы Unsplash     

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

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

Появится всплывающее окно unsplash с категориями: животные, бизнес, технологии и т.д. Щелкаем по texture и видим, как добавляется, случайна текстура. 

Заключительный plugin работает с html, позже разберем, как добавить плагин в фигме, так же опишем параметр auto layout и возможности платной подписки.  

№20. Figma to html

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

• Html – сохранение документа в формате “хтмл”
• СSS – то же самое со стилями, только с расширением css.
• Download – загружает весь проект включая и картинки, которые были добавлены при разработке. 

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

Как пользоваться auto layout в Фигме?

При размещении примитивов на холсте, они могут смещаться и пересекаться краями. Чтобы этого избежать следует применить специальную опцию, auto layout в Фигме. Она находится в правой панели, вкладка “Disign”, при нажатии на “+”, элементы  позиционируются по соседству и с помощью стрелок можно указать направление размещения по горизонтали (в ряд) или по вертикали (в столбик). Создадим два прямоугольника с текстами и сделаем из них фреймы (CTRL+ALT+G), потом выделим и поместим их в еще один frame и воспользуемся Auto Layout, как показано на скриншоте.

Объектам дали имена container-1 и container-2. Для них также следует задать Auto layout. При увеличении названия у первого контейнера, второй начнет сдвигаться.  

Рассмотрим вариант вертикального расположения блоков, где будет название картинки и описание, как в интернет магазинах. Создаем frame, назовем card-1. Разместим туда необходимые элементы: наименование, картинку и краткое описание. Перейдем в design card-1 и нажмем “+”, auto layout, 

У card-1 появится параметр Resizing, здесь следует по вертикали поставить “hug contents”, это нужно для того чтобы BG (фон) масштабировался вместе с редактируемой областью описания. 

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

Как установить плагин в Фигме?

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

Как скачать плагин в Фигма? При переходе пользователь окажется на странице, где можно установить “Typograf”, ниже можно посмотреть описание и основные возможности плагина. Дальше щелкаем по Installed и появится сообщение, как на скриншоте. 

После установки он станет доступным в системе. 

Что дает платная подписка?

В системе figma присутствует несколько видов подписок, free, professional и organization.

Бесплатная

Снимает ограничения на:

• Количество файлов в черновиках
• Количество зрителей в комментариях
• Число редакторов в 3-х командных файлах

Следующие возможности.

• 1 командный проект
• 30-дневная история версий
• Облачное хранилище без ограничений.

Профессионал – цена 12 $ если брать на год вперед или 15$ ежемесячно

Снимаются ограничения на:

• Число проектов
• Истории версий

Дополнительные возможности

• Пользовательские права доступа к файлу / пользователю
• Частные проекты только по приглашениям
• Совместно используемые командные библиотеки

Организация – цена 45 $ в месяц, можно оформить только годовую подписку

Доступно то же, что и в Профессионале, плюс:

• Система проектирования для всей организации
• Централизованные команды
• Частные плагины
• Администрирование плагина
• Shared fonts
• SSO + повышенная безопасность
• Аналитика системы проектирования

Оформить подписку можно перейдя по этой ссылке https://www. figma.com/pricing/.

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

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

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

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

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

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

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

Работа в нашей команде строится по следующей схеме: для каждой Job «>или User Story мы делаем отдельный файл с элементарным линейным сценарием. Там мы собираем экраны, пройдя которые пользователь решает свою задачу. В таких сценариях, конечно же, появляются повторяющиеся паттерны, которые можно переиспользовать в других User Story и они достойны переноса в отдельную сценарную библиотеку. Этот подход позволяет не раздувать файлы, держать всю систему под контролем и достаточно свободно вносить правки, затрагивающие множество сценариев.

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

• Атомарные «>токены дизайн-системы.

• Молекулярные библиотеки с элементами интерфейса. Из них собираются экраны сценариев.

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

Библиотечная иерархия

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

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

Master

Community →

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

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

Копируем одну из форм и вставляем её в сценарную библиотеку. Делаем компонент и публикуем. Запускаем команду Pick Target Component из арсенала плагина Master. Возвращаемся в файл сценария и выделяем все наши формы. Запускаем команду Link Objects to Target Component.

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

Design System Organizer

Community →

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

Тут у нас локальные цветовые и типографские стили. Надо привязать их к таким же библиотечным. Идём в библиотеку и запускаем DSO. Заходим в цветовые стили, выделяем нужную группу и выбираем из выпадающего меню Set As Target. Возвращаемся в наш файл, запускаем DSO и выбираем Relink Styles. Бум! Стили теперь тянуться из командной библиотеки. Таким же образом перелинковываем другие стили или компоненты.

Style Organizer

Community →

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

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

Similayer

Community →

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

Давайте выделим слово Zen синего цвета, вне зависимости от стиля текста. Выделяем один синий Zen и запускаем Similayer. Выбираем параметры Fill Style и Text Characters.

Удобненько!

Instance Finder

Community →

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

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

Select Layers

Community →

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

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

Sorter

Community →

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

Если попытаться пронумеровать экраны, не расставив их в панели слоёв, получим хаос. Ну ок. Выделяем все экраны, запускаем команду Sort Position и после этого уже штатный Rename Selection.

Порядочек.

Quantizer

Community →

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

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

Кстати, вы знали, что можно таскать объекты в сетке за круглые маркеры в центре? А менять отступ, хватаясь за маркеры между? Если делать это с Shift, шаг будет кратен вашему Nudge Amount.

Swap

Community →

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

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

Layer Counter

Community →

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

Если снять галку Include Nested Layers, увидим только количество выделенных фреймов.

Retextifier

Community →

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

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

На macOS: копируем текст, например, колонку из Google-таблицы. Выделяем целевые текстовые слои и запускаем плагин. Вставляем текст комбинацией Cmd+Shift+V.

Если у вас Windows, действуем немного сложнее. Сначала вставляем скопированный текст в файл Figma. Выделяем его, запускаем Retextifier, копируем и тут же вставляем текст, жмём Change. Копируем изменённый текст, далее действуем как на macOS. Надеюсь, автор плагина что-то придумает по поводу этого недоразумения.

Copy and Paste Text

Community →

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

Копируем нужный текст, выделяем целевые слои, запускаем команду Paste Text.К

Find & Replace

Community →

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

Сейчас мы поменяем местами буквы и цифры. Запускаем плагин, включаем поддержку Regex и пишем регулярное выражение. Найти (.*)-(.*) и заменить на $2-$1.

Мистика!

Nisa Text Splitter

Community →

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

Давайте расставим фильмы по хронологии. Запускаем Nisa Text Splitter и режем наш блок на строчки. Сортируем по алфавиту — Sort by alphabet и сшиваем обратно в один блок —Join text. Внутри плагина ещё много другой годноты. Например, сразу делать Auto Layout из нарезанного текста.

Change Text to Layer Name

Community →

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

Выделяем текстовые блоки, применяем Rename Selection, оставляем старое название, добавляем к нему дефис и номер. Запускаем команду Change Text to Layer Name.

Математично!

Data Roulette

Community →

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

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

Рулетка рулит!

Content Reel

Community →

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

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

Copypasta

Community →

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

Выделяем нужную деталь, запускаем Copypasta, жмём Save selection, выбираем целевые экраны, Duplicate Layers.

Шикарно.

Safely Delete Components

Community →

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

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

После переноса компонентов в сценарную библиотеку, выделяем компоненты локальные и запускаем Safe Delete.

SBOL-Typograph

Community →

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

Божечки-Ёжечки!

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

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

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

P.S.: Видео-версию статьи можете посмотреть на моём YouTube-канале.

P.P.S.: Я серьёзно про комментарии.

Введение | Plugin API

Добро пожаловать в Plugin API!

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

Как и Figma и FigJam, плагины основаны на веб-технологиях. Вам понадобится понимание этих технологий для разработки плагинов. Вы будете писать плагины в JavaScript и создайте любой пользовательский интерфейс, используя HTML . Ознакомьтесь с необходимыми знаниями →

Плагины взаимодействуют с приложением Figma через специальный API плагинов . Они также могут использовать внешние веб-API . Вы можете создавать плагины, которые запускаются немедленно, или создавать плагины, которые требуют от пользователя ввода информации через пользовательский интерфейс (UI). Узнайте, как запускаются плагины →

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

Наше руководство по установке проведет вас через процесс настройки вашей среды и запуска образца плагина. Начало работы с API-интерфейсом плагина →

Доступ к API-интерфейсу плагина

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

Как в Figma, так и в FigJam вы можете получить доступ к большей части API плагинов через глобальный объект Figma .

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

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

• Стили и компоненты из любой библиотеки команды или организации. Plugin API может получить доступ только к стилям, компонентам и экземплярам, ​​которые являются локальными для этого файла.
• Внешние шрифты или веб-шрифты, доступ к которым осуществляется через URL-адрес. Плагины могут получить доступ только к тем шрифтам, которые доступны в редакторе. Сюда входят шрифты Figma по умолчанию, общедоступные шрифты организации или шрифты, хранящиеся локально на вашем компьютере. Вам потребуется загрузить любые шрифты, которые вы хотите использовать в своем плагине. Это не относится к шрифтам, которые вы хотите использовать в пользовательском интерфейсе вашего плагина.
• Другие метаданные файла, такие как команда или местоположение файла, разрешения, пользователи или любые комментарии, связанные с этим файлом. Включает историю версий этого файла. Вы можете получить доступ для чтения к этим аспектам файла через REST API Figma.

Структура документа

Каждый файл в Figma состоит из дерева узлов, и в корне каждого файла Figma или FigJam находится узел документа. Узел документа — это то, как вы получаете доступ к содержимому файла и исследуете его.

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

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

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

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

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

На основе браузера

Figma — это преимущественно браузерное программное обеспечение, что означает, что его можно запускать во всех полнофункциональных операционных системах для настольных компьютеров (MacOS, Windows, Linux и т. д.), а также в Chrome OS.

Как и Figma, плагины основаны на веб-технологиях. Часть API плагина работает в