المهارات figjam-plugin
🎨
FigJam 插件开发需要了解 Figma API 约束和 WebSocket 通信。本技能提供有关在 FigJam 中构建、调试和部署渲染 AWS 架构图的插件的指导。
يدعم: Claude Codex Code(CC)
1
تنزيل ZIP المهارة
2
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
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
المحتوى
21
المجتمع
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 线程中验证和规范化数据，然后再发送到主线程
- 使用浏览器 DevTools 查看 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 的浏览器 DevTools（右键点击 → 检查）以查看控制台中的连接状态和错误消息。
使用此插件时我的数据安全吗？
可以。插件在本地运行，WebSocket 服务器在 localhost 上。没有数据发送到外部服务器。
为什么我的 code.ts 出现 undefined 错误？
主线程不能使用浏览器 API。确保 code.ts 中没有 window、document 或 fetch 调用。只使用 figma.* API。
这与其他图表工具相比如何？
此工具使用 YAML 进行架构定义并实时同步到 FigJam。与 draw.io 不同，它提供版本控制的图表。