Pixelbyte Figma MCP 服务器

关键词

设计资源Figma API设计令牌代码生成Code Connect

使用说明（Markdown格式）

  • 项目简介

    • 该仓库中名为 Pixelbyte 的 Figma MCP 服务器实现，基于 MCP（Model Context Protocol）标准，提供对 Figma 文件结构、节点细节、设计 tokens、图片导出、代码生成等多类工具的暴露与执行能力。服务器端负责会话管理、能力声明，并支持通过多种传输协议与 LLM 客户端通信。

  • 主要功能点

    • 资源与数据访问：提供对 Figma 文件结构、节点、设计 token、导出资源等的查询接口。
    • 工具注册与执行：提供 figma_get_file_structure、figma_get_node_details、figma_get_screenshot、figma_get_design_tokens、figma_get_styles、figma_generate_code、figma_get_images、figma_export_assets、figma_list_assets、figma_get_code_connect_map、figma_add_code_connect_map、figma_remove_code_connect_map 等工具，支持 JSON-RPC 请求与返回，并在返回时附加服务器版本信息。
    • 设计令牌与代码生成：对颜色、 typography、spacing、shadows 等设计要素进行抽取与转化，支持生成 CSS/SCSS/Tailwind 配置，以及多种前端框架的代码生成（React、Vue、SwiftUI、Kotlin 等）。
    • 运行环境自适应：服务器从环境变量获取 Figma API 令牌，支持重试机制，错误信息以友好提示返回。
    • 安全与扩展性：提供对 Code Connect 的增删改查映射，方便将设计组件映射到代码实现，便于大模型进行后续代码生成。

  • 安装步骤

    • 准备工作
      • 确保使用 Python 3.x 环境，并满足仓库中 Pixelbyte Figma MCP 模块所需依赖。
      • 设置 Figma API 访问令牌，例如 FIGMA_ACCESS_TOKEN（或 FIGMA_TOKEN），以便服务器能够调用 Figma API。
    • 启动服务器
      • 进入仓库中 pixelbyte-figma-mcp 目录，执行启动脚本来启动 MCP 服务器（该脚本会运行 MCP 服务并对外提供工具接口）。
      • 启动命令示例（以人类可读形式描述，具体路径以实际运行路径为准）：
        • 使用 Python 运行 figma_mcp.py
    • 关键环境变量
      • FIGMA_ACCESS_TOKEN（或 FIGMA_TOKEN）：用于 Figma API 的认证令牌，必须有效，否则工具会返回授权错误。
      • 其他依赖请参考项目根级 README 的安装说明。

  • 服务器配置（MCP 客户端连接所需的配置信息，JSON 格式，包含 server name、command、args 等） { "serverName": "Pixelbyte-Figma-MCP", "command": "python", "args": ["figma_mcp.py"], "description": "MCP 服务器实现：对 Figma 数据、工具和设计令牌的暴露与执行", "env": { "FIGMA_ACCESS_TOKEN": "在运行服务器所在环境中设置的 Figma API token" }, "notes": "请确保运行环境可执行 Python 脚本，并且 figma_mcp.py 位于服务器工作路径可访问的位置。FIGMA_ACCESS_TOKEN 必须有效，否则调用 Figma API 的工具将返回权限错误。" }

  • 基本使用方法

    • 启动后，MCP 客户端可通过 JSON-RPC 规范向服务器发送请求，调用已注册的工具。
    • 常见操作包括：
      • 查询 Figma 文件结构与节点详情
      • 获取设计 tokens 并生成 CSS/SCSS/Tailwind 配置
      • 将设计组件映射到 Code Connect 条目以便代码生成
      • 按需导出设计中的图像、矢量、导出设置等资源
    • 注意事项
      • 在首次使用前请确保 FIGMA 访问令牌生效且网络连通性良好
      • 请求可能有一定的延迟，若遇到网络或鉴权问题，请检查令牌及网络状态后重试

服务器信息

访问项目