⚡

FigJam插件开发 figjam-plugin

FigJam插件开发工作流，专注于前端插件开发、WebSocket通信调试和Figma API集成。关键词：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（服务端） ←→ 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桌面版
  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服务图标