SuperAPI AI 工具集

deep-component-figma

设计与创作

查看项目

更新于 10-16 01:49

技能介绍

用途:从一个 Figma 节点(通常是 COMPONENT / COMPONENT_SET / INSTANCE,任意节点也可)递归向下展开到指定深度,输出结构化树,便于按设计系统生成高保真代码。

主要能力:每层节点携带身份信息(id、name、type、visible,隐藏的非组件节点标记 _hidden 且不再递归);布局(layoutMode、轴向尺寸与对齐、padding、itemSpacing、counterAxisSpacing、layoutWrap、min/max 宽高、clipsContent);视觉(fills、strokes、strokeWeight、cornerRadius、effects、opacity,仅非默认值,figma.mixed 安全跳过);文字节点排版(characters、fontSize、字族与字重、lineHeight、letterSpacing、对齐、截断、大小写、装饰);boundVariables 解析为 {id,name,collection,resolvedType,codeSyntax};实例的 mainComponent 信息与 componentProperties;组件/组件集的 componentPropertyDefinitions、variantProperties;原型 reactions;开发标注 annotations。根节点还会回显 _variableMapSize 与 _maxDepthUsed。

使用方式:先加载官方 figma-use 技能(Figma Plugin API 参考);脚本需用纯 JS、顶层 await 与 return,不用 IIFE 也不调用 figma.closePlugin(),输入以 const 内联在脚本顶部,颜色为 0–1 范围,文字操作前先加载字体,使用 await figma.getNodeByIdAsync(...),错误为原子性(失败不生效,读错误后修复重试)。流程:取节点 id(选区、搜索或粘贴);设定 const DEPTH(默认 10,深层组件通常不超过约 6 层,建议先用小值再加深);通过 use_figma(skillNames: "deep-component-figma")运行 scripts/deep-component.js 并设置 const NODE_ID 与 const DEPTH;随后生成代码,优先使用 boundVariables 的令牌名与 codeSyntax 而非原始十六进制,用 mainComponent 引用复用组件,用 reactions 接交互与导航。载荷过大时降低 DEPTH(超限节点以 childCount + _depthLimitReached 汇总)或改选更小的子节点 id。

适用场景:需要单组件最深读取、令牌解析与交互信息的高保真代码生成;不适用于整文件清单(改用 design-system-inventory-figma)或把变体集当 CSS 状态机分析(改用 analyze-component-set-figma),也不同于原生 MCP 的 get_design_context 或 get_metadata。

限制:解析后的令牌依赖 Plugin API 变量查找,任意套餐均可用,非企业版也能拿到令牌名而非不透明的 VariableID 别名;即使为只读,返回值仍包含 affectedNodeIds: [NODE_ID]。其他收费、价格与平台细节暂未提供。