M
MatthewDailey/figma-mcp
ModelContextProtocol for Figma's REST API
在 GitHub 查看 ↗链接已于 2026-11-12 核查 · HTTP 200 · 打开的是厂商自己的官网
安装与配置
- 复制上面的命令
- 粘成
claude_desktop_config.json里mcpServers的一项（本地服务器用 command + args，示例见 客户端接法） - 重启客户端
客户端配置（取自该仓库的安装命令）
{
"mcpServers": {
"matthewdailey-figma-mcp": {
"command": "npx",
"args": ["figma-mcp"]
}
}
}解析自我们于 2026-11-04 抓取的该仓库 README；我们未执行过。
command/args 来自仓库写明的安装命令；不确定时请以该项目 README 为准。
VS Code（.vscode/mcp.json —— 键名是 servers）
{
"servers": {
"matthewdailey-figma-mcp": {
"command": "npx",
"args": ["figma-mcp"]
}
}
}VS Code 顶层键是 <code>servers</code>，其余与上面那份相同。
Claude Code（命令行）
claude mcp add --transport stdio matthewdailey-figma-mcp -- npx figma-mcp
Claude Code 不收 JSON 文件，用这条命令直接加。
配置项的键名以你的客户端为准：客户端与 CLI
- 来源明细
- 收录自 abordage/awesome-mcp 榜单（我们从中收集的条目之一） · 条目类型：MCP 服务
- 收录与活跃
- 收录于 2026-11-05 · 最近见到 2026-11-14 · 共见到 10 次 · 被 10 个来源列出
- 评分构成
- 综合分 1,003 · 10 个来源 · mcp
- 安装
npx figma-mcp
常见问题（答案都来自我们的记录）
怎么安装？
该仓库给出的安装命令是
npx figma-mcp。我们的记录里它是仓库自己提供的；不保证在你的客户端上直接可用。它适合谁 / 用来做什么？
我们把它归在这些标签下: MCP 服务。标签来自条目自身，不是我们强加的分类。
谁维护它、还在更新吗？
我们收录于 2026-11-05；最近见到 2026-11-14。这里没有"官方认证"或"质量评级"——我们只记录来源与时间。
# Figma MCP Server
以下摘录自该仓库的 README（片段） · 在 GitHub 读完整 README →
A ModelContextProtocol server that enables AI assistants to interact with Figma files. This server provides tools for viewing, commenting, and analyzing Figma designs directly through the ModelContextProtocol.
## Features
Add a Figma file to your chat with Claude by providing the url
Read and post comments on Figma files
## Setup with Claude
### Installing via Smithery
To install Figma MCP Server for Claude Desktop automatically via Smithery:
bash
npx -y @smithery/cli install @MatthewDailey/figma-mcp --client claude
1. Download and install Claude desktop app from claude.ai/download
2. Get a Figma API Key (figma.com -> click your name top left -> settings -> Security). Grant File content and Comments scopes.
2. Configure Claude to use the Figma MCP server. If this is your first MCP server, run the following in terminal.
bash
echo '{
"mcpServers": {
"figma-mcp": {
"command": "npx",
"args": ["figma-mcp"],
"env": {
"FIGMAAPIKEY": " "
}' > ~/Library/Application\ Support/Claude/claudedesktopconfig.json
If it's not, copy the figma-mcp block to your claudedesktopconfig.json
3. Restart Claude Desktop.
4. Look for the hammer icon with the number of available tools in Claude's interface to confirm the server is running.
## Example usage
Start a new chat with claude desktop and paste the following
What's in this figma file?
https://www.figma.com/design/MLkM98c1s4A9o9CMnHEyEC
## Demo of a more realistic usage
https://www.loom.com/share/0e759622e05e4ab1819325bcf6128945?sid=bcf6125b-b5de-4098-bf81-baff157e3dc3
## Development Setup
### Running with Inspector
For development and debugging purposes, you can use the MCP Inspector tool. The Inspector provides a visual interface for testing and monitoring MCP server interactions.
Visit the Inspector documentation for detailed setup instructions and usage guidelines.
The command to test locally with Inspector is
npx @modelcontextprotocol/inspector npx figma-mcp
### Local Development
1. Clone the repository
2. Install dependencies:
bash
npm install
3. Build the project:
bash
npm run build
4. For development with auto-rebuilding:
bash
npm run watch
## Available Tools
The server provides the following tools:
## Features
Add a Figma file to your chat with Claude by providing the url
Read and post comments on Figma files
## Setup with Claude
### Installing via Smithery
To install Figma MCP Server for Claude Desktop automatically via Smithery:
bash
npx -y @smithery/cli install @MatthewDailey/figma-mcp --client claude
1. Download and install Claude desktop app from claude.ai/download
2. Get a Figma API Key (figma.com -> click your name top left -> settings -> Security). Grant File content and Comments scopes.
2. Configure Claude to use the Figma MCP server. If this is your first MCP server, run the following in terminal.
bash
echo '{
"mcpServers": {
"figma-mcp": {
"command": "npx",
"args": ["figma-mcp"],
"env": {
"FIGMAAPIKEY": " "
}' > ~/Library/Application\ Support/Claude/claudedesktopconfig.json
If it's not, copy the figma-mcp block to your claudedesktopconfig.json
3. Restart Claude Desktop.
4. Look for the hammer icon with the number of available tools in Claude's interface to confirm the server is running.
## Example usage
Start a new chat with claude desktop and paste the following
What's in this figma file?
https://www.figma.com/design/MLkM98c1s4A9o9CMnHEyEC
## Demo of a more realistic usage
https://www.loom.com/share/0e759622e05e4ab1819325bcf6128945?sid=bcf6125b-b5de-4098-bf81-baff157e3dc3
## Development Setup
### Running with Inspector
For development and debugging purposes, you can use the MCP Inspector tool. The Inspector provides a visual interface for testing and monitoring MCP server interactions.
Visit the Inspector documentation for detailed setup instructions and usage guidelines.
The command to test locally with Inspector is
npx @modelcontextprotocol/inspector npx figma-mcp
### Local Development
1. Clone the repository
2. Install dependencies:
bash
npm install
3. Build the project:
bash
npm run build
4. For development with auto-rebuilding:
bash
npm run watch
## Available Tools
The server provides the following tools:
收录徽章（可选）
想把收录标记放进 README 就复制这行，可选，不影响收录。
[](https://anclum.com/zh/s/matthewdailey-figma-mcp/)
- 来源
- awesome · https://github.com/MatthewDailey/figma-mcp
- 按领域浏览
- MCP 服务
- 收录来源
- 10 个独立来源
- 收录于
- 今天
同类推荐
所属领域与标签
每个标签都能点进去看同类的全部条目。数字是当前库里的真实条数。