Claude Code 和 Codex 接入 Figma MCP 完整指南

在现代前端开发工作流中，设计稿到代码的转换一直是效率瓶颈。随着AI编程助手的快速发展，这一问题迎来了新的解决方案。Figma官方推出的MCP（Model Context Protocol）服务，使Claude Code、Codex等AI工具能够直接读取Figma设计文件，实现从设计到代码的一键生成。本文将详细介绍两种MCP连接方式的配置方法，帮助开发者快速构建高效的AI辅助开发流程。

概述

Figma MCP是Figma官方基于Model Context Protocol提供的接口服务，它让AI工具可以直接与Figma设计文件进行交互。其核心能力包括：选中Frame即可生成对应代码、提取完整的颜色、字号、组件、布局等设计上下文信息、读取FigJam和Make资源（如图流程图、架构图），以及结合Code Connect实现组件库的重用。

两种连接方式对比

Remote MCP采用云端地址（https://mcp.figma.com/mcp），适合云端协作场景，支持高级功能如Code to Canvas。Desktop MCP通过本地地址（http://127.0.0.1:3845/mcp）运行，需要在Figma Desktop中启用MCP Server，适合本地开发环境。两者的主要区别在于：Remote MCP不依赖本地运行，支持将Web界面回写到Figma；Desktop MCP则支持Selection-based（选中驱动）方式，可以直接读取当前选中的Frame。

前置准备与账号要求

配置Claude Code连接Desktop MCP，只需在终端执行命令：claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp。其中--transport http指定HTTP协议，figigma-desktop为服务器标识符。连接成功后，可通过「请读取我在Figma Desktop中当前选中的Frame，分析其布局和样式，然后为我的React项目生成一个对应的组件」这类提示词让AI读取设计并生成代码。

Claude Code配置步骤

Codex接入配置方面，推荐使用Remote MCP方式。在Codex的MCP配置界面新增服务器，URL填写https://mcp.figma.com/mcp即可。Remote MCP的优势在于不依赖Desktop本地运行，支持Code to Canvas功能，更适合云端协作和长时间运行的工作流。如需使用Desktop MCP，可在配置中添加对应的本地地址。

如有侵权，请联系删除。