Figma Structured MCP

这是一个用于与 Figma 链接 交互的 MCP (Model Context Protocol) 服务器。

它将无缝连接Figma物料-项目代码流程，定义新的figma资源交互方式！

拒绝：

手动选择、手动导出、手动压缩、手动上传、手动复制粘贴到项目中。

我们要：

只提供要导出图片的 Figma 链接，即可自动进行导出、压缩、上传，直接返回上传结果的结构化数据。

还要：

结合大模型，创造更多可能！试试让大模型直接帮你把得到的图片链接直接放到项目代码中...

因此，我们将支持：

• � Figma API 集成: 高效导出 Figma 节点或其子节点的图像。
• 🗜️ 智能压缩: 自动压缩导出的 JPG/PNG 图像以优化文件大小。
• 📤 自动上传: 将处理后的图像无缝上传到云存储。
• ⚡ 并发处理: 支持批量处理节点，提高效率。
• 🔧 灵活配置: 可自定义图像格式、缩放比例和压缩质量。
• 🎯 精准控制: 可选择导出节点本身或其所有子节点。

未来它将支持更多有用的Figma结构化数据的转换和输出，因为它叫做：Figma Structured MCP！

核心工具

get_figma_images

从Figma导出、压缩并上传指定节点的图像，返回可公开访问的图像URL。

此工具自动化处理从Figma提取设计素材的整个流程：

1. 根据提供的 file_key 和 node_ids 从Figma API获取图像。
2. 可选择导出节点本身或其所有直接子节点（通过 export_children 参数控制）。
3. 对导出的图像进行压缩以优化文件大小。
4. 将处理后的图像上传到云存储。
5. 返回一个包含成功上传图像的URL列表和失败详情的字典。

重要提示:

• 环境变量: 此工具需要 FIGMA_ACCESS_TOKEN 环境变量。请确保在运行前已设置。
• 如何从Figma链接中提取参数:
  • 当用户提供一个Figma链接时，需要从中提取 file_key 和 node_ids。
  • 例如，对于链接: https://www.figma.com/design/d5VnH9TP69zb3EyDejwv/My-Design?node-id=1349-2219
  • file_key 是 d5VnH9TP69zb3EyDejwv (位于 design/ 或 file/ 之后的部分)
  • node_ids 是 1349-2219 (位于 ?node-id= 之后的部分)

参数:

• file_key (str): Figma文件的唯一标识符。从文件URL中 'file/' 或 'design/' 之后的部分提取。
• node_ids (str): 一个或多个逗号分隔的Figma节点ID。从URL的 ?node-id= 参数中提取。
• format (str): 导出图像的格式。支持 "jpg", "png", "svg", "pdf"。默认为 "png"。
• scale (float): 图像的缩放比例，取值范围在 0.01 到 4 之间。默认为 1.0 (原始尺寸)。
• compression_quality (float): 图像压缩质量，仅对'jpg'和'png'格式有效。取值范围 0.0 (低质量，高压缩) 到 1.0 (高质量，低压缩)。默认为 0.85。
• export_children (bool): 控制导出行为。
  • True (默认): 导出指定node_ids下所有直接子节点作为独立的图像。适用于需要节点内多个图层（如图标、图片素材）的场景。
  • False: 仅导出node_ids指定的节点本身，将其作为一个整体图像。当用户明确指定将节点本身导出时使用。

返回数据格式:

{
    "successful_uploads": [
        {
            "name": "image_name.png",
            "url": "https://cdn.example.com/image_name.png"
        }
    ],
    "failed_uploads": [
        {
            "name": "failed_image.png",
            "error": "Upload failed reason"
        }
    ]
}

安装与运行

前置要求

• Python 3.12 或更高版本
• UV 包管理器

1. 安装 UV (如果尚未安装)

pip install uv

2. 创建虚拟环境并安装依赖 

# 使用 UV 创建虚拟环境
uv venv --python 3.12

# 激活虚拟环境 (macOS/Linux)
source .venv/bin/activate
# 激活虚拟环境 (Windows)
# .venv\Scripts\activate

# 安装所有依赖
uv sync --all-extras

3. 配置环境变量

使用 .env 文件 在项目根目录下创建一个名为 .env 的文件，并将你的Figma访问令牌放入其中。

FIGMA_ACCESS_TOKEN="your_figma_token_here"

# 其他上传服务器配置
STORAGE_PROVIDER="custom"
CUSTOM_UPLOAD_URL="https://your-upload-server.com"
CUSTOM_UPLOAD_KEY="your_upload_key_here"

4. 运行服务

项目支持三种运行模式：

1. STDIO 模式（标准 MCP 模式）

uv run python run.py --mode stdio

2. HTTP 模式（Streamable-HTTP）

# 启动 HTTP 服务器，默认端口 8000
uv run python run.py --mode http --port 8070

# 服务地址：http://127.0.0.1:8070/mcp

3. SSE 模式（Server-Sent Events）

# 启动 SSE 服务器，默认端口 8001
uv run python run.py --mode sse --port 8080

# 服务地址：http://127.0.0.1:8080/sse

5. 在客户端中使用

该工具支持三种模式：

• STDIO 模式
• HTTP 模式
• SSE 模式

可在任意支持MCP服务的客户端使用，以Cursor为例：

方法一：STDIO 模式（推荐） 在 Cursor 设置中添加 MCP 服务器配置：

{
  "mcpServers": {
    "figma-structured": {
      "command": "python",
      "args": ["/Users/yululiu/projects/AI/figma-structured-mcp/run.py", "--mode", "stdio"],
      "env": {
        "PATH": "/Users/yululiu/projects/AI/figma-structured-mcp/.venv/bin:$PATH",
        "PYTHONPATH": "/Users/yululiu/projects/AI/figma-structured-mcp",
      }
    }
  }
}

也可以 添加以下参数，会覆盖 .env 中的配置 

"env": {
  "FIGMA_ACCESS_TOKEN": "your_figma_token_here",
  "STORAGE_PROVIDER": "custom",
  "CUSTOM_UPLOAD_URL": "your upload url",
  "CUSTOM_UPLOAD_KEY": "your upload key"
}

方法二：HTTP/SSE 模式

1. 先启动 HTTP 或 SSE 服务。

uv run python run.py --mode http --port 8070 # 启动 HTTP 服务

uv run python run.py --mode sse --port 8070 # 启动 SSE 服务

 2.在Cursor 中配置相应的 URL。

Cursor HTTP 模式配置示例：

{
  "mcpServers": {
    "figma-structured-mcp": {
      "url": "http://127.0.0.1:8070/mcp"
    }
  }
}

{
  "mcpServers": {
    "figma-structured-mcp": {
      "url": "http://127.0.0.1:8070/sse"
    }
  }
}

与大模型交互示例

 

 

 

 如何学习大模型？

学习AI大模型是一个系统的过程，需要从基础开始，逐步深入到更高级的技术。

这里给大家精心整理了一份全面的AI大模型学习资源，包括：AI大模型全套学习路线图（从入门到实战）、精品AI大模型学习书籍手册、视频教程、实战学习、面试题等，资料免费分享！

这是一份大模型从零基础到进阶的学习路线大纲全览，小伙伴们记得点个收藏！

第一阶段： 从大模型系统设计入手，讲解大模型的主要方法；

第二阶段： 在通过大模型提示词工程从Prompts角度入手更好发挥模型的作用；

第三阶段： 大模型平台应用开发借助阿里云PAI平台构建电商领域虚拟试衣系统；

第四阶段： 大模型知识库应用开发以LangChain框架为例，构建物流行业咨询智能问答系统；

第五阶段： 大模型微调开发借助以大健康、新零售、新媒体领域构建适合当前领域大模型；

第六阶段： 以SD多模态大模型为主，搭建了文生图小程序案例；

第七阶段： 以大模型平台应用与开发为主，通过星火大模型，文心大模型等成熟大模型构建大模型行业应用。

100套AI大模型商业化落地方案

大模型全套视频教程

200本大模型PDF书籍

👉学会后的收获：👈

• 基于大模型全栈工程实现（前端、后端、产品经理、设计、数据分析等），通过这门课可获得不同能力；

• 能够利用大模型解决相关实际项目需求： 大数据时代，越来越多的企业和机构需要处理海量数据，利用大模型技术可以更好地处理这些数据，提高数据分析和决策的准确性。因此，掌握大模型应用开发技能，可以让程序员更好地应对实际项目需求；

• 基于大模型和企业数据AI应用开发，实现大模型理论、掌握GPU算力、硬件、LangChain开发框架和项目实战技能， 学会Fine-tuning垂直训练大模型（数据准备、数据蒸馏、大模型部署）一站式掌握；

• 能够完成时下热门大模型垂直领域模型训练能力，提高程序员的编码能力： 大模型应用开发需要掌握机器学习算法、深度学习框架等技术，这些技术的掌握可以提高程序员的编码能力和分析能力，让程序员更加熟练地编写高质量的代码。

LLM面试题合集

大模型产品经理资源合集

大模型项目实战合集

😝有需要的小伙伴，可以扫描下方二v码免费领取【保证100%免费】🆓