为什么 Grida Assistant 会为按钮生成 Button 而不是 Rect？深扒其 UI 元素上下文检测原理
【免费下载链接】assistant🤖 Bring your Figma design & development pipeline to the next level - with design to code, in-design-content-management, component management, tools for faster design项目地址: https://gitcode.com/gh_mirrors/as/assistant
你是否在 Figma 插件生成代码时遇到这样的困惑：明明画的是一个圆角矩形加文字，Grida Assistant（Figma 设计到代码插件）却生成了一个 Button 组件，而不是一个简单的 Rect？这背后正是它的 UI 元素上下文检测机制在起作用。本文用通俗的方式拆解 Grida Assistant 是如何"看懂"画布上的图层、判断一个元素是按钮还是矩形的，帮新手理解 design to code 背后的智能逻辑。
UI 元素上下文检测：核心关键词与它解决的问题
上下文检测（Context Detection）是 Grida Assistant 的核心能力之一：它不只看单个图层的几何形状，而是把图层放进"上下文"里分析——它是谁的子节点、它包含哪些内容、它的名字和结构暗示了什么组件语义。
一个按钮在 Figma 画布上通常是这样的：
- 一个 Frame（或 Rectangle）作为底色
- 一层 Text 子节点作为按钮文案
- 可选的 Icon 子节点
如果只按几何形状识别，它就是一个Rect。但 Grida Assistant 会综合判断，最终生成带交互语义的Button，让开发者拿到的代码是可复用的组件，而不是一堆散落的形状。
检测原理：三层判断，逐步确认
第一层：看图层树，而不是看图层本身
在figma-core/reflect-render/目录中，可以清楚看到按钮的"标准结构"定义：buttons.render/index.ts 中，按钮被拆解为三个渲染单元——
- 底层：
renderCgRect生成的圆角底色矩形（见 cgrect.render/index.ts） - 中层：
slot:text命名的文本节点 - 顶层：可选的 SVG Icon
这个结构反过来就是检测按钮的"指纹"：一个容器 + 文本子节点 + 圆角底色层，三者同时出现时，上下文检测器会优先考虑 Button 语义，而不是 Rect。
第二层：看选择状态，决定 schema 类型
当你在画布上选中图层时，插件会根据选择状态走不同的组件推断分支。源码位于 packages/app-schema-editor/by-selection-state/，其中：
- selection-instance-component.tsx：识别组件实例
- selection-master-component.tsx：识别主组件
- selection-variant-instance.tsx：识别变体实例
如果选中的是 Button 组件实例，它直接按 Button 的 schema 生成代码；即使你选中了一个看起来像按钮的散装 Frame，schema 编辑器也会通过 interface-code-builder/ 里的属性映射（如 props-builder.ts）把它还原成带 props 的组件接口，而不是裸露的 Rect 属性。
第三层：看属性类型，推断组件变体
按钮通常有variant（如 primary / secondary）和size等属性。Grida Assistant 通过 type-to-coli-type.ts 把 Figma 的变体属性类型转换为代码类型——数字变体变成Number，布尔变体变成Boolean，枚举值（如"primary" | "ghost"）变成联合类型。这一步保证了生成代码里按钮的属性是"有类型约束的 Button props"，而不是 Rect 的宽高等纯几何参数。
生成结果对比：Button 和 Rect 差在哪？
| 维度 | 识别为 Rect | 识别为 Button |
|---|---|---|
| 代码语义 | 纯几何形状 | 可复用交互组件 |
| 属性 | width / height / radius | label / variant / onClick |
| 可维护性 | 改文案要重画 | 改 props 即可 |
| 上下文依赖 | 无 | 依赖图层树结构 |
新手上手：如何观察插件的上下文判断
- 在 Figma 中打开 Grida Assistant 插件面板，选中一个按钮组件实例
- 打开 Schema Editor 面板（对应 schema-editor.tsx），观察它推断出的组件属性
- 对比选中一个纯色 Rect 时的属性列表——你会发现 Button 会多出文案与变体属性
- 用 packages/app-schema-editor/interface-code-builder/jsx-view-example-builder.ts 对应的示例数据功能，查看它如何为按钮构造默认值
小结
Grida Assistant 之所以生成 Button 而不是 Rect，是因为它的 UI 元素上下文检测同时参考了三层信息：图层树结构、选择状态、变体属性类型。这套机制让 design to code 的输出从"形状的搬运工"升级为"组件的理解者"。如果你想深入源码，可以从 figma-core/reflect-render/index.ts 的渲染入口和 packages/app-schema-editor/index.ts 的 schema 入口两处开始读起。
【免费下载链接】assistant🤖 Bring your Figma design & development pipeline to the next level - with design to code, in-design-content-management, component management, tools for faster design项目地址: https://gitcode.com/gh_mirrors/as/assistant
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
