Pixelbyte Figma MCP

🎨 Pixelbyte Figma MCP服务器

  

一个强大的 模型上下文协议（MCP） 用于Figma API无缝集成的服务器。提取设计令牌，生成生产就绪代码，捕获屏幕截图，并直接从Figma设计中管理code Connect映射。

✨ 特性

______________________________________________________________________

📦 安装

来自GitHub（推荐）

pip install git+https://github.com/Rylaa/pixelbyte-figma-mcp.git

来自PyPI

pip install pixelbyte-figma-mcp

来源

git clone https://github.com/Rylaa/pixelbyte-figma-mcp.git
cd pixelbyte-figma-mcp
pip install -e .

______________________________________________________________________

⚙️ 设置

1.获取Figma访问令牌

1. 首选 Figma帐户设置
2. 滚动到 个人访问令牌
3. 点击 生成新令牌
4. 复制令牌（您将不会再看到它！）

2.配置环境

选项A：环境变量

export FIGMA_ACCESS_TOKEN="figd_xxxxxxxxxxxxxxxxxxxxxx"

选项B:.env文件

# .env
FIGMA_ACCESS_TOKEN=figd_xxxxxxxxxxxxxxxxxxxxxx

3.添加到克劳德代码

添加到您的克劳德代码设置(~/.claude/settings.json):

{
  "mcpServers": {
    "pixelbyte-figma-mcp": {
      "command": "pixelbyte-figma-mcp",
      "env": {
        "FIGMA_ACCESS_TOKEN": "figd_xxxxxxxxxxxxxxxxxxxxxx"
      }
    }
  }
}

4.验证安装

# Check if installed correctly
pixelbyte-figma-mcp --help

______________________________________________________________________

🛠️ 可用工具

文件和节点工具

设计令牌工具

代码生成工具

代码连接工具

资产管理工具

______________________________________________________________________

💻 代码生成

为生成生产就绪代码 10个框架 提供全面的风格支持。

支持的样式

支持的框架

示例用法

# Generate React + Tailwind component
figma_generate_code(
    file_key="qyFsYyLyBsutXGGzZ9PLCp",
    node_id="1707:6176",
    framework="react_tailwind",
    component_name="HeroSection"
)

# Generate SwiftUI View
figma_generate_code(
    file_key="qyFsYyLyBsutXGGzZ9PLCp",
    node_id="1707:6176",
    framework="swiftui"
)

# Generate Android Compose
figma_generate_code(
    file_key="qyFsYyLyBsutXGGzZ9PLCp",
    node_id="1707:6176",
    framework="kotlin"
)

生成代码示例

输入： 带有渐变、阴影和圆角的Figma按钮

输出（CSS）：

.hero-button {
  width: 200px;
  height: 48px;
  background: linear-gradient(90deg, #3B82F6 0%, #8B5CF6 100%);
  border-radius: 8px 8px 16px 16px;
  box-shadow: 0px 4px 12px 0px rgba(59, 130, 246, 0.40);
  transform: rotate(0deg);
  opacity: 1;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
}

______________________________________________________________________

🎨 设计令牌提取

以结构化格式提取设计标记 即用型CSS、SCSS和Tailwind代码.

多功能代币提取

figma_get_design_tokens(
    file_key="qyFsYyLyBsutXGGzZ9PLCp",
    node_id="1707:6176",
    include_colors=True,
    include_typography=True,
    include_spacing=True,
    include_effects=True,
    include_generated_code=True  # NEW in v2.0!
)

输出：

{
  "$schema": "https://design-tokens.github.io/community-group/format/",
  "figmaFile": "qyFsYyLyBsutXGGzZ9PLCp",
  "tokens": {
    "colors": [
      {
        "name": "Button Background",
        "value": "#3B82F6",
        "hex": "#3B82F6",
        "rgb": "59, 130, 246",
        "hsl": "217, 91%, 60%",
        "contrast": { "white": 3.02, "black": 6.96 }
      }
    ],
    "typography": [...],
    "spacing": [...],
    "shadows": [...],
    "blurs": [...]
  },
  "generated": {
    "css_variables": ":root {\n  --color-button-background: #3B82F6;\n  ...\n}",
    "scss_variables": "$color-button-background: #3B82F6;\n...",
    "tailwind_config": "module.exports = {\n  theme: {\n    extend: {\n      colors: {\n        'button-background': '#3B82F6'\n      }\n    }\n  }\n}"
  }
}

丰富的色彩信息

现在，每个提取的颜色都包括：

即用型生成代码

这 generated 部分提供了复制粘贴就绪代码：

CSS变量：

:root {
  --color-button-background: #3B82F6;
  --color-card-bg: #FFFFFF;
  --font-inter-16: 16px/24px 'Inter';
  --spacing-card: 24px 24px 24px 24px;
  --shadow-card: 0px 4px 12px rgba(0, 0, 0, 0.1);
}

SCSS变量：

$color-button-background: #3B82F6;
$color-card-bg: #FFFFFF;
$font-inter-size: 16px;
$font-inter-weight: 500;

顺风配置：

module.exports = {
  theme: {
    extend: {
      colors: {
        'button-background': '#3B82F6',
        'card-bg': '#FFFFFF'
      }
    }
  }
}

已发布样式

figma_get_styles(
    file_key="qyFsYyLyBsutXGGzZ9PLCp",
    include_fill_styles=True,
    include_text_styles=True,
    include_effect_styles=True
)

输出：

{
  "fill_styles": [
    {
      "key": "abc123",
      "name": "Primary/500",
      "description": "Primary brand color",
      "fills": [{"type": "SOLID", "color": "#3B82F6"}]
    }
  ],
  "text_styles": [
    {
      "key": "def456",
      "name": "Heading/H1",
      "fontFamily": "Inter",
      "fontSize": 32,
      "fontWeight": 700
    }
  ],
  "effect_styles": [...]
}

______________________________________________________________________

🔗 代码连接

将Figma组件映射到您的实际代码实现，以更好地生成AI辅助代码。

为什么选择Code Connect？

• 🎯 精确的代码生成 -AI知道你的组件路径和道具
• 🔄 一致的映射 -将设计链接到代码一次，随处使用
• 📚 示例片段 -提供使用示例以获得更好的上下文

添加映射

figma_add_code_connect_map(
    file_key="qyFsYyLyBsutXGGzZ9PLCp",
    node_id="1707:6176",
    component_path="src/components/ui/Button.tsx",
    component_name="Button",
    props_mapping={
        "Variant": "variant",      # Figma prop -> Code prop
        "Size": "size",
        "Disabled": "disabled"
    },
    variants={
        "primary": {"variant": "primary", "className": "bg-blue-500"},
        "secondary": {"variant": "secondary", "className": "bg-gray-500"},
        "outline": {"variant": "outline", "className": "border-2"}
    },
    example="Click me"
)

获取映射

# Get all mappings for a file
figma_get_code_connect_map(
    file_key="qyFsYyLyBsutXGGzZ9PLCp"
)

# Get specific node mapping
figma_get_code_connect_map(
    file_key="qyFsYyLyBsutXGGzZ9PLCp",
    node_id="1707:6176"
)

删除映射

figma_remove_code_connect_map(
    file_key="qyFsYyLyBsutXGGzZ9PLCp",
    node_id="1707:6176"
)

存储配置

______________________________________________________________________

📸 屏幕截图导出

将Figma节点导出为多种格式的图像。屏幕截图是 自动下载并保存在本地 为了便于访问。

figma_get_screenshot(
    file_key="qyFsYyLyBsutXGGzZ9PLCp",
    node_ids=["1707:6176", "1707:6200"],
    format="png",   # png, svg, jpg, pdf
    scale=2.0       # 0.01 to 4.0
)

输出：

# Generated Screenshots
**Format:** PNG
**Scale:** 2x

## Local Files

- **1707:6176**: `/tmp/figma_screenshots/qyFsYyLyBsutXGGzZ9PLCp_1707-6176_20260113_143022.png`
- **1707:6200**: `/tmp/figma_screenshots/qyFsYyLyBsutXGGzZ9PLCp_1707-6200_20260113_143022.png`

> Screenshots saved to: `/tmp/figma_screenshots`

截图保存在临时目录中，可以直接由Claude Code读取 Read 视觉分析工具。

______________________________________________________________________

🔑 获取文件密钥和节点ID

文件密钥

从您的Figma网址：

https://www.figma.com/design/qyFsYyLyBsutXGGzZ9PLCp/My-Design
                              ^^^^^^^^^^^^^^^^^^^^^^
                              This is the file_key

节点ID

1. 在Figma中选择一个图层
2. 右击→ 复制链接
3. URL包含 node-id=1707-6176
4. 使用 1707:6176 或 1707-6176 （两项工作）

______________________________________________________________________

📝 更新日志

v2.4.0

• feat:智能文件结构过滤 include_empty_frames, min_children_count, mark_downloadable_assets 选项
• feat:资产检测指示器(hasAsset)在文件结构树中
• 修复：通过禁用图标收集来防止figma_get_images中的KeyError
• 修复：在时间戳中添加微秒以防止文件名冲突
• 修复：提高下载函数中异常处理的特异性

v2.3.6

• feat:在本地下载figmaexport_assets和figmaget-images的资源

v2.3.5

• feat:本地保存截图以兼容Claude Code

v2.3.4

• feat:figma_list_assets的智能资产检测

______________________________________________________________________

🌍 环境变量

______________________________________________________________________

📋 需求

• Python 3.10+
• 具有API访问权限的Figma帐户
• 个人访问令牌

______________________________________________________________________

🤝 贡献

欢迎投稿！请随时提交拉取请求。

1. 分叉存储库
2. 创建功能分支(git checkout -b feature/amazing-feature)
3. 提交您的更改(git commit -m 'Add some amazing feature')
4. 推到分支(git push origin feature/amazing-feature)
5. 打开拉取请求

______________________________________________________________________

📄 许可证

MIT许可证-请参阅 许可证 了解详情。

______________________________________________________________________

👤 作者

尤素福·德米尔科帕兰 - @像素字节

______________________________________________________________________

🔗 链接

• 图API文件
• 模型上下文协议