Api Плагина Figma На Человеческом Языке. Часть 2

Взаимодействие с Фигмой << Part 1 Hello World!!! Часть 3. Подключение React > > В статья По поводу написания скриптов для Adobe After Effects я предложил читателям создать песочницу кода, работающую непосредственно в AE. Давайте теперь сделаем то же самое для Фигмы.

За основу можно взять заготовка из предыдущей статьи.

Здесь вы найдете файлы, необходимые для работы плагина.

манифест.json , index.html И плагин.

js .

Для начала давайте откроем манифест.json и замените значение поля имя к нынешнему.

Я назвал плагин Блокнот сценариев .

манифест.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>

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



<script> document.querySelector('button').

onclick = () => { const codeText = document.querySelector('textarea').

value; parent.postMessage({ pluginMessage: codeText}, '*'); } </script>

Мы извлекаем содержимое из текстового поля и с помощью метода сообщениеСообщение отправьте его в Фигму.

Метод сообщениеСообщение принимает два параметра.

Первый — это объект с полем плагинСообщение , значение которого может быть любым типом данных.

Figma получит значение этого поля при обработке сообщения.

Второй параметр, строка «*», указывает источник сообщения.

Подробности о том, как работает метод, можно найти Здесь .

С index.html вот и все, перейдем к плагин.

js .

Здесь мы сначала открываем окно плагина.



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

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



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

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

Вот и все.

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

API плагина Figma на человеческом языке.
</p><p>
 Часть 2

Консоль в Figma можно открыть из меню.

Плагины -> Разработка -> Открыть консоль

API плагина Figma на человеческом языке.
</p><p>
 Часть 2

Вы найдете код для этого примера здесь .

<< Part 1 Hello World!!! Часть 3. Подключение React > > Теги: #api #JavaScript #HTML #html5 #figma #плагин Figma #plugin

Вместе с данным постом часто просматривают: