⚡

FigJam插件开发工作流 figjam-plugin

本技能专注于FigJam插件的开发流程，涵盖双线程架构、WebSocket通信、JSON数据导入验证、插件构建与调试。关键词包括：FigJam插件开发、Figma API、WebSocket通信、插件构建、前端开发工具、UI设计工具扩展。

前端开发 0 次安装 0 次浏览 更新于 2/28/2026

名称: figjam-插件 描述: FigJam 插件开发工作流。适用于处理插件代码（code.ts、ui.ts）、调试 WebSocket 通信或构建插件时。

FigJam 插件开发

架构

双线程模型：

  • packages/plugin/src/code.ts - 主线程（Figma API，渲染器）

    • 无法使用浏览器 API（window、document、fetch）
    • 可访问 figma.* API
    • 将节点/边渲染到 FigJam 画布

  • packages/plugin/src/ui.ts - UI iframe（WebSocket 客户端）

    • 可使用浏览器 API
    • 管理与 CLI 的 WebSocket 连接
    • 处理连接 UI

通信流程

CLI (serve) ←→ WebSocket ←→ 插件 UI (ui.ts) ←→ postMessage ←→ 插件主线程 (code.ts)

JSON 导入（UI）

  • 接受 DSL JSON（节点为数组）或 IR JSON（节点为对象）
  • 使用 @figram/core 进行验证，并在发布到主线程前规范化为 IR
  • 验证错误会在 UI 警告中显示，包含路径/消息详情

构建

cd packages/plugin && bun run build

输出：packages/plugin/dist/（code.js、ui.html）

导入插件

  1. 打开 Figma Desktop
  2. 菜单 → 插件 → 开发 → 从清单导入插件
  3. 选择 packages/plugin/manifest.json

调试

  • UI 错误：浏览器开发者工具控制台（右键点击插件 UI → 检查）
  • 主线程错误：Figma 开发者工具（菜单 → 插件 → 开发 → 打开控制台）
  • WebSocket 问题：检查 UI 控制台中的连接状态

关键文件

  • manifest.json - 插件配置
  • src/code.ts - 画布渲染逻辑
  • src/ui.ts - WebSocket 客户端和连接 UI
  • src/ui.html - UI 模板（由构建打包）
  • src/icons/ - AWS 服务图标