Figma × Claude Code 实现双向打通，设计与开发的边界正在消失
2026-02-18 11:06
45
设计工具 Figma 与 Anthropic 旗下编程助手 Claude Code 宣布完成双向工作流整合，标志着"代码 ↔ 设计"之间的转换首次真正实现无缝流通。
从代码到设计稿，一键完成
此次更新的核心亮点是全新推出的 Claude Code to Figma 功能。开发者可以直接在 Claude Code 中捕获任意网页界面——无论是生产环境、测试环境还是本地 localhost——将其转换为 Figma 格式后发送至剪贴板，随即粘贴进 Figma 编辑器，变成可编辑、可标注、可复用的设计帧。多个页面或交互状态也可在同一会话中批量捕获，完整保留操作流的上下文顺序。
从设计稿到代码，同样顺畅
反向路径同样打通。通过 Figma MCP Server，开发者只需在 Claude Code 中粘贴一个 Figma 设计帧链接，AI 便能读取其中的组件结构、设计变量与布局数据，直接生成对应的前端代码，告别以往人工"翻译"设计稿的繁琐过程。
为什么这件事值得关注
长期以来，设计师与开发者的协作存在一堵隐形的墙——设计稿停留在画布上，代码长在 IDE 里，两者之间的同步依赖手动标注与反复沟通。而这次整合意味着：开发者可以快速用代码搭出原型，直接拉进 Figma 让设计师批注迭代；设计师的改动也能即时转化回代码，无需对方重新读图。
接入方式
Claude Code 用户可通过以下命令快速接入 Figma 官方 MCP Server：
完成认证后即可开始使用。目前 Figma 官方 MCP 需要 Dev Mode 授权，社区也提供了兼容免费账号的第三方替代方案。
Figma AI 设计总监在官方博客中表示，此次更新是 Figma 推进"更流畅的代码与设计协作流程"的重要一步，未来将继续围绕这一方向深化能力。
0
好文章，需要你的鼓励