A
securityF
licenseA
qualityA Model Context Protocol server that provides access to Figma API functionality, allowing AI assistants like Claude to interact with Figma files, comments, components, and team resources.
Last updated -
18
179
3
Figma MCP（模型上下文协议）
使用模型上下文协议通过 Cursor Agent 创建和修改 Figma 设计的完整解决方案。
博客： https ://xflux.us/2025/04/06/ai-powered-design-automation-building-a-figma-mcp-with-cursor/ 
概述
该项目通过 Cursor Agent 使用自然语言提示，在 Figma 中实现 AI 驱动的设计创作。它由两个主要组件组成：
MCP 服务器：一个实现模型上下文协议并通过 WebSockets 与 Figma 插件通信的 Bun + TypeScript 服务器。
Figma 插件：在 Figma 中运行并根据 MCP 服务器的指令执行设计操作的插件。
通过这种集成，您可以使用自然语言来：
创建基本设计元素（形状、文本等）
设计包含多个部分的完整页面布局
修改现有设计
存储库结构
figma-mcp-server/ ：MCP 服务器实现
figma-plugin/ ：用于执行设计操作的 Figma 插件
快速入门
1. 设置 MCP 服务器
cd figma-mcp-server
cp .env.example .env # Edit this file to add your Figma token
bun install
bun run index.ts
2.设置 Figma 插件
cd figma-plugin
npm install
npm run build
然后将插件导入 Figma：
打开 Figma
转到插件>开发>从清单导入插件
选择
figma-plugin/manifest.json文件
3. 连接到游标代理
在光标中：
转至设置 > 代理 > MCP 服务器
添加一个新服务器，URL 为：
http://localhost:3000/api/mcp/schema
详细文档
有关更详细的说明，请参阅：
示例用法
一切设置完成后，您可以使用 Cursor Agent 创建带有如下提示的设计：
Create a landing page with a header, hero section with heading "Our Product" and subheading "The best solution for your needs", 3 features in the features section, and a footer with contact information.
工作原理
光标代理接收自然语言提示
它向 MCP 服务器发送结构化的 MCP 请求
MCP 服务器处理请求并通过 WebSocket 向 Figma 插件发送指令
Figma插件在Figma中执行设计操作
执照
麻省理工学院
hybrid server
The server is able to function both locally and remotely, depending on the configuration or use case.
实现模型上下文协议的 TypeScript 服务器，通过光标代理使用自然语言提示在 Figma 中进行 AI 驱动的设计创作。
Related MCP Servers
- -securityAlicense-qualityA Model Context Protocol server that integrates Figma design files with AI coding tools like Cursor, Windsurf, and Cline, allowing AI tools to access and understand Figma design data for generating more accurate code.Last updated -215MIT License
- -securityFlicense-qualityA Model Context Protocol server that connects AI tools and LLMs to Figma designs, enabling them to extract design data, analyze design systems, and generate development documentation.Last updated -1072
- -securityFlicense-qualityA Python implementation of the Model Context Protocol server that enables AI assistants to interact with Figma through WebSocket connections, allowing them to read, analyze, and export design data.Last updated -10