Часть 1
Hello World!!!

Часть 2 Взаимодействие с Figma >>

Второй раз сталкиваюсь с написанием плагина для Figma и второй раз недоумеваю, зачем так сложно? Ну, в общем-то, ничего особо сложного нет. Но вот этот TypeScript, это зачем все? Установи модули, настрой публикацию. Сколько я не думал, единственное объяснение, зачем все это нужно, это защита от дурака. Типа, кому надо - разберется, а остальным и нечего лезть, говнокод плодить.

Ну так, мы развеем этот снобистский тренд и прорубим ход в API Figma для всех желающих.

А рецепт проще пареной репы. Суть в том, что если отбросить все лишнее, то в сухом остатке нам понадобится всего-лишь три файла:

Точкой входа плагина является файл manifest.json. Выглядеть он должен следующим образом:

{
 "name": "Simple Plugin",
 "api": "1.0.0",
 "main": "plugin.js",
 "ui": "index.html",
 "editorType": [
   "figma"
 ]
}

Поле name, это имя плагина, оно будет отображаться в меню и на корешке окна плагина.

В поле api мы указываем версию api, пока что это 1.0.0.

Поле editorType содержит массив с перечислением редакторов, для которых разрабатывается плагин. Мы указываем только figma.

Оставшиеся два поля main и ui содержат пути к файлам самого плагина. ui указывает на html с версткой и логикой окна плагина. main ссылается на js с логикой взаимодействия плагина с Figma.

Начнем их изучения с ui, а значит с файла index.html:

<button>Click Me</button>
<script>
   document.querySelector('button').onclick = () => {
       alert('Hello world!!!')
   }
</script>

Я поместил в него кнопку и скрипт, обрабатывающий клик по этой кнопке. По клику на кнопку выводится окно с текстом “Hello World!!!”. Тут важно понять, что скрипт должен находится внутри html. Подгружать скрипт атрибутом src плагин не умеет.

Ну, и последний файл который нам нужен для работы плагина, это plugin.js.

figma.showUI (
   __html__,
   {width: 400, height: 400}
);

Он предельно прост, в нем мы только даем Figma команду, открыть окно с содержимым нашего html. Вторым параметром метод showUI принимает объект, в котором мы указываем необходимый нам размер окна.

Вот, собственно, и все. Нам осталось только открыть редактор Figma и перейти в меню Plugins -> Development -> Import plugin from manifest…

Выбираем наш manifest.json, после чего в том же меню находим наш плагин.

Вуаля!!! Наш плагин готов.

Код с данным примером можно найти тут.

С документацией API Figma можно познакомиться тут.

UPDATE: Недавно Figma опубликовала плагин FigmaScript, который я написал, чтобы провести курс по javascript для дизайнеров. Это простой редактор кода, позволяющий писать и запускать скрипты с API Figma, без необходимости создавать собственный плагин. Если вы хотите попробовать API Figma, то это самый подходящий для вас вариант. В редактор встроены Chat GPT и удобный хелп, которые помогут вам в написании кода.

Часть 2 Взаимодействие с Figma >>

Figma plugin API человеческим языком