Christine Vallaure介绍In-System Design双向原型工作流
先了解这件事
Christine Vallaure 分享了 In-System Design 工作流，旨在实现代码与 Figma 之间的双向原型转换。该流程依赖严格的命名对齐，使设计师能在保持设计系统一致性的前提下，在代码原型和 Figma 画布间自由切换并复用真实组件，无需重新绘制。 实施该工作流需配置匹配的已发布 Figma 库、MCP 连接及具备执行能力的 AI Agent。正向流程中，Agent 读取 Storybook 原型并在 Figma 中重建，通过紫色高亮标识真实库组件以识别偏差；反向流程则将 Figma 设计带回代码，列出非库实例而非静默重建。若缺乏代码侧基础设施，团队仍可仅在 Figma 中使用 AI 进行原型设计，但需记录手动创建的元素供后续开发参考。
AI 根据报道生成 · 3 小时前更新
报道时间线
沿着报道，了解事件的不同侧面。
- UX CollectiveIn-System Design：在代码与Figma间双向原型的实践方法
在保持设计系统一致性的前提下，设计师可以在代码原型与Figma画布之间自由切换，无需重新绘制即可复用真实组件。这一被称为 In-System Design 的工作流依赖于严格的命名对齐：Figma 组件必须完全匹配代码中的组件名称和属性（如 Button 及其 variant），使得移动屏幕成为查找而非翻译过程。 具体操作需配置匹配的已发布 Figma 库、连接该库的空原型文件、MCP 连接以及具备执行能力的 AI Agent。从代码到 Figma 时，Agent 读取 Storybook 中的原型并在 Figma 中重建，同时生成包含缺失组件和建议的注释；设计师可通过 Cmd+Y 切换至线框视图，紫色高亮显示所有真实库组件实例，从而快速识别手绘元素或系统偏差。反向流程中，Agent 依据库组件来源和属性设置将 Figma 设计带回代码，非库实例会被列出而非静默重建。 若缺乏代码侧基础设施，团队仍可仅在 Figma 中使用 AI 进行原型设计，只要确保使用连接的库并记录任何手动创建的元素，以便后续开发参考。
本事件热度走势
- 可比范围当前
- 9
- 可比范围峰值
- 1011月12日 07:00
- 近 24 小时变化
- –
趋势仅比较持续完整观测到的相同主体，范围可能小于当前热度统计。移动指针或点击图表查看每小时热度；键盘可用左右方向键切换。