Figma-Context-MCP 开发环境搭建指南：从源码编译到热重载配置

Figma-Context-MCP 是为 AI 编码助手（如 Cursor）提供 Figma 设计数据的 Model Context Protocol 服务器。本文将详细介绍如何从源码搭建完整的开发环境，包括安装依赖、编译构建、配置热重载等功能。

🛠️ 环境准备与依赖安装

首先克隆项目到本地：

git clone https://gitcode.com/gh_mirrors/fi/Figma-Context-MCP
cd Figma-Context-MCP

项目使用 pnpm 作为包管理器，需要安装依赖：

pnpm install

📦 TypeScript 编译配置

项目使用 TypeScript 开发，编译配置位于 tsconfig.json，主要配置包括：

• ES2022 目标版本
• 严格模式启用
• 源码映射生成
• 声明文件输出

构建命令：

pnpm build

🔥 热重载开发模式

项目支持热重载开发，使用 tsup.config.ts 配置：

pnpm dev        # 标准开发模式
pnpm dev:cli    # CLI 开发模式

热重载功能会在文件变更时自动重新编译并重启服务器，极大提升开发效率。

🧪 测试环境配置

测试配置位于 jest.config.js，支持 ESM 模块和 TypeScript：

pnpm test       # 运行测试
pnpm type-check # 类型检查

🔑 环境变量配置

创建 .env 文件配置 Figma API 密钥：

FIGMA_API_KEY=your_figma_api_key_here
PORT=3000

🚀 启动与调试

开发环境启动：

pnpm start      # 生产模式
pnpm start:cli  # CLI 模式
pnpm start:http # HTTP 模式

📋 开发脚本详解

package.json 中包含丰富的开发脚本：

• build - 生产构建
• dev - 开发模式带监听
• lint - 代码检查
• format - 代码格式化
• inspect - MCP 协议检查

💡 开发技巧

1. 使用开发模式：pnpm dev 支持文件监听和自动重启
2. 环境变量配置：通过 .env 文件管理敏感信息
3. 类型安全检查：定期运行 pnpm type-check
4. 测试驱动：编写测试用例确保功能稳定性

通过以上步骤，你可以快速搭建 Figma-Context-MCP 的完整开发环境，享受高效的开发体验。