Mac版Codex Figma插件图层嵌套过深？组件扁平化重构实操指南【操作】

Mac版Codex调用Figma插件时，如果遇到图层嵌套过深导致的解析失败、组件映射中断，或者Design→Code生成报错，问题往往出在组件结构本身——单纯调整Auto Layout层级是解决不了根本问题的，必须对原始设计稿做一次彻底的组件级扁平化重构。

确认嵌套深度并定位问题组件

在Figma中打开目标文件，按CMD+Shift+D启用Dev Mode，然后点击顶部「Layout Performance」，切换到「Nested Auto Layout」视图。这个面板会把所有嵌套深度大于等于5的Frame路径用红色高亮标出来。

——比如Button、Card、Form这类。如果发现只是装饰性遮罩或标注图层，直接删掉就好，不用参与后续重构。

解除冗余Frame包裹并重置组件结构

选中间出问题组件最外层的Frame，按Shift+CMD+A关闭Auto Layout。然后右键这个Frame，选择「Ungroup」，把所有的子图层一次性提升到同级。接着框选全部内容——图标、文字、边框什么的都别落下——再按Shift+A重新启用Auto Layout，方向设为Vertical或Horizontal，间距统一设成8。最后右键新生成的Frame，选择「Create Component」，命名格式要规范，比如Button_Primary、Card_Stats这样的。

，不然Codex解析的时候会出问题。

安装「Layer Renamer Pro」插件，运行后在设置里把「Max Nesting Depth」设为3，「Naming Pattern」设为{type}_{variant}。勾选「Flatten Deep Frames」选项，点击「Apply」，插件会自动合并深度超过3的中间Frame并重命名。之后全选清洗过的图层，右键「Create Components from Selection」，插件会按语义前缀——Button_、Card_、Input_这类——自动分组创建组件实例。

校验组件属性与Codex兼容性

双击一个组件进入编辑模式，在右侧属性栏底部找到「Description」输入框，填入标准语义标识，比如role="button" data-variant="primary"。别小看这一步，它直接影响Codex生成代码时的HTML标签选择和Props注入。

选中组件主Frame，在Constraints区域把Horizontal和Vertical全部设为None，然后关闭「Resize」联动开关。如果不关掉这个，Codex可能会误判成固定尺寸容器，生成带着width/height内联样式的反模式代码。

点击顶部菜单「Plugins」→「CheckDesign」→「Run Full Check」。扫描完成后，重点修复标红项里的「Missing Semantic Name」和「Deep Nesting in Instance」这两类问题，其他警告可以暂时忽略。

同步至Codex并验证映射结果

在Codex App中打开对应项目工作空间，点击左下角「Connect」，选择已经重构好的Figma文件。等状态栏显示「Connected & Synced」之后，输入指令：“List all mapped components with their HTML tag and variant props”。Codex会输出一个结构化的清单，比如：

• Button_Primary → + {variant: "primary", size: "md"}
• Card_Stats →
  + {layout: "horizontal", hasShadow: true}

如果发现某个组件没有出现在清单里，就得回Figma检查一下——它是不是被隐藏了、被锁定了，或者放在了未启用的页面中。