Figma plugin API человеческим языком. Часть 2

Взаимодействие с Figma

<< Часть 1 Hello World!!!

Часть 3 Подключаем React >>

В статье про написание скриптов для  Adobe After Effects я предложил читателям сделать песочницу кода, работающую прямо в AE. Давайте теперь сделаем такую же и для Figma. За основу можно взять заготовку из предыдущей статьи. Здесь вы найдете необходимые для работы плагина файлы manifest.json, index.html и plugin.js.

Для начала откроем manifest.json и заменим значение поля name на актуальное. Я назвал плагин Script Notepad.

manifest.json

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

Теперь в index.html создадим текстовое поле для ввода и кнопку для запуска кода:

<textarea rows="20" cols="43"></textarea> <button>Run</button>

А так же добавим им стилей:

<style>    textarea {        padding: 10px;        resize: none;    }    button {        display: block;        cursor: pointer;        margin: 20px auto;        width: 100px;    } </style>

Теперь следует обработать нажатие кнопки и отправить в фигму код, который мы напишем в текстовом поле.

<script>    document.querySelector('button').onclick = () => {        const codeText = document.querySelector('textarea').value;        parent.postMessage({ pluginMessage: codeText}, '*');    } </script>

Мы извлекаем из текстового поля содержимое и с помощью метода postMessage отправляем его в Figma. Метод postMessage принимает два параметра. Первый — это объект с полем pluginMessage, значение которого может быть любым типом данных. Значение этого поля Figma получит при обработке сообщения. Второй параметр — строка “*”, указывает на источник сообщения. Подробности работы метода можно найти здесь.

С index.html все, переходим к plugin.js. Тут мы первым делом открываем окно плагина.

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

А следом обрабатываем получение сообщения из окна плагина.

figma.ui.onmessage = e => {    try {        eval(e)    } catch (err) {        console.error(err);    } }

В обработчике мы пробуем преобразовать сообщение в код, а в случае неудачи выводим сообщение об ошибке в консоль.

Вот собственно и все. Запускаем плагин, пишем и запускаем код. Результат работы:

Консоль в Figma можно открыть в меню Plugins -> Development -> Open console

Код данного примера вы найдете тут.

<< Часть 1 Hello World!!!

Часть 3 Подключаем React >>