In-System Design:在代码与Figma间双向原型的实践方法
在保持设计系统一致性的前提下,设计师可以在代码原型与Figma画布之间自由切换,无需重新绘制即可复用真实组件。这一被称为 In-System Design 的工作流依赖于严格的命名对齐:Figma 组件必须完全匹配代码中的组件名称和属性(如 Button 及其 variant),使得移动屏幕成为查找而非翻译过程。 具体操作需配置匹配的已发布 Figma 库、连接该库的空原型文件、MCP 连接以及具备执行能力的 AI Agent。从代码到 Figma 时,Agent 读取 Storybook 中的原型并在 Figma 中重建,同时生成包含缺失组件和建议的注释;设计师可通过 Cmd+Y 切换至线框视图,紫色高亮显示所有真实库组件实例,从而快速识别手绘元素或系统偏差。反向流程中,Agent 依据库组件来源和属性设置将 Figma 设计带回代码,非库实例会被列出而非静默重建。 若缺乏代码侧基础设施,团队仍可仅在 Figma 中使用 AI 进行原型设计,只要确保使用连接的库并记录任何手动创建的元素,以便后续开发参考。