Взаимодействие с Фигмой << Part 1 Hello World!!! Часть 3. Подключение React > > В статья По поводу написания скриптов для Adobe After Effects я предложил читателям создать песочницу кода, работающую непосредственно в AE. Давайте теперь сделаем то же самое для Фигмы.
За основу можно взять заготовка из предыдущей статьи.
Здесь вы найдете файлы, необходимые для работы плагина.
манифест.json , index.html И плагин.
js .
Для начала давайте откроем манифест.json и замените значение поля имя к нынешнему.
Я назвал плагин Блокнот сценариев .
манифест.json
Сейчас в index.html Создадим текстовое поле для ввода и кнопку для запуска кода:{ "name": "Script Notepad", "api": "1.0.0", "main": "plugin.js", "ui": "index.html", "editorType": [ "figma" ] }
<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);
}
}
В обработчике мы пытаемся преобразовать сообщение в код и в случае неудачи выводим на консоль сообщение об ошибке.
Вот и все.
Запускаем плагин, пишем и запускаем код. Результат:
Консоль в Figma можно открыть из меню.
Плагины -> Разработка -> Открыть консоль
Вы найдете код для этого примера здесь .
<< Part 1 Hello World!!! Часть 3. Подключение React > > Теги: #api #JavaScript #HTML #html5 #figma #плагин Figma #plugin
-
Книга «Kali Linux От Разработчиков»
19 Oct, 24 -
Бортовая Сеть Велосипеда
19 Oct, 24 -
Читабельность Arc90 В Интернете
19 Oct, 24