Figma (Framelink)

MCP 服务器免费

把 Figma 设计喂给 AI 写代码

作者：Framelink分类：设计与创意★ 9.0k starsNode.js需 API Key

信息

类型: MCP 服务器
官方: 社区
定价: 免费
作者: Framelink
运行环境: Node.js
传输: stdio
Stars: ★ 9.0k
API Key: 需要

简介

Figma (Framelink) 是一个基于 MCP（Model Context Protocol）协议的开源工具，能够将 Figma 设计稿的内容结构化地传递给 AI 编程助手，从而让 AI 更准确地根据设计稿生成前端代码。它的核心思路是：开发者在与 AI 对话时，无需手动截图或复制描述，工具会直接从 Figma 读取设计数据，作为上下文提供给 AI。这解决了设计与开发之间「看图写代码」效率低、信息传递失真的问题。适合需要将 Figma 设计稿还原为代码的前端开发者，以及在日常工作中频繁使用 Cursor、Claude 等 AI 编程工具的设计还原从业者。项目以开源形式发布在 GitHub，可自行部署配置。

功能特性

通过 MCP 协议将 Figma 设计数据实时传递给 AI 助手
支持读取 Figma 文件中的组件结构、样式与布局信息
与 Cursor、Claude 等支持 MCP 的 AI 工具集成使用
开源可自行部署，配置灵活

安装与配置

安装 / 启动命令

npx -y figma-developer-mcp --stdio

客户端配置（mcp.json / claude_desktop_config.json）

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--stdio"
      ],
      "env": {
        "FIGMA_API_KEY": ""
      }
    }
  }
}

传输方式：stdio

需配置环境变量：FIGMA_API_KEY