快速接入

先看主来源和安装命令，再打开仓库或文档；下面只保留这个条目的关键接入事实。

详细介绍

figma2code MCP Server

1. 配置 figma2code-mcp

{
  "mcpServers": {
    "figma2code": {
      "command": "npx",
      "args": ["figma2code-mcp"],
    }
  }
}

2. 安装 Figma 客户端

3. 搜索安装 Figma 插件 figma2code

4. 选中想要生成代码的 Figma 元素，就可以看到预览效果

5. 在 AI 编辑器中输入 prompt 指令，生成代码文件

调用 mcp getFigmaData 工具，获取 figma 设计稿的数据，并根据大模型指示将其重构为 vue/react 的组件

目录标签

开发工具TypeScript设计设计转代码本地部署前端开发Figma插件AI生成代码自动化工具

接入字段

传输方式（transport，传输协议）

未说明

鉴权方式（authType，认证方式）

none

工具数量（toolCount，工具数）

1

资源数量（resourceCount，资源数）

0

提示词数量（promptCount，提示词数）

0

权限和风险

未说明none部署方式未说明

接入前请确认传输方式、认证方式和部署位置，并根据实际工具能力限制访问范围。

安装前确认

不要直接授予不必要的文件、网络或账号权限；先核对安装命令和配置内容。

仍需确认：installCommand

来源信息

MCP World

mcpworld.com

/detail/642c844be9d2f493fd5f3f3b77b1a6aa

Figma2Code MCP Server是一个将Figma设计稿转换为Vue/React代码的工具，通过AI编辑器生成组件代码。

继续浏览同类 MCP

更多设计创作 MCP（1,700）返回 MCP 目录

上一个 MCP

Fig Kit

一个包含React组件、设计令牌和Figma集成的综合设计系统，适用于多品牌和多主题的UI开发。

下一个 MCP

Figma 34d4ef1e

全面解析Figma MCP HandholdingMCP Server的核心功能、安装配置和实用案例。作为顶级Model Context Protocol服务器，Figma MCP Handholding能让AI助手访问实时数据、执行操作，为您提供更智能的工作体验和自动化解决方案。

Figma2code MCP