技能 figjam-plugin
🎨
FigJam 外掛開發需要了解 Figma API 限制和 WebSocket 通訊。此技能提供有關在 FigJam 中建置、除錯和部署可呈現 AWS 架構圖之外掛的指導。
支援: Claude Codex Code(CC)
1
下載技能 ZIP
2
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
3
開啟並開始使用
測試它
正在使用「figjam-plugin」。 如何使用雙執行緒架構設定 FigJam 外掛？
預期結果:
- • 主執行緒（code.ts）：處理 Figma API 和畫布呈現，不使用瀏覽器 API
- • UI 執行緒（ui.ts）：管理 WebSocket 連線和瀏覽器 API
- • 通訊：CLI 與 UI 之間使用 WebSocket，UI 與主執行緒之間使用 postMessage
- • 在 packages/plugin 目錄中使用 'bun run build' 建置
- • 透過 Figma Desktop → 外掛 → 開發 → 從清單匯入
安全審計
安全v3 • 1/10/2026
Documentation-only skill containing only markdown prompts. No executable code, scripts, network calls, file system access, or external command execution. Pure prompt-based skill providing development guidance.
1
已掃描檔案
61
分析行數
0
發現項
3
審計總數
未發現安全問題
審計者: claude 查看審計歷史 →
品質評分
38
架構
100
可維護性
81
內容
31
社群
100
安全
78
規範符合性
你能建構什麼
建立 AWS 架構圖
建置 YAML 驅動的 AWS 圖表，可即時同步至 FigJam 以進行團隊協作
設定 FigJam 外掛專案
初始化並設定具有正確架構的雙執行緒 FigJam 外掛
除錯外掛通訊
診斷 CLI 與外掛 UI 之間的 WebSocket 問題和連線問題
試試這些提示
初始化外掛專案
如何使用雙執行緒架構設定 FigJam 外掛？說明 code.ts 和 ui.ts 的職責。
除錯 WebSocket 連線
我的 FigJam 外掛無法連線至 WebSocket 伺服器。我應該採取哪些步驟來除錯連線？
建置並匯入外掛
如何建置 FigJam 外掛並將其匯入 Figma Desktop？manifest.json 設定是什麼？
處理主執行緒錯誤
如何除錯 code.ts（主執行緒）中影響畫布呈現的錯誤？我使用什麼工具？
最佳實務
- 保持主執行緒程式碼簡潔，專注於畫布呈現
- 在將資料傳送至主執行緒之前，先在 UI 執行緒中驗證和正規化資料
- 使用瀏覽器開發人員工具處理 UI 錯誤，使用 Figma 主控台處理主執行緒錯誤
- 在開發期間在本機執行 WebSocket 伺服器以實現即時同步
避免
- 在 code.ts 中使用瀏覽器 API（window、document、fetch）——會失敗
- 在處理之前跳過 JSON 輸入的驗證
- 忽略 UI 中的 WebSocket 連線錯誤
- 在建置前未在 Figma Desktop 環境中測試
常見問題
FigJam 外掛中 code.ts 和 ui.ts 有什麼區別？
code.ts 在主執行緒上執行，僅能存取 Figma API。ui.ts 在 iframe 中執行，支援瀏覽器 API 和 WebSocket。
我可以在 Figma 瀏覽器編輯器中使用此外掛嗎？
不行。FigJam 外掛需要 Figma Desktop 應用程式。瀏覽器編輯器不支援自訂外掛開發。
如何除錯 WebSocket 連線問題？
在外掛 UI 上開啟瀏覽器開發人員工具（右鍵 → 檢查）以查看連線狀態和控制台中的錯誤訊息。
使用此外掛時我的資料安全嗎？
可以。外掛在本機執行，WebSocket 伺服器在 localhost 上。不會將資料傳送至外部伺服器。
為什麼我的 code.ts 失敗並出現 undefined 錯誤？
主執行緒無法使用瀏覽器 API。確保 code.ts 中沒有 window、document 或 fetch 呼叫。僅使用 figma.* API。
這與其他圖表工具相比如何？
此工具使用 YAML 進行架構定義，並即時同步至 FigJam。與 draw.io 不同，它提供版本控制的圖表。
開發者詳情
檔案結構
📄 SKILL.md