Skip to main content
Glama
deenesjakoruzh
TrungLee003

Figma Agent MCP

by TrungLee003
OverviewSchemaRelated ServersScoreDiscussions
TypeScript
Local

⚡ Figma Agent MCP

本地优先的 AI 设计代理，用于 Figma，通过 Model Context Protocol (MCP) → WebSocket 桥接 → 原生 Figma 插件。

使用确定性类型工具、设计系统感知、令牌压缩和即用型复合工作流，原生检查、创建、修改、样式化、验证和优化 Figma 设计。

CI 状态 TypeScript 严格模式 测试 MCP 工具 许可证：MIT

🏛️ 系统架构

┌─────────────────────────────────────────────────────────────┐
│             AI Client (Claude / Cursor / Antigravity / LLM) │
└──────────────────────────────┬──────────────────────────────┘
                               │ MCP Protocol (stdio / SSE)
                               ▼
┌─────────────────────────────────────────────────────────────┐
│        MCP Server (@figma-agent/mcp-server — 48 Tools)      │
│  - Tool Registry & Validation  - Session Router             │
│  - Context Compiler (>70% cut) - Composite Skills Runtime   │
└──────────────────────────────┬──────────────────────────────┘
                               │
                               ▼
┌─────────────────────────────────────────────────────────────┐
│       Command Engine (@figma-agent/command-engine)          │
│  - Batch Transaction Pipeline  - Idempotency & Rollback     │
└──────────────────────────────┬──────────────────────────────┘
                               │ Local WebSocket (ws://127.0.0.1:3055)
                               ▼
┌─────────────────────────────────────────────────────────────┐
│       Bridge Server (@figma-agent/bridge-server)            │
│  - Channel Pairing (128-bit)   - Request/Response Matcher   │
│  - Heartbeat & Auto-reconnect  - 50+ Concurrent Sockets     │
└──────────────────────────────┬──────────────────────────────┘
                               │
                               ▼
┌─────────────────────────────────────────────────────────────┐
│        Figma Plugin (@figma-agent/figma-plugin)             │
│  - Typed Command Dispatcher    - Pure Font Engine           │
│  - Native Node Mutation        - Zero External Dependencies │
└──────────────────────────────┬──────────────────────────────┘
                               │ Figma Plugin API
                               ▼
┌─────────────────────────────────────────────────────────────┐
│                         Figma Canvas                        │
└─────────────────────────────────────────────────────────────┘

🌟 主要亮点

  • 🔒 本地优先且安全：默认绑定到 127.0.0.1。128 位秘密通道配对。不在 Figma 内部执行任意 JavaScript。

  • 🧩 48 个确定性 MCP 工具：全面覆盖读取、创建、修改、自动布局、视觉样式、组件、变量/令牌、排版和导出。

  • ⚡ 上下文编译器（令牌减少超过 70%）：将庞大的节点树压缩为语义化 Markdown 或紧凑型 DSL，在 100 毫秒内完成自适应深度修剪和令牌预算强制执行。

  • 🛡️ 内置验证与 WCAG 2.1 引擎：计算普通文本、大文本和 UI 组件的相对亮度和对比度比率 (AA/AAA)；自动布局检查器；4px/8px 令牌网格审计器。

  • 🔄 原子批量执行：使用 stopOnFirstError 或 continueOnError 错误恢复策略，顺序执行命令管道。

  • 🚀 即用型代理技能：预打包的复合工作流，用于即时设计系统生成、WCAG 可访问性自动修复以及线框图到高保真卡片的转换。

📦 单体仓库布局

figma-agent-mcp/
├── apps/
│   ├── mcp-server/        # 48 MCP Tools + Bridge Client + Session Service
│   ├── bridge-server/     # High-throughput WebSocket router (ws)
│   └── figma-plugin/      # Pure TypeScript native Figma Plugin
├── packages/
│   ├── protocol/          # CommandEnvelope, CommandResult, Error codes, Zod schemas
│   ├── figma-schema/      # SimplifiedNode, Layout, Style, Text, Validation schemas
│   ├── command-engine/    # Batch execution pipeline, transactions, ref resolution
│   ├── context-compiler/  # Token optimizer, tree pruner, Markdown & DSL serializers
│   ├── design-system/     # 4px/8px Spacing, Typography & Corner Radius scale matchers
│   ├── validator/         # WCAG 2.1 contrast engine, Auto Layout & design token rules
│   ├── skill-runtime/     # Composite skills registry & execution engine
│   ├── telemetry/         # Percentile metrics collector (p50, p95, p99)
│   └── shared/            # Hex/RGBA converters, Pino logger, environment config
└── tests/
    └── integration/       # 27 Vitest suites covering all phases & stress benchmarks

🚀 快速入门与设置

1. 构建单体仓库

git clone https://github.com/your-org/figma-agent-mcp.git
cd figma-agent-mcp
pnpm install
pnpm build

2. 启动桥接服务器

pnpm --filter @figma-agent/bridge-server start
# Bridge server listening at ws://127.0.0.1:3055

3. 在 Figma 桌面版中加载 Figma 插件

  1. 打开 Figma 桌面版。

  2. 转到 插件 → 开发 → 从清单导入插件...

  3. 选择 apps/figma-plugin/manifest.json。

  4. 运行 Figma Agent Bridge 插件。记下您的 通道 ID（默认为 default-channel）。

⚙️ AI 客户端配置

🤖 1. Claude 桌面版

添加到您的 claude_desktop_config.json（Windows 上为 %APPDATA%\Claude\claude_desktop_config.json，macOS 上为 ~/Library/Application Support/Claude/claude_desktop_config.json）：

{
  "mcpServers": {
    "figma": {
      "command": "node",
      "args": ["d:/Code/Figma MCP/apps/mcp-server/dist/cli.js"],
      "env": {
        "FIGMA_AGENT_BRIDGE_HOST": "127.0.0.1",
        "FIGMA_AGENT_BRIDGE_PORT": "3055",
        "FIGMA_AGENT_CHANNEL_ID": "default-channel"
      }
    }
  }
}

💻 2. Cursor IDE

添加到您的 Cursor MCP 配置（设置 → 功能 → MCP 或 .cursor/mcp.json）：

{
  "mcpServers": {
    "figma-agent": {
      "command": "node",
      "args": ["d:/Code/Figma MCP/apps/mcp-server/dist/cli.js"],
      "env": {
        "FIGMA_AGENT_BRIDGE_HOST": "127.0.0.1",
        "FIGMA_AGENT_BRIDGE_PORT": "3055",
        "FIGMA_AGENT_CHANNEL_ID": "default-channel"
      }
    }
  }
}

🧠 3. Google Antigravity / Gemini CLI

添加到您的 Antigravity MCP 设置（~/.gemini/antigravity/mcp_config.json）：

{
  "mcpServers": {
    "figma-agent": {
      "command": "node",
      "args": ["d:/Code/Figma MCP/apps/mcp-server/dist/cli.js"],
      "env": {
        "FIGMA_AGENT_BRIDGE_HOST": "127.0.0.1",
        "FIGMA_AGENT_BRIDGE_PORT": "3055"
      }
    }
  }
}

⚡ 4. OpenAI Codex / Codex CLI / OpenAI Operator

添加到您的 Codex MCP 配置（~/.codex/config.json 或 codex-settings.json）：

{
  "mcpServers": {
    "figma-agent": {
      "command": "node",
      "args": ["d:/Code/Figma MCP/apps/mcp-server/dist/cli.js"],
      "env": {
        "FIGMA_AGENT_BRIDGE_HOST": "127.0.0.1",
        "FIGMA_AGENT_BRIDGE_PORT": "3055",
        "FIGMA_AGENT_CHANNEL_ID": "default-channel"
      }
    }
  }
}

或通过 Codex CLI 注册：

# Add Figma Agent MCP to Codex CLI
codex mcp add figma-agent -- node "d:/Code/Figma MCP/apps/mcp-server/dist/cli.js"

# Inspect available tools via MCP Inspector
npx @modelcontextprotocol/inspector node "d:/Code/Figma MCP/apps/mcp-server/dist/cli.js"

🌊 5. Windsurf / Codeium IDE

添加到 ~/.codeium/windsurf/mcp_config.json：

{
  "mcpServers": {
    "figma-agent": {
      "command": "node",
      "args": ["d:/Code/Figma MCP/apps/mcp-server/dist/cli.js"],
      "env": {
        "FIGMA_AGENT_BRIDGE_HOST": "127.0.0.1",
        "FIGMA_AGENT_BRIDGE_PORT": "3055",
        "FIGMA_AGENT_CHANNEL_ID": "default-channel"
      }
    }
  }
}

📚 完整的 MCP 工具参考（48 个工具）

1. 连接与会话（2 个工具）

工具名称

参数

描述

figma.get_connection

无

获取当前的 WebSocket 桥接连接状态、延迟和会话能力。

figma.join_channel

channelId(必填), secret

切换或加入一个特定的 Figma 文档通道会话。

2. 检查与读取（6 个工具）

工具名称

参数

描述

figma.get_document

depth (0–10)

检索有限深度的文档根层架。

figma.get_selection

depth (0–10)

获取当前活动 Figma 画布中选中的节点。

figma.get_node

nodeId(必填), depth

读取特定节点的详细属性和子树。

figma.get_nodes

nodeIds(必填), depth

按 ID 批量获取多个节点。

figma.get_local_components

无

列出文件中所有可重用组件和变体。

figma.get_local_styles

type (PAINT/TEXT/EFFECT/GRID)

列出本地绘画、文本和效果样式。

3. 节点创建（4 个工具）

工具名称

参数

描述

figma.create_frame

width(必填), height(必填), x, y, name, parentId, layoutMode

创建一个带有可选自动布局的容器框架。

figma.create_text

text(必填), x, y, width, font ({family, style, size}), name, parentId

使用可靠的字体加载创建文本节点。

figma.create_rectangle

width(必填), height(必填), x, y, cornerRadius, name, parentId

创建一个矩形向量节点。

figma.create_section

width(必填), height(必填), x, y, name, parentId

创建一个节组织容器。

4. 节点修改与几何（6 个工具）

工具名称

参数

描述

figma.move_node

nodeId(必填), x(必填), y(必填)

将节点移动到绝对坐标位置。

figma.resize_node

nodeId(必填), width(必填), height(必填)

调整节点尺寸。

figma.rename_node

nodeId(必填), name(必填)

重命名节点图层标题。

figma.delete_node

nodeId(必填)

从画布中删除节点。

figma.clone_node

nodeId(必填), parentId, x, y, name

复制现有的节点层架。

figma.set_parent

nodeId(必填), targetParentId(必填), index

在图层树中重新指定父节点并排序。

5. 自动布局与响应式尺寸（2 个工具）

工具名称

参数

描述

figma.set_auto_layout

nodeId(必填), mode(必填), itemSpacing, padding ({top, right, bottom, left}), primaryAxisAlignItems, counterAxisAlignItems

配置响应式类似 Flexbox 的自动布局。

figma.set_layout_sizing

nodeId(必填), horizontal (FIXED/HUG/FILL), vertical (FIXED/HUG/FILL)

设置容器和子项轴尺寸行为。

6. 视觉样式与效果（5 个工具）

工具名称

参数

描述

figma.set_fills

nodeId(必填), fills(必填) (Array of Solid/Gradient/Image fills)

应用背景颜色、渐变和图像。

figma.set_strokes

nodeId(必填), strokes(必填), strokeWeight, strokeAlign

应用边框描边、粗细和对齐方式。

figma.set_corner_radius

nodeId(必填), radius(必填) (number or per-corner object), cornerSmoothing

设置带有 iOS 连续平滑效果的边框圆角。

figma.set_opacity

nodeId(必填), opacity(必填) (0.0 – 1.0)

调整图层不透明度。

figma.set_effects

nodeId(必填), effects(必填) (DROP_SHADOW, INNER_SHADOW, LAYER_BLUR)

应用阴影、内阴影和模糊效果。

7. 组件与实例（4 个工具）

工具名称

参数

描述

figma.create_component

name(必填), width, height, parentId, componentPropertyDefinitions

将节点转换为可重用的主组件。

figma.create_instance

componentId(必填), x, y, properties, parentId

实例化一个组件变体。

figma.set_component_properties

nodeId(必填), properties(必填)

覆盖组件变体属性。

figma.detach_instance

nodeId(必填)

将组件实例分离为常规可编辑框架。

8. 变量与设计令牌（6 个工具）

工具名称

参数

描述

figma.get_local_variables

collectionId

列出本地变量和令牌集合。

figma.create_variable

name(必填), resolvedType(必填) (COLOR/FLOAT/STRING/BOOLEAN), collectionId, collectionName, initialValue

创建一个语义化的设计令牌变量。

figma.set_variable_value

variableId(必填), modeId(必填), value(必填)

为特定模式更新变量值。

figma.bind_variable

nodeId(必填), property(必填) (fills/strokes/opacity/itemSpacing/cornerRadius), variableId(必填)

将节点属性绑定到设计令牌变量。

figma.create_paint_style

name(必填), paints(必填), description

在文件中创建一个共享的绘画样式。

(复用检查)

get_local_styles

查询共享样式。

9. 资源、图像与导出（3 个工具）

工具名称

参数

描述

figma.export_node

nodeId*, format (PNG/JPG/SVG/PDF), scale

将节点导出为 Base64 图像数据或 UTF-8 SVG 字符串。

figma.set_export_settings

nodeId, exportSettings

在节点上配置导出预设。

figma.set_image_fill

nodeId, imageBase64, scaleMode, opacity

从 Base64 上传并应用图像填充。

10. 文本与排版（6 个工具）

工具名称

参数

描述

figma.set_text_content

nodeId, text

更新文本字符串内容。

figma.set_font_size

nodeId, fontSize, start, end

更新字号（全文或范围）。

figma.set_font_family

nodeId, family, style, start, end

更改字体系列和字重，自动加载字体。

figma.set_text_alignment

nodeId*, horizontal (LEFT/CENTER/RIGHT/JUSTIFIED), vertical

设置文本对齐方式。

figma.set_line_height

nodeId*, unit (PIXELS/PERCENT/AUTO), value

设置行高间距。

figma.set_letter_spacing

nodeId, unit (PIXELS/PERCENT), value

设置字母间距（字距）。

11. 上下文优化与精简（1 个工具）

工具名称

参数

描述

figma.compile_context

nodeId, format (markdown/dsl/compact/json), maxTokens, maxDepth

编译并压缩 Figma 树，强制执行令牌预算（压缩率 >70%）。

12. 验证与无障碍（2 个工具）

工具名称

参数

描述

figma.validate_node

nodeId, rules, includeChildren

审计节点树，检查 WCAG 2.1 对比度、自动布局规则、令牌比例和图层命名健康。

figma.check_contrast

foreground, background, fontSize, isBold

计算 WCAG 2.1 相对亮度和对比度比率（AA/AAA）。

13. 复合技能与批量执行（2 个工具）

工具名称

参数

描述

figma.list_skills

无

发现可用的高级代理技能。

figma.run_skill

skillName*, payload

执行多步骤复合工作流。

figma.batch_execute

commands*, stopOnFirstError

在单个原子批量事务中执行多个 Figma 命令。

🤖 复合代理技能

1. skill.create_design_system

在几秒内创建即用型设计系统：

  • 创建变量集合：颜色调色板和令牌。

  • 创建变量：color/primary、color/background、color/surface、color/text-primary。

  • 创建对应的填充样式。

  • 生成响应式 Button/Primary 主组件，包含自动布局、圆角和令牌绑定。

2. skill.auto_fix_accessibility

审计目标布局层次结构中的 WCAG 2.1 对比度违规，并自动修复低对比度文本颜色与其背景表面，以达到 AA 合规。

3. skill.convert_wireframe_to_hifi

将低保真线框图容器转换为精美的响应式高保真 UI 卡片，包含自动布局、现代表面填充、柔和投影和连续圆角平滑。

🧪 测试与验证

运行全面的测试套件（27 个测试文件中的 115 个通过测试）：

# Run format checking
pnpm format:check

# Run full build
pnpm build

# Run unit and integration tests
pnpm test

# Strict TypeScript typechecking
pnpm typecheck

# ESLint audit
pnpm lint

基准测试结果：

  • ⚡ WebSocket 并发：50 个并发客户端连接，突发心跳：p95 < 100ms，0 次掉线。

  • 🌳 大规模树缩放：上下文编译 6,111 个节点，令牌预算 1,000：执行时间 < 100ms，压缩率 >70%。

  • 🛡️ 容错性：自动重连和错误处理，在套接字掉线时使用 retryable 标志。

📄 许可证

MIT © 2026 Figma Agent MCP 贡献者

This server cannot be installed

-
license - not tested
-
quality - not tested
B
maintenance

How are these scores calculated?

Maintenance

–Maintainers
–Response time
–Release cycle
–Releases (12mo)
Commit activity

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Related MCP Connectors

  • Figma MCP Server

    The Figma MCP server brings Figma design context directly into your AI workflow.

  • microservices.sh

    MCP server for AI agents to plan, verify, and deploy Cloudflare-native apps.

  • mcp

    MCP server connecting AI agents to non-custodial staking data across 130+ networks.

View all MCP Connectors

Latest Blog Posts

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/TrungLee003/figma-agent-mcp'

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