Figma 悄悄做了件大事：设计师第一次可以不把网站交给前端了

如果你还以为 Figma 只是“画界面”的工具，这场 Office Hours 会直接打脸。Figma Sites 把响应式布局、交互、发布，甚至代码层都拉进了设计工具里。更反直觉的是：它不是在替代前端，而是在重写“设计到上线”的分工逻辑。

真正炸裂的不是“能做网站”，而是它改写了流程

Figma Sites 最容易被误解的一点是：它并不是一个“Webflow for designers”。在视频一开始，团队就反复强调定位——这是一个从设计出发、但以发布为终点的工具。以前的流程是：设计稿 → 标注 → 前端实现 → 来回改；而 Figma Sites 直接把“设计、响应式、交互、发布”塞进一个连续的编辑体验里。

反直觉的地方在于：你不是先想页面，而是先想“站点结构”。左侧导航不再只是 Frames，而是明确区分 Web Pages、Breakpoints 和组件逻辑。这意味着，设计师第一次被迫像做产品一样思考网站，而不是像画海报一样堆页面。

响应式不再是“多画几套”，而是一套逻辑

视频里 Anthony 讲 Web Pages 和断点时，点出了一个长期被忽略的问题：大多数响应式设计，其实是在复制粘贴。Figma Sites 的核心是“Primary breakpoint（主断点）”——你只在一个断点上做决定，其它断点继承规则。

更狠的是多端联动编辑：同一个元素，可以在不同断点下共享结构、只改差异。配合 Auto Layout，设计师终于不用再维护 3 套、5 套版本。这里的变化不是效率提升，而是思维模型改变：你在设计的是一个会“伸缩”的系统，而不是静态画布。

Block 思维：把网页当“乐高”而不是“画布”

当 Kum 提到 Blocks 时，其实是在抛出一个老概念的新用法。Blocks 不是简单的组件，而是预制的、可响应的页面区块。Hero、Feature、CTA，不是复制粘贴，而是直接组合。

这对 AI 从业者尤其重要：因为 Blocks + 模板，意味着你可以把注意力从“怎么排版”转移到“信息怎么讲清楚”。视频中展示的快速搭建流程，已经非常接近“内容驱动型建站”——这恰好是 AI 产品官网、Demo 页最常见的需求。

交互不再是“演示”，而是上线即用

Lauren 的交互演示是另一个被低估的亮点。Hover、Press、Reveal、Scroll、Marquee，这些在 Figma 里原本只是“看起来会动”，现在变成了真实可用的交互。

一个关键细节是：错误示例和正确做法被直接讲出来了。比如移动端菜单，如果你还在用桌面思路硬套，Figma Sites 会直接让你撞墙。它在逼设计师面对真实 Web 行为，而不是停留在演示层。

Code Layers + 提示工程，才是最危险的信号

真正让 AI 从业者警觉的，是 Code Layers。这不是“导出代码”，而是一个可以通过提示生成、绑定变量、支持复杂交互的代码层。

换句话说：设计师第一次可以在设计工具里，用提示工程参与实现逻辑。虽然视频里还只是演示拖拽、变量和简单交互，但方向已经非常明确——设计、逻辑、AI 辅助正在同一层里融合。

总结

Figma Sites 真正重要的不是功能清单，而是它在悄悄改变角色边界：设计师不再只是“交付稿件”，而是直接对“上线结果”负责。对 AI 从业者来说，这意味着一个现实变化——做 Demo、做产品官网、做实验性页面的成本正在急剧下降。下一步值得思考的是：当设计工具开始理解响应式、交互，甚至代码逻辑时，你的竞争力，还只是“会不会写代码”吗？

关键词： Figma Sites， 响应式设计， 交互设计， 提示工程， 设计到发布

事实核查备注： 需要核查：1）Figma Sites 正式发布时间与是否为公开可用状态；2）Primary breakpoint 的官方定义表述；3）Code Layers 是否支持完整代码导出或仅限站点内逻辑；4）Office Hours 视频的实际时长与演示功能范围