Figma 插件开发 - Vite 环境搭建

最近工作主要和 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.cre