Часть 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 и удобный хелп, которые помогут вам в написании кода.
