一个Figma小技巧，正在悄悄拉开设计师与AI产品人的差距

大多数人以为“bento grid”只是好看的排版，但在Figma官方的这个视频里，它被证明是一种高度工程化、可复用、可扩展的设计方法。更重要的是：这套方法，正好踩在AI产品设计的核心痛点上。

反直觉的一点：好看的设计，其实是“算”出来的

很多设计师在做 bento grid 时，习惯凭感觉拖框、对齐、微调，最后得到一个“看起来还不错”的布局。但 Miggi 一上来就泼了盆冷水：真正灵活的 bento grid，不是画出来的，而是“被约束出来的”。

在视频里，她完全没有从视觉风格入手，而是从 Grid（网格）和 Constraints（约束） 开始：12 列、6 行、固定 margin 和 gutter，全部设置为 stretch。这一步看似枯燥，却直接决定了后面一个关键结果——这个 bento grid 会自动适配任何 frame 尺寸。

这点对 AI 从业者尤其重要。今天的 AI 产品界面，几乎都逃不开“信息密度高 + 尺寸不确定”：Web、桌面、Pad、甚至嵌在别人的产品里。如果你的设计一换尺寸就散架，那不是审美问题，是系统设计失败。Miggi 的做法，本质上是在把“响应式”前移到设计阶段，而不是留给前端兜底。

真正值钱的不是矩形，而是那套约束关系

视频中最容易被忽略、但最“值钱”的一段，是 Miggi 画矩形的方式。

她按 R 画的不是装饰块，而是严格吸附在网格线上的模块单元。这些矩形可以随意组合、拆分、重排，但永远不脱离网格体系。随后，她做了一件很多人都懒得做的事：

选中 frame → Enter → 给内部元素同时设置 left / right / top / bottom 约束。

这一步的意义是：不管你怎么拉伸 frame，里面的模块都不会“塌”。再加上统一的 24px 圆角，你得到的是一种非常现代、非常产品化的视觉语言。

对 AI 产品来说，这种模块化 grid 的好处不只是好看，而是可承载不确定内容。模型输出多一行、少一行，图片比例变了，推荐位临时多一个——布局依然成立。这正是 bento grid 在 AI Dashboard、模型控制台、数据看板里频繁出现的原因。

最后一步才是关键：把布局当成“资产”而不是“页面”

Miggi 在结尾做了一件非常“Config 风格”的事：她没有停在“做完一个好看的页面”，而是把整个 bento grid 存成一个 layout grid style，命名为 MIGS bento grid。

这一刻，设计从“作品”变成了“系统”。

之后你在任何 frame 里，只要一键应用这个 grid style，就能快速生成同一套结构；需要变化？改列数、改行数，规则还在。这对团队协作、对 AI 产品的快速迭代极其友好。

如果你把这一步类比到 AI 工程，会很熟悉：这就像把一次 prompt 调优，升级成可复用的 prompt 模板；或者把一次实验代码，抽象成 pipeline。真正拉开差距的，从来不是那一次 demo，而是能不能复用。

总结

这个视频表面在讲 Figma 技巧，实际上讲的是一种更偏工程思维的设计方式：先定义规则，再生成变化。对 AI 从业者来说，这意味着两点启发：第一，界面设计必须默认面对不确定性；第二，任何高频使用的布局，都值得被系统化、资产化。下次你再看到一个“好看的 bento grid”，不妨多问一句：它只是静态截图，还是一个真正能跑起来的系统？

关键词： Figma， Bento Grid， 响应式设计， AI产品设计， 设计系统

事实核查备注： 视频作者 Miggi（Figma）；发布时间 2024-01-16；使用工具为 Figma layout grid、constraints、grid style；示例 frame 为 Twitter post size；网格参数：12 列、6 行、margin 24、gutter 24。