记录自己摸索配置的过程中,不喜勿喷!!!我是使用本地启动的MCP!!!
找到2个mcp的github:
https://github.com/1yhy/Figma-Context-MCP 取代号1
https://github.com/GLips/Figma-Context-MCP 取代号2
下载源码
到本地后,检查系统环境:
- Node.js v18.0.0+ 或 v20.0.0+(推荐)
- pnpm v7.0+ 或 npm v8.0+
检查Node.js版本
node -v
检查pnpm版本
pnpm -v
如未安装pnpm,可通过npm安装
npm install -g pnpm
源码的核心目录结构:
Figma-Context-MCP/
├── src/ # 源代码目录
├── package.json # 项目依赖配置
├── .env.example # 环境变量示例
└── tsconfig.json # TypeScript配置
安装依赖与构建
cd Figma-Context-MCP # 安装项目依赖 pnpm install # 构建项目 pnpm run build
复制并配置环境变量文件
复制示例配置文件
cp .env.example .env
# Your Figma API access token
# Get it from your Figma account settings: https://www.figma.com/developers/api#access-tokens
FIGMA_API_KEY=your_figma_api_key_here
# Server configuration 服务器监听端口
PORT=3333
# 测试用Figma文件
TEST_FIGMA_FILE_KEY=xxx
# 测试用节点ID
TEST_FIGMA_NODE_ID=xxx
# 本地文件配置
LOCAL_FIGMA_DIR=./figma_files # 本地Figma文件存储目录
CACHE_EXPIRY_DAYS=7 # 缓存过期时间
# 性能优化配置
SKIP_IMAGE_DOWNLOADS=true # 离线环境设为true
OUTPUT_FORMAT=json # 输出格式
启动服务
pnpm run start

代表成功,ctrl+c关掉,之后用的都是生成的dist文件夹下的。
主要涉及的是codex的配置文件config.toml的配置,codex文件默认在C:\Users\xxxx\.codex
代号1的配置:
[mcp_servers.Framelink_Figma_MCP]
enabled = true
command = "D:\\software\\nodejs\\node.exe"
args = [
"F:\\codex_code\\Figma-Context-MCP\\dist\\index.js",
"--stdio"
]
startup_timeout_sec = 120
[mcp_servers.Framelink_Figma_MCP.env]
FIGMA_API_KEY = "figd_xxxxxx"
代号2的配置:
[mcp_servers.Framelink_Figma_MCP]
enabled = true
command = "D:\\software\\nodejs\\node.exe"
args = [
"F:\\codex_code\\Figma-Context-MCP-main\\dist\\bin.js",
"--stdio"
]
startup_timeout_sec = 120
[mcp_servers.Framelink_Figma_MCP.env]
FIGMA_API_KEY = "figd_xxxxxx"
FRAMELINK_TELEMETRY = "off"
获取 Figma API 令牌
- 访问 Figma 账户设置
- 滚动到 "Personal access tokens"
- 点击 "Create new token"
- 复制令牌,此令牌也就是上述配置的FIGMA_API_KEY的值。