菲玛MCP服务器

Name: 菲玛MCP服务器
Author: toddle-edu

作者：toddle-edu5 星标更新：2025-07-02

安装使用来源：spider==github.com

项目介绍

Figma MCP Server

MCP Server 将 Figma 设计转换为类似伪代码的结构，简单且高效，便于大语言模型理解设计背景。

功能

连接到 Figma API 并获取给定设计的伪代码。为了视觉上下文，还可以获取图像。
支持生成设计系统组件及语义 HTML 内容的伪代码。
只需与 MCP 客户端分享 Figma 设计 URL，它会自动提取文件键和节点ID，并调用适当的工具来获取伪代码和/或图像。

在 MCP 客户端中的设置

    "Figma MCP Server": {
      "command": "npx",
      "args": ["-y", "figma-codegen-mcp", "--figma_api_key=<YOUR-FIGMA-PERSONAL-ACCESS-TOKEN>"]
    }

本地开发

先决条件

Node.js (v22)
npm

安装与构建

git clone <repository-url>
cd figma-mcp-server
npm install
npm run build

开发环境设置

用于热重载的开发：

# 安装依赖
npm install

# 设置环境变量
cp .env.example .env
# 编辑 .env 文件并添加你的 FIGMA_API_TOKEN

# 启动带有热重载的开发服务器
npm run dev

# 或者构建生产版本
npm run build

# 启动生产服务器
npm start

使用方法

此 Figma MCP Server 提供了两种主要工具来与 Figma 设计进行交互：

可用的 MCP 工具

1. `fetch_figma_node_image`

获取 Figma 节点或框架的 PNG 图像，并以 base64 数据形式返回。

描述： 下载任何 Figma 设计元素（框架、组件、层等）的 PNG 图像作为其视觉表示。

参数：

fileKey (字符串，必需)：Figma 文件的键。可以在 Figma URL 如 figma.com/(file|design)/<fileKey>/... 中找到。
nodeId (字符串，必需)：要捕获的具体节点的ID。在 URL 参数如 node-id=<nodeId> 中找到。

返回值： 基于64编码的PNG图像和MIME类型。

示例用例：

获取设计组件的视觉上下文
创建包含实际设计截图的文档

2. `generate_pseudo_code_from_figma_frame`

为 Figma 设计生成 JSX 和 CSS 伪代码。

描述： 分析 Figma 设计元素并生成相应的伪 HTML + CSS 代码。生成的代码包括基于您的 Figma 组件库的语义 HTML 结构、CSS 属性和伪 React JSX 组件。

参数：

fileKey (字符串，必需)：Figma 文件的键。可以在 Figma URL 如 figma.com/(file|design)/<fileKey>/... 中找到。
nodeId (字符串，必需)：要转换的框架/组件的ID。在 URL 参数如 node-id=<nodeId> 中找到。

返回值： 包含以下内容的格式化文本：

CSS 样式
JSX 组件结构
语义 HTML 元素
清晰易读的代码格式