全新发布：Figma官方MCP震撼登场！一键从设计到代码，彻底改变开发流程！
发布时间：2025-06-11 12:20:49 | 责任编辑：吴昊 | 浏览量：17 次
Figma正式宣布推出其 Dev Mode MCP（Model Context Protocol）服务器的Beta版，标志着设计与开发工作流的进一步融合。这一服务通过标准化协议将Figma的设计数据直接传递给AI编码工具，显著提升了从设计到代码的转换效率与准确性。
Dev Mode MCP 服务正式上线
Figma的Dev Mode MCP服务器现已进入Beta测试阶段，支持与多种AI编码工具无缝集成，包括VS Code with Copilot、Cursor、Windsurf以及Claude Code等。用户只需在Figma桌面应用的“偏好设置”中启用Dev Mode MCP服务器，并在支持MCP的开发环境中输入相应的URL，即可实现设计数据的实时传递。这一服务允许AI工具直接访问Figma的设计上下文，如组件、变量、样式、间距和颜色等，消除传统设计到代码转换中的手动步骤和误差。
据Figma官方博客介绍，MCP服务器目前仅对持有Dev或Full Seat许可的用户开放，未来计划推出远程服务器功能和更深入的代码库集成，进一步扩展其应用场景。
MCP:设计与开发的“通用接口”
Model Context Protocol（MCP）被誉为AI应用的“USB-C接口”，由Anthropic开发并开源，旨在标准化AI模型与外部工具、数据源的交互方式。Figma的官方MCP服务器利用这一协议，将设计文件中的结构化数据(如布局、设计令牌、组件名称)直接提供给AI编码助手，使其能够生成更精准的代码。相比依赖视觉猜测的传统方法，MCP显著提高了代码输出的保真度和一致性。
社交媒体上，开发者对Figma的官方MCP服务表示高度期待，认为其相较于此前社区提供的非官方MCP解决方案更加稳定且功能更丰富。许多用户指出，Figma的原生支持将推动设计系统与开发环境的深度融合，尤其在需要快速迭代的初创企业和大型团队中。
与Figma Make的协同效应
Figma的MCP服务与近期上线的Figma Make平台形成互补。Figma Make允许用户通过自然语言提示生成交互式UI和原型，而MCP则专注于将设计数据传递给开发工具。两者结合，为产品团队提供了一套从快速原型设计到生产级代码的完整工作流。例如，开发者可通过Figma Make创建初始UI，再利用MCP服务器将设计细节转化为React、SwiftUI或Jetpack Compose等代码格式。
有评论指出，Figma此举是对Adobe、Canva以及WordPress、Wix等AI驱动设计与开发平台的直接挑战。MCP的推出进一步巩固了Figma在设计-开发协作领域的领先地位。
Figma官方MCP服务的推出标志着AI在设计与开发协作中的角色进一步深化。社交媒体反馈显示，开发者对MCP的易用性和稳定性评价较高，尤其是在与Cursor和VS Code的集成中，显著减少了设计到代码的手动工作量。然而，Beta版目前仍存在局限，例如仅限本地服务器运行，且对非Full Seat用户暂不开放。
随着Figma计划在未来数月推出远程服务器功能和更深入的代码库集成，MCP有望成为设计与开发协作的标准工具。小编认为，这一服务不仅降低了开发者的技术门槛，还为跨职能团队协作提供了新可能，将进一步推动AI驱动的数字化产品开发。
官方介绍：https://www.figma.com/blog/introducing-figmas-dev-mode-mcp-server/
Figma 官方推出的 Dev Mode MCP 服务器是一个基于 Model Context Protocol（MCP）标准的工具，它通过将 Figma 设计数据直接传递给 AI 编码工具（如 VS Code 的 Copilot、Cursor 等），实现了从设计到代码的高效转换，革新了开发工作流。
核心功能
-
设计上下文传递：Dev Mode MCP 服务器能够提供 Figma 设计文件中的组件、变量、样式等元数据，帮助 AI 编码工具生成更符合设计意图和代码库模式的代码。
-
一键转换：开发者可以通过简单的操作，如复制 Figma 设计稿的链接并粘贴到支持 MCP 的 AI 编码工具中，即可自动生成前端代码。
-
代码输出定制：支持多种代码输出类型（如 React、Tailwind CSS 等），并可根据项目需求进行调整。
-
交互性描述：通过伪代码或具体的代码片段，描述设计的交互行为，使 AI 能够准确实现动态功能。
使用场景
-
原子组件创建：快速生成符合设计系统规范的原子组件。
-
复杂应用流程构建：确保代码与设计中的复杂交互逻辑保持一致。
-
代码优化：通过持续与 AI 工具对话，优化前端页面，直至达到满意效果。
优势
-
提升效率：减少了手动从设计稿提取样式和编写基础代码的工作量。
-
减少沟通成本：打破了设计与开发之间的壁垒，减少了手动沟通和重复工作。
-
提高准确性：通过提供结构化的设计上下文，确保生成的代码更精准。
未来计划
Figma 计划在未来持续优化 Dev Mode MCP 服务器，包括支持无需运行 Figma 桌面应用即可使用、深化代码库集成、简化 Code Connect 设置等。
使用案例
例如，使用 Cursor IDE 的 MCP 功能，开发者可以快速将 Figma 设计稿转换为整洁的前端代码，并生成相应的网页。具体操作包括安装 Cursor IDE、添加 MCP Server - Figma-Context-MCP、配置项目规则、复制 Figma 设计稿链接并粘贴到 Cursor 的对话框中，然后与 AI 对话生成代码。
总之，Figma 的 Dev Mode MCP 服务器通过提供丰富的设计上下文支持，彻底改变了从设计到代码的传统工作流程，为开发团队带来了更高效、更智能的开发体验。
本网站(https://aigc.izzi.cn)刊载的所有内容，包括文字、图片、音频、视频等均在网上搜集。
访问者可将本网站提供的内容或服务用于个人学习、研究或欣赏，以及其他非商业性或非盈利性用途，但同时应遵守著作权法及其他相关法律的规定，不得侵犯本网站及相关权利人的合法权利。除此以外，将本网站任何内容或服务用于其他用途时，须征得本网站及相关权利人的书面许可，并支付报酬。
本网站内容原作者如不愿意在本网站刊登内容，请及时通知本站，予以删除。
