Skip to main content
Glama

Figma MCP Server

by 1yhy
OverviewInspectNewSchemaRelated ServersScore
TypeScript
Remote
MIT License
42
15
  • Linux
  • Apple

Figma MCP 服务器

smithery badge

本项目基于开源项目 Figma-Context-MCP 改进，优化了数据结构和转换逻辑。

English Version | 中文版

这是一个基于模型上下文协议(MCP)的服务器，允许您将Figma设计文件与Cursor、Windsurf、Cline等AI编码工具无缝集成。

当AI工具能够访问Figma设计数据时，它们能够更准确地一次性生成符合设计的代码，比截图等传统方式效果更好。

功能特点

  • 将Figma设计数据转换为AI模型易于理解的格式

  • 支持获取Figma文件、画板或组件的布局和样式信息

  • 支持下载Figma中的图片和图标资源

  • 减少提供给模型的上下文量，提高AI响应的准确性和相关性

与原版的主要区别

设计稿返回数据格式

{ // 设计文件基本信息 "name": "设计文件名称", "lastModified": "最后修改时间", "thumbnailUrl": "缩略图URL", // 节点数组，包含所有页面元素 "nodes": [ { // 节点基本信息 "id": "节点ID，例如 1:156", "name": "节点名称", "type": "节点类型，如 FRAME, TEXT, RECTANGLE, GROUP 等", // 文本内容（仅文本节点有此属性） "text": "文本节点的内容", // CSS样式对象，包含节点的所有样式属性 "cssStyles": { // 尺寸和位置 "width": "100px", "height": "50px", "position": "absolute", "left": "10px", "top": "20px", // 文本样式（主要用于TEXT节点） "fontFamily": "Inter", "fontSize": "16px", "fontWeight": 500, "textAlign": "center", "lineHeight": "24px", "color": "#333333", // 背景和边框 "backgroundColor": "#ffffff", "borderRadius": "8px", "border": "1px solid #eeeeee", // 特效 "boxShadow": "0px 4px 8px rgba(0, 0, 0, 0.1)", // 其他CSS属性... }, // 填充信息（渐变、图片等） "fills": [ { "type": "SOLID", "color": "#ff0000", "opacity": 0.5 } ], // 导出信息（用于图片和SVG节点） "exportInfo": { "type": "IMAGE", "format": "PNG", "nodeId": "节点ID", "fileName": "suggested-file-name.png" }, // 子节点 "children": [ // 递归的节点对象... ] } ] }

数据结构说明

SimplifiedDesign

设计文件的顶层结构，包含基本信息和所有可见节点。

SimplifiedNode

代表设计中的一个元素，可以是画板、框架、文本或形状等。主要字段包括：

  • id: 节点唯一标识符

  • name: 节点在Figma中的名称

  • type: 节点类型（FRAME, TEXT, RECTANGLE等）

  • text: 文本内容（仅文本节点有）

  • cssStyles: CSS样式对象，包含所有样式属性

  • fills: 填充信息数组

  • exportInfo: 导出信息（图片和SVG节点）

  • children: 子节点数组

CSSStyle

包含转换为Web标准的CSS样式属性，如字体、颜色、边框、阴影等。

ExportInfo

图片和SVG节点的导出信息，包含：

  • type: 导出类型（IMAGE或IMAGE_GROUP）

  • format: 推荐的导出格式（PNG, JPG, SVG）

  • nodeId: 用于API调用的节点ID

  • fileName: 建议的文件名

安装与使用

安装及使用

Installing via Smithery

To install Figma MCP 服务器 for Claude Desktop automatically via Smithery:

npx -y @smithery/cli install @1yhy/Figma-Context-MCP --client claude

本地开发和打包

  1. 克隆本仓库

  2. 安装依赖：pnpm install

  3. 复制.env.example为.env并填入您的Figma API访问令牌

  4. 本地开发：pnpm run dev

  5. 构建项目：pnpm run build

  6. 本地打包：pnpm run publish:local

打包后会在项目根目录生成一个.tgz文件，如figma-mcp-server-1.0.0.tgz

本地安装使用

有两种方式可以使用该服务：

方式1：从NPM安装（推荐）

# 全局安装 npm install -g @yhy2001/figma-mcp-server # 启动服务 figma-mcp --figma-api-key=<your-figma-api-key>

方式2：从本地包安装

# 全局安装本地包 npm install -g ./figma-mcp-server-1.0.0.tgz # 启动服务 figma-mcp --figma-api-key=<your-figma-api-key>

方式3：在项目中使用

# 在项目中安装 npm install @yhy2001/figma-mcp-server --save # 在package.json的scripts中添加 # "start-figma-mcp": "figma-mcp --figma-api-key=<your-figma-api-key>" # 或者直接运行 npx figma-mcp --figma-api-key=<your-figma-api-key>

命令行参数

  • --version: 显示版本号

  • --figma-api-key: 您的Figma API访问令牌（必需）

  • --port: 服务器运行的端口（默认：3333）

  • --stdio: 以命令模式运行服务器，而不是默认的HTTP/SSE模式

  • --help: 显示帮助菜单

与AI工具连接

在配置文件中使用

许多工具如Cursor、Windsurf和Claude Desktop使用配置文件来启动MCP服务器。 您可以在配置文件中添加以下内容：

# MCP Client使用 { "mcpServers": { "Figma MCP": { "command": "npx", "args": ["figma-mcp", "--figma-api-key=<your-figma-api-key>", "--stdio"] } } } # 本地使用 { "mcpServers": { "Figma MCP": { "url": "http://localhost:3333/sse", "env": { "API_KEY": "<your-figma-api-key>" } } } }

与Cursor连接

  1. 启动服务器：figma-mcp --figma-api-key=<your-figma-api-key>

  2. 在Cursor的设置→功能选项卡中连接MCP服务器：http://localhost:3333

  3. 确认连接成功后，在Agent模式下使用Composer

  4. 粘贴Figma文件链接并要求Cursor实现设计

可用工具

服务器提供以下MCP工具：

get_figma_data

获取Figma文件或特定节点的信息。

参数：

  • fileKey：Figma文件的密钥

  • nodeId：节点ID（强烈推荐使用）

  • depth：遍历节点树的深度

download_figma_images

下载Figma文件中的图片和图标资源。

参数：

  • fileKey：包含节点的Figma文件密钥

  • nodes：要获取的图像节点数组

  • localPath：项目中存储图像的目录路径

This server cannot be installed

-
security - not tested
A
license - permissive license
-
quality - not tested

How are these scores calculated?

Related Resources

Related MCP Servers

  • mcp-figma

    smithery-ai
    A
    security
    F
    license
    A
    quality
    A Model Context Protocol server that provides access to Figma API functionality, allowing AI assistants like Claude to interact with Figma files, comments, components, and team resources.
    Last updated -
    18
    423
    4

  • Figma MCP Server

    deepsuthar496
    A
    security
    F
    license
    A
    quality
    A Model Context Protocol server that integrates with Figma's API, allowing interaction with Figma files, comments, components, projects, and webhook management.
    Last updated -
    5
    616

  • Figma MCP Server

    mohammeduvaiz
    -
    security
    F
    license
    -
    quality
    A Model Context Protocol server that connects AI tools and LLMs to Figma designs, enabling them to extract design data, analyze design systems, and generate development documentation.
    Last updated -
    160
    2
    • Apple

  • Figma MCP Server

    xxflux
    A
    security
    F
    license
    A
    quality
    A TypeScript server that implements the Model Context Protocol, enabling AI-powered design creation in Figma using natural language prompts through Cursor Agent.
    Last updated -
    5
    616
    3

View all related MCP servers

Appeared in Searches

New MCP Servers

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/1yhy/Figma-Context-MCP'

If you have feedback or need assistance with the MCP directory API, please join our Discord server