AI导哈

Figma设计AI对接服务器

专为Figma设计与AI辅助开发之间搭建桥梁的MCP服务器，提供LLM优化的设计数据访问。

  • by haitham-akram
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 haitham-akram/Figma-MCP-Server

使用说明

Figma设计器MCP服务器

一个专门的模型上下文协议（MCP）服务器，弥合了Figma设计和人工智能辅助开发之间的差距。它以LLM优化的格式向AI代理公开Figma设计数据（页面、组件、样式和实现计划）。

特性

  • 🎨 Figma集成：使用官方Figma API深度访问Figma文件。
  • 📐 页面和组件映射：提取高级文件结构和详细的组件层次结构。
  • 🪙 设计令牌提取：自动识别颜色、排版、间距和其他标记。
  • 📑 实施计划：生成与框架无关的架构计划和布局策略。
  • 📚 自我记录：包括内置 getDocumentation 教AI代理如何正确解释和使用设计数据的工具。
  • 🚀 生产就绪：使用Fastify、TypeScript和预编译的JSON模式构建，以实现高性能。
  • 💾 智能高速缓存：内置缓存管理器，以减少API调用并提高响应能力。

安装

1.克隆存储库

git clone <your-repo-url>
cd figma-mcp-server

2.安装依赖项

npm install

3.建设项目

npm run build

配置

获取Figma代币

要使用此服务器，您需要一个Figma个人访问令牌：

  1. 登录到您的 Figma账户.
  2. 首选 设置 （左上角菜单>设置）。
  3. 向下滚动到 个人访问令牌 部分。
  4. 生成新令牌并立即复制。

设置环境

创建 .env 根目录中的文件：

cp .env.example .env

打开 .env 并添加您的令牌：

FIGMA_ACCESS_TOKEN=figd_your_token_here
PORT=5000

用法

连接到代理（VS代码/克劳德/光标）

运行附带的安装脚本以获取您的特定注册JSON：

bash setup-production.sh

将生成的JSON块复制到IDE的MCP设置中。服务器将自动从您的 .env 文件，因此配置保持干净和安全。

可用工具

工具 说明
getDocumentation 先叫这个。 为代理提供规则和格式指南。
getFigmaPageOverview 列出文件中的所有页面和高级节点计数。
getComponentMap 返回具有父/子关系的组件的扁平列表。
getDesignTokens 提取系统的风格值（颜色、排版、间距）。
getImplementationPlan 生成分步指导和组件到代码的映射。

开发流程

在开发模式下运行（自动重新加载）

npm run dev

测试服务器

您可以使用内置的测试脚本来验证与特定Figma文件的连接：

bash test_script.sh

许可证

ISC

相关 MCP