Figma Context MCP 源码解析

01

MCP (Model Context Protocol) 协议概述

Model Context Protocol (MCP) 是一个开放标准，它定义了AI应用程序如何与外部数据源和工具进行安全、受控的交互。MCP的核心理念是为AI模型提供标准化的上下文获取机制，让AI助手能够访问实时、准确的信息来增强其响应能力。

MCP 的工作原理

MCP基于客户端-服务器架构：

• MCP客户端：通常是AI应用程序（如Cursor、Claude code等）

• MCP服务器：提供特定功能或数据访问的服务

• 传输层：支持STDIO、HTTP等多种通信方式

MCP借鉴了微服务架构的设计思想，AI客户端进行服务发现，并且实现了安全管控能力。MCP服务将传统API拆解为"Tools"，通过统一JSON-RPC协议暴露，解决AI模型调用的标准化问题。MCP请求中嵌入context字段（如用户意图、历史步骤），使服务能基于业务状态动态调整策略。

基于modelcontextprotocol库，我们可以快速创建一个MCP服务，以获取Figma数据为例:

import { McpServer } from"@modelcontextprotocol/sdk/server/mcp.js";

// 1. 创建MCP服务器实例
const server = new McpServer({
  name: "Figma MCP Server",
  version: "0.4.3"
});

// 2. 注册具体工具 - 相当于在店里摆放各种工具
server.tool(
"get_figma_data", 
"获取Figma设计文件的节点信息", 
  { 
    type: "object",
    properties: {
      fileKey: { type: "string" },  // 需要文件ID
      nodeId: { type: "string" }    // 需要节点ID（可选）
    },
    required: ["fileKey"]
  },
async (args) => {           // 处理函数：实际执行的逻辑
    // 这里是具体的业务代码
    returnawait figmaService.getFile(args.fileKey);
  }
);

当这个McpServer被注册到MCP客户端后，get_figma_data这一工具就可以被AI助手发现并调用，其返回结果可以作为AI助手的上下文。

使用MCP的优势在于：

• 标准化接口：统一的工具注册和调用机制

• 类型安全：基于Schema的参数验证

• 安全控制：严格的权限和访问控制

• 可扩展性：支持多种数据源和功能集成

02

Figma Context MCP

Figma Context MCP是一个专门为AI编程工具设计的MCP服务，它解决了AI助手无法直接访问Figma设计文件的痛点。价值在于：

1. 桥接设计与开发：连接Figma设计工具与AI编程助手（如Cursor）

2. 确保设计一致性：基于真实设计数据而非截图进行开发，使AI生成更为精确

3. 数据裁剪与转化: 对Figma原始数据进行了简化，只保留对写代码最有用的部分提供给AI

项目结构

src/
├── cli.ts             # 命令行入口，支持STDIO和HTTP模式
├── config.ts          # 配置管理，支持环境变量和CLI参数
├── mcp.ts             # MCP服务器入口，工具注册与处理
├── server.ts          # HTTP服务器实现
├── services/          # 核心业务逻辑
│   ├── figma.ts       # Figma API封装
│   └── simplify-node-response.ts  # 数据简化处理
├── transformers/      # 数据转换器
│   ├── layout.ts      # 布局信息转换
│   ├── style.ts       # 样式属性转换
│   └── effects.ts     # 视觉效果转换
└── utils/             # 工具函数
    ├── common.ts      # 通用工具
    ├── logger.ts      # 日志系统
    └── sanitization.ts # 数据清理

核心依赖

{
  "@modelcontextprot