Взаимодействие с Figma
В статье про написание скриптов для 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
Код данного примера вы найдете тут.
