最近工作主要和 Figma 插件打交道,梳理一些踩坑的经验~
开始
官方的起始例子:www.figma.com/plugin-docs…
按步骤将插件文件保存到本地即可,调试时可以右键唤起插件,可以关注下几个功能入口:
- Import plugin from manifest 导入本地插件
- Open console 控制台调试
- Run last plugin 加载最新的插件
目前 figma 插件开发流程没有有效的 hot reload 机制,【加载最新插件】在开发时比较常用,快捷键可以记一下。
插件架构
Figma 的插件架构比较简单,主要关注三部分:
- manifest.json 插件清单
- ui.html 入口
- core.js 入口
manifest.json
{
"name": "test",
"id": "1095700741264679376",
"api": "1.0.0",
"main": "code.js",
"editorType": [
"figma"
],
"ui": "ui.html"
}
ui.html
<h2>Rectangle Creator</h2>
<p>Count: <input id="count" value="5" /></p>
<button id="create">Create</button>
<button id="cancel">Cancel</button>
<script> document.getElementById('create').onclick = () => {
const textbox = document.getElementById('count');
const count = parseInt(textbox.value, 10);
parent.postMessage({ pluginMessage: { type: 'create-rectangles', count } }, '*');
};
document.getElementById('cancel').onclick = () => {
parent.postMessage({ pluginMessage: { type: 'cancel' } }, '*');
}; </script>
core.js
figma.showUI(__html__);
figma.ui.onmessage = msg => {
if (msg.type === 'create-rectangles') {
const nodes: SceneNode[] = [];
for (let i = 0; i < msg.count; i++) {
const rect = figma.createR