用途:为两类 Figma 开发工作流搭建快速本地开发环境——在 Figma 编辑器内运行的插件,以及调用 Figma REST API 的外部应用。
前置条件:Node.js 18+ 及 npm/pnpm;已配置 FIGMA_PAT(参见 figma-install-auth);插件开发需 Figma 桌面应用。
REST API 项目:建立 src(figma-client、extract-tokens、export-assets)、tests(含 fixtures 离线响应样本)、.env.local(FIGMA_PAT、FIGMA_FILE_KEY,需 git 忽略)、.env.example、tsconfig.json、package.json。开发脚本用 tsx watch,测试用 vitest。可在测试中 mock fetch 返回保存的 fixture。
插件项目:包含 manifest.json(含 name、id、api、main、ui、editorType、permissions)、code.ts(沙箱后端)、ui.html(iframe UI)、package.json、tsconfig.json。用 esbuild 打包并以 watch 模式监听,配合 concurrently 同时构建 code 与 ui。加载方式:Figma 桌面 > Plugins > Development > Import plugin from manifest,选择 manifest.json,运行 npm run watch 自动重载。
离线 fixture:用 curl 携带 X-Figma-Token 请求 https://api.figma.com/v1/files/${FIGMA_FILE_KEY} 保存文件快照,或请求 /nodes?ids=0:1,0:2 保存节点快照。
错误处理:插件不显示检查 manifest 路径;figma 未定义说明在沙箱外运行,@figma/plugin-typings 仅提供类型;fixture 过期需重新下载;esbuild watch 崩溃多因 TS 语法错误,修复后自动重启。
限制:资料未提供收费标准、平台兼容范围等信息。