为什么 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 AssistantFigma 设计到代码插件却生成了一个 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 生成代码即使你选中了一个看起来像按钮的散装 Frameschema 编辑器也会通过 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 / radiuslabel / 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），仅供参考