用途:把应用页面、视图或多区块布局翻译成 Figma 画板,用于创建或更新屏幕、视图和多区块 UI 容器(整页、弹窗、对话框、抽屉、侧栏、面板等合成视图)。核心思路是复用已发布设计系统中的组件、变量与样式,而不是用硬编码值手绘。
主要能力:优先通过 Code Connect 文件解析组件键,其次检查已有屏幕中的实例与绑定变量,最后才用 search_design_system 检索组件、变量和样式;先创建外层容器再在其中逐段搭建区块,避免跨调用移动节点导致孤立框架。对可在浏览器渲染的 Web 应用,可与 generate_figma_design 并行运行:后者抓取像素级截图作为视觉参考,前者产出链接设计系统的组件实例,最后将截图中的图像通过复制 imageHash 转移后删除截图产物;源包含图片时该并行流程为强制要求。
必要用法:使用前必须连接 Figma MCP 服务器,目标文件需有已发布设计系统(或可访问团队库),并需提供目标文件 URL 或 fileKey,缺失时先调用 create_new_file 获取。任何 use_figma 调用前必须先加载 figma-use,且调用时需在 skillNames 中以逗号分隔加入本技能名;若通过 MCP 资源加载须加 resource: 前缀。
边界与限制:本技能只负责合成视图;创建新可复用组件或变体应直接用 figma-use;编写 Code Connect 映射应使用 figma-code-connect。use_figma 插件 API 无法获取外部图片 URL,只能复制文件内已有节点的 imageHash。字体需按源码实际使用的字族设置,不应默认 Inter。具体平台支持、费用与价格等信息暂未提供。