Pixelbyte Figma MCP Server

关键词

Figma设计令牌代码生成资产管理设计系统

请按照以下步骤使用该 MCP 服务器：

  • 项目简介

    • 该仓库实现一个基于 MCP 的服务器端，用于对接 Figma API，向 MCP 客户端提供一组工具（如获取文件结构、节点详情、设计令牌、样式、截图等）、资源管理和代码生成等能力。
    • 服务器通过 JSON-RPC 风格的请求与客户端通信，负责会话、能力声明，以及对多种传输协议的支持（如 STDIO、SSE、WebSocket 等）。

  • 主要功能点

    • 资源与数据能力：从 Figma 文件中获取文件结构、节点详情、样式、导出资源等。
    • 工具注册与执行：提供 figma_get_file_structure、figma_get_node_details、figma_get_screenshot、figma_get_design_tokens、figma_get_styles、figma_generate_code 等工具，供 LLM 调用。
    • 设计令牌与样式渲染：提取颜色、字体、间距、阴影等设计信息，并能导出 CSS/SCSS/Tailwind 风格变量。
    • 代码生成：支持多种框架（React、Vue、SwiftUI、Kotlin、CSS/SCSS 等）的组件代码生成。
    • Code Connect 支持：映射 Figma 组件到实际代码实现的存储与查询。
    • 资源导出与图片获取：提供资产列表、图片下载链接、批量导出等能力。
    • 安全与扩展性：包含重试机制、错误处理、日志与扩展点，便于集成到大语言模型工作流中。

  • 安装步骤

    • 克隆或下载源码并安装依赖
    • 设置 Figma 账户令牌环境变量 FIGMA_ACCESS_TOKEN
    • 启动 MCP 服务器

  • 服务器配置（用于 MCP 客户端连接服务器的配置 JSON，示例，仅供客户端参考，不包含服务器端实现细节） 该配置仅用于 MCP 客户端连接服务器，以便与 MCP 服务器建立对话与调用能力。请根据实际部署环境替换主机和端口等信息。 { "server_name": "pixelbyte-figma-mcp", "command": "pixelbyte-figma-mcp", "args": [ "--host", "0.0.0.0", "--port", "8000" ], "description": "Pixelbyte Figma MCP Server，提供 Figma 资源、工具、设计令牌等 MCP 能力的后端服务", "env": { "FIGMA_ACCESS_TOKEN": "<your-figma-access-token>" } }

  • 基本使用方法

    1. 运行服务器后，通过 MCP 客户端向服务器发送 JSON-RPC 请求，调用如 figma_get_file_structure、figma_get_node_details、figma_get_screenshot、figma_get_design_tokens、figma_generate_code 等工具，获取所需数据或生成结果。
    2. 通过服务器输出的能力说明与返回结果进行后续对话，LLM 可以基于返回的数据继续推理与生成。
    3. 如需要扩展能力，请在后端实现中添加新的 MCP tool，并在客户端配置中进行调用。
    4. 生产环境请按需配置安全认证、网络暴露策略与日志监控等。

  • 潜在使用场景

    • 设计系统对接：从 Figma 同步设计令牌、样式、导出资源，用作前端工程化的设计语言来源。
    • LLM 驱动的前端生成：通过 figma_generate_code 将设计节点转换为代码片段，提升端到端自动化能力。
    • 资产管理与快速查询：快速获取图像、向量、导出设置等资源元信息，支持设计系统维护。

服务器信息

访问项目