完整详细的 Figma 插件开发入门到进阶教程

最新推荐文章于 2026-05-08 10:17:08 发布

原创

最新推荐文章于 2026-05-08 10:17:08 发布 · 2.3k 阅读

标签

#figma #javascript

Figma 插件开发教程

1. Figma 插件概述

1.1 什么是 Figma 插件？

Figma 插件是运行在 Figma 设计工具中的“扩展程序”，可以访问和操作文档中的节点、图层、属性，实现自动化、增强工作流、批量操作、设计工具与外部系统集成等功能。插件的 UI 界面通常用 HTML/CSS/JS 构建，业务逻辑运行在 Figma 的沙盒环境中。

1.2 插件适合解决哪些场景？

批量命名/整理图层
设计资产批量导出
设计规范检测
与第三方系统联动（如数据填充、接口同步）
自动化生成图表、组件等

2. 插件开发前准备

2.1 基础要求

熟悉 Web 前端开发（HTML/CSS/JS）
有一定的 Figma 使用基础

2.2 环境准备

Figma 官方文档：Figma Plugin API
Figma 桌面版或网页版，建议桌面版便于本地开发调试
编辑器：VS Code 等
Node.js（可选）：用于开发工具链和构建

2.3 注册开发者账号

无需特殊注册，任何拥有 Figma 账号的用户都可开发插件。发布插件需要邮箱验证。

3. Figma 插件架构与API体系

3.1 插件运行原理

Figma 插件分为两部分：

主线程（Main/Code）：可以访问 Figma 的文档对象模型（figma 对象），执行节点操作、读写数据。
UI 线程：使用 HTML/CSS/JS 构建的界面，与主线程通信（postMessage）。

注意：主线程和UI线程是隔离的，彼此间通信需显式调用API。

3.2 插件的组成文件

manifest.json：插件元信息（名称、入口、权限等）
code.ts 或 code.js：主线程脚本
ui.html：UI界面（可选）
其它资源文件：样式、图片、脚本库等

3.3 Figma API 总览

figma.currentPage：当前页面节点
figma.createRectangle / createText / createFrame：创建节点
figma.getNodeById / findAll / selection：节点查询
node.name、node.fills、node.children：节点属性操作
showUI / closePlugin / notify：系统交互
clientStorage、networkRequest：数据持久化与网络访问（部分受权限限制）

4. Hello World 插件实战

下面用最简流程，带你从零开发第一个 Figma 插件。

4.1 新建插件项目

打开 Figma（桌面或网页版）
进入菜单 Plugins > Development > New Plugin...
填写插件名、描述，选择 Create a manifest.json，点击 Save

打开自动创建的文件夹（或手动创建）结构如下：

my-plugin/
  |- manifest.json
  |- code.ts (或 code.js)
  |- ui.html (可选)

4.2 manifest.json 示例

{
   
   
  "name": "Hello World",
  "id": "your-unique-id",
  "main": "code.js",
  "ui": "ui.html",
  "editorType": ["figma"],
  "api": "1.0.0"
}

main 指向主线程代码
ui 可选，指向自定义界面

4.3 code.js 示例

figma.showUI(__html__); // 展示 ui.html

figma.ui.onmessage = msg => {
   
   
  if (msg.type === 'create-rect') {
   
   
    const rect = figma.createRectangle();
    rect.x

最低0.47元/天解锁文章