Что могут и не могут плагины в Фигме

Саша Окунев
/designer
Published in
5 min readAug 9, 2019

--

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

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

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

Установленные плагины можно найти в основном меню, а также в контекстном. Появилась так же горячая клавиша Opt + Cmd + P (Alt + Ctrl + P на Windows), которая запускает последний использованный плагин. Очень удобно для таких плагинов как Paddet, которые обновляют отступы.

Я не стал составлять длинный список самых горячих и сексуальных плагинов, которыми срочно нужно обвешать Фигму как новогоднюю ёлку. За меня справился Алексей Бычков, который составил внушительный каталог плагинов для Фигмы.

Вместо этого я нашёл интереснейший текст в документации к API плагинов — What’s Supported.

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

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

Фигма не хочет наступать на грабли Скетча

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

Плагин имеет доступ только к структуре локального файла, открытого в Фигме

API Фигмы уже поддерживает больше сотни методов и свойств, но он всё ещё очень новый, если не сказать, что сырой.

Что в релизе. Плагины в Фигме уже могут:

  • Создать новый слой. Демонстрационный плагин, на примере которого можно научиться делать свои плагины, позволяет наспамить на холст оранжевых квадратиков.
  • Создавать компоненты из фреймов. А значит, можно сделать плагин, который позволил бы разом создать сотню компонентов из набора иконок.
  • Читать большинство свойств слоя, а также изменять некоторые. Может менять цвет, название, положение в иерархии, координаты, размер и другие свойства. У текстовых слоёв можно менять контент. Это позволит автоматически заменять контент в слоях плагинами вроде Find and Replace или отделить дизайн от данных, выгрузив тексты в Google Sheets. Но подсасывать новые тексты из таблицы придётся вручную через всплывающее окно.
  • Получить доступ к существующим компонентам, которые уже присутствуют в файле.
  • Открыть всплывающее окно и отобразить интерфейс, написанный на HTML/CSS/JS. Развязывают нам руки в оформлении этого окна.
  • Получить доступ к API браузера. Поскольку часть плагина функционирует как айфрейм, можно посылать сетевые запросы, открывать файлы, использовать WebGL и другие крутые штуки. Это позволяет вставлять в Фигму новый контент, например фоточки с фотостоков вроде Unsplash или 3D-рендеры. Попытки с 3D пока очень робкие: Roto. Нормальных плагинов, которые качественно работали с WebGL я ещё не обнаружил.

О планах. Плагины в Фигме ещё не могут:

  • Читать наследуемые свойства. Если у экземпляра компонента синий фон, плагин об этом не узнает, поскольку информация хранится в мастере, к которому плагин не получит доступ через экземпляр.
  • Иметь свои горячие клавиши. Трудновыполнимая задача, поскольку это должно работать на всех платформах. Кроме того, мы возвращаемся к нашей любимой проблеме конфликтов клавиш, которую сполна испытали в Скетче. Для Мака это было бы просто реализовать, запихнув все нужные команды в системное меню, но они не будут решать эту проблему только для Мака.
  • Детачить экземпляры
  • Создавать прототипы и управлять ими
  • Делать аутлайн
  • Получить список локальных стилей
  • Выделять фрагменты текста

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

Не в планах. Плагины в Фигме вряд ли смогут:

  • Самое страшное. Срабатывать по эвентам Фигмы. Некоторые плагины хочется запускать не по кнопке, а в реальном времени, как в Скетче. Для этого нужна привязка к событиям, происходящим в документе: например, поменялся выделенный слой, фрейм растянули и тд. Это грозит тем, что потенциально тяжёлый код может срабатывать несколько раз в секунду и запускать непредсказуемые процессы, которые значительно замедлят Фигму. Кроме того, такие плагины особенно опасны, поскольку дизайнер перестаёт контролировать свой макет. Явное действие с запуском плагина избавляет от испорченных макетов.
  • Менять интерфейс самой Фигмы. Тёмная тема отменяется, потому что плагины не имеют доступа к UI-компонентам самого редактора.
  • Встраиваться как дополнительные панели в интерфейс. Встаёт та же проблема эвентов и работы в реальном времени. Кроме того, разработчики Фигмы не хотят, чтобы пользователи путали интерфейс плагинов с интерфейсом Фигмы.
  • Запускаться и работать в фоновом режиме. Это бы усугубило проблему выше. Может быть неочевидно, что плагин вообще запущен и вызывает тормоза.
  • Запускаться параллельно с другими плагинами. Невозможно предугадать, как они могут конфликтовать друг с другом. Кроме того, если в одном плагине пользователь ввёл логин и пароль, другой плагин не должен получать к ним доступ.
  • Получать доступ к комментариям, ID файла или пользователя, иначе они смогут отслеживать наши действия или даже открыть файл, когда мы его закрыли.
  • Получать полный доступ к библиотеке организации. Иначе плагины от сторонних разработчиков смогли бы украсть или испортить весь UI-кит этой организации.
  • Работать в браузере, поскольку там функционирует совершенно иная среда выполнения. Сейчас плагины работают в клиенте фигмы для Windows и macOS.
  • Получить доступ к истории версий файла. Это непросто, потому что в той же вкладке будет открыта предыдущая версия файла, а значит, удвоится нагрузка на оперативную память. Особенно это рискованно на огромных файлах.

По теме

Я веду /designerтелеграм-канал и паблик об интерактивном дизайне, инструментах и дизайнерах.

❤️ Понравилась статья? Поддержи проект

--

--

Саша Окунев
/designer

Дизайн-лид в Kaspi.kz. Автор проекта /designer.