在产品开发中,设计稿与生产代码之间的鸿沟并非源于工具的缺失,而是源于上下文的孤立。设计师精心构建的交互逻辑、组件规范以及其背后的决策依据——这些宝贵的上下文,在交接给开发者的那一刻便开始流失,导致了无尽的摩擦与返工。我们痛恨的不是协作本身,而是协作中信息的断裂。
现在,Figma 正在从根本上解决这个问题。它发布的一系列更新,远非简单的功能叠加,而是一场旨在打破信息孤岛、让上下文自由流动的战略转型。这些变革预示着设计工具的未来:不再是封闭的画布,而是融入整个产品开发生命周期的核心枢纽。
本文将为你解析这些更新对于设计师、开发者以及 AI 辅助产品开发的未来究竟意味着什么。

首先,我们需要明确什么是“设计上下文”。所谓的“设计上下文”,其实就是你设计决策背后的所有“潜规则”和“知识”:它不仅是组件的视觉样式,更是该组件在代码库中如何实现、团队遵循的工作流程,以及整个产品秉持的设计理念。
传统上,这些上下文被牢牢锁在 Figma 的画布里。而现在,Figma 最重要的更新是:其 MCP 服务器(MCP server)现在支持远程访问。你可以把它想象成一个为你的设计文件和系统量身打造的智能 API。这意味着设计上下文第一次被“解放”,不再受限于 Figma 的桌面应用。
这一变化的影响是深远的。开发者现在可以直接从他们偏好的工具中——无论是 Android Studio、Replit 还是 Warp 终端——实时调取这些上下文。这标志着 Figma 的定位发生了根本性转变:从一个封闭的创作目的地,转变为一个开放的、为整个开发环境提供“上下文即服务”的基础设施层。
据 Affirm 公司的产品、工程和设计团队反馈,Figma 的 MCP 服务器将他们的开发速度提升了“几个数量级”——他们能够在不到两天的时间内重建主要的产品流程。
但仅仅让上下文可被访问还不够,工具还需要能理解这些上下文的深层含义——尤其是当它包含代码时。
Figma 的第二项突破,是将 MCP 服务器与 Figma Make 进行了深度集成。这里的关键转变在于:AI 模型如今能够直接“看到”Make 文件中底层的代码,而不再仅仅是一个渲染后的原型图像。
这意味着原型不再是开发的终点,而是开发的起点。开发者和 AI 助手可以直接重用原型文件中的代码,或参考其逻辑与设计模式。原型从一个静态的视觉参考,进化为了一个活跃的、具备代码感知能力的工件,能够直接为编码过程提供信息并极大加速开发进程。
Figma 已经与 Anthropic、Cursor、Windsurf 和 VS Code 等合作伙伴联手,将这种革命性的体验带入他们的产品中。
这种代码感知能力为 AI 协作开辟了新的天地,但同时也提出了一个更棘手的问题:如何确保 AI 生成的不仅仅是代码,而是符合生产规范的好代码?
为了让 AI 生成的代码既可用又优质,Figma 升级了 Code Connect 功能,推出全新的应用内映射体验。相比过去繁琐的终端手动设置,新体验允许你在 Figma 内部直接将设计组件映射到代码库中的正确文件,并轻松追踪链接状态。
当 Code Connect 与 MCP 服务器结合时,它为 AI 代理提供了至关重要的“生产环境意识”。如果说 MCP 服务器为 AI 带来了丰富的设计上下文,那么 Code Connect 则在此基础上,注入了对代码组件位置和使用规范的精确理解。
早期测试结果证明了这种结合的威力:AI 生成的代码输出更加一致,文件导航速度更快,Token 效率也显著提升。Figma 在此处的战略意图非常清晰:它不打算在“生成代码”的 AI 模型上与他人直接竞争,而是要成为所有这些模型都离不开的、提供高质量“燃料”(即生产上下文)的平台。
今天我们看到的所有更新,都只是 Figma 更宏大愿景的第一步。它的最终目标是让上下文在所有工具间自由流动,使创意探索能够无缝演变为生产功能,而无需任何不必要的重写或修改。
目前,Figma MCP 服务器是将设计和代码上下文输出给其他工具。而它的未来,正如 Figma 所规划的:
随着时间的推移,它将成为一个双向连接器,将外部上下文拉回到 Figma 中。
这个愿景一旦实现,意味着更逼真的原型、更少的重复构建工作,以及团队能将更多时间投入到解决真正的用户问题上。设计产出物将不再是静态的参考资料,而是“塑造你的业务和用户体验的积极输入”。
Figma 正在描绘一幅未来蓝图:未来的创意工具不再是孤立的岛屿,而是相互连接的神经网络。在这张网络中,上下文的自由流动将成为创新的最大催化剂,最终模糊设计、代码与产品之间的界限,直到它们融为一体。
当我们的工具之间的界限不断模糊,当我们的设计平台不仅理解我们设计了什么,更能理解我们如何构建时,又将有哪些全新的可能性会由此诞生?
合集推荐
原子设计 | 如何展示设计系统的成功 | 规模化设计 | 奠定基础 | 设计系统文档化报告 | 构建设计体系 | 富有表现力的设计体系 | 设计体系 | AI时代的设计系统 | Figma设计系统入门 | 掌握设计系统 | 设计令牌宝典 | 设计运营白皮书 | Web组件 | 设计系统的前端架构 | 用户体验写作 | 大数据大设计 | 设计系统手册 | UX设计师的AI应用指南 | 构建对齐的设计系统 | 医疗保健中的计算机视觉 | 搬运 | 视频推荐 | 笔记