SuperAPI AI 工具集

figma-deep-component

设计与创作

查看项目

更新于 10-16 01:06

技能介绍

用途:将 Figma 中单个节点(通常是 COMPONENT、COMPONENT_SET 或 INSTANCE,任意节点也可)递归展开到指定层级,得到一棵完整的设计树,用于高保真代码生成。

主要能力:每个层级可捕获布局(auto-layout、内边距、间距、尺寸)、视觉属性(填充、描边、描边粗细、圆角、效果、透明度)、文本排版、已解析的 boundVariables(令牌名与 codeSyntax)、INSTANCE 的主组件引用(含是否为变体及所属组件集)、原型 reactions、以及开发模式注解。据资料,令牌解析通过 Plugin API 完成,任意套餐均可用,非企业文件也能拿到令牌名而非不透明的 VariableID 别名。返回的树可作为应当构建的 DOM 参照,建议优先使用绑定的令牌名与 codeSyntax,而非原始十六进制色值。

使用方式:先用 figma-use 技能;从选中项(figma_get_selection)、搜索或粘贴的 id 获取节点 id;在脚本顶部设置 const NODE_ID 与 const DEPTH(默认 10),通过 use_figma 运行 scripts/deep-component.js(skillNames 设为 figma-deep-component)。脚本依赖要点:顶层 await 加 return 的普通 JS,不用 IIFE,不调用 figma.closePlugin(),console.log 不会被返回;输入以 const 内联在脚本顶部;颜色为 0–1 范围;文本操作前先加载字体;使用 await figma.getNodeByIdAsync(...);脚本错误为原子性,失败不产生任何效果,需读错误、修正、重试。

适用场景与限制:适合设计系统级别的单组件深度读取。若需整个文件清单(全部令牌/组件/样式),用 figma-design-system-inventory;若要把变体集当作 CSS 状态机分析,用 figma-analyze-component-set。资料未提供具体收费、价格与平台细节。若载荷过大,可降低 DEPTH(超出层级的节点会以 childCount 与 _depthLimitReached 标记汇总)或改选更小的子节点 id。根节点会回显 _variableMapSize 与 _maxDepthUsed 便于校验。