Gravity Global Figma MCP
Gravity Global Figma MCP 是一个通过模型上下文协议 (MCP) 将 Figma 与 Cursor 集成的工具，可让您从 Figma 中检索和优化设计数据以进行代码转换。
主要特点
Figma 数据检索：使用 URL 或文件 ID 从 Figma 文件获取设计信息
数据优化：通过删除不必要的属性来减少 JSON 大小
CSS 转换：自动将样式划分并组织成组（排版、颜色、布局……）
CSS 类名生成：根据属性自动创建有意义的类名
设计令牌提取：从 Figma 设计中提取字体和颜色令牌
Related MCP server: Talk to Figma MCP
安装
克隆存储库：
git clone <repository-url>安装依赖项：
npm install创建一个
.env文件并添加您的 Figma API 令牌：
FIGMA_API_KEY=your_figma_api_token_here运行 MCP 服务器：
node index.js用法
在光标聊天中
您可以通过 Cursor Chat 使用以下工具：
1.从 Figma 检索数据
Get data from Figma URL https://www.figma.com/file/abc123/my-design?node-id=123-456结果：MCP 将返回优化的 Figma 数据。
2. 提取设计令牌
Extract typography and color tokens from Figma URL https://www.figma.com/file/abc123/my-design结果：MCP 将返回一个 JSON 对象，其中包含从 Figma 设计中提取的字体和颜色标记。
响应示例：
{
"typography": {
"opensans-600-32": {
"fontFamily": "Open Sans",
"fontSize": "32px",
"fontWeight": 600,
"lineHeight": "48px"
},
"avenirnext-400-16": {
"fontFamily": "Avenir Next",
"fontSize": "16px",
"fontWeight": 400,
"lineHeight": "24px"
}
},
"colors": {
"bg-ffffff": "#ffffff",
"text-030e12": "#030e12"
}
}3. 选项
figma设计工具：
fullJson=true ：返回完整的未压缩的 JSON 数据
cleanData=true ：删除 HTML/CSS 渲染中不必要的属性
figmaTokens 工具：
tokenTypes=["typography"] ：仅提取排版标记
tokenTypes=["colors"] ：仅提取颜色标记
tokenTypes=["typography", "colors"] ：提取两者（默认）
例子：
Extract only color tokens from Figma URL https://www.figma.com/file/abc123/my-design数据结构
转换后的 Figma 数据结构如下：
{
"nodes": {
"nodeId": {
"id": "nodeId",
"name": "Node Name",
"type": "FRAME",
"fillStyleId": "style123",
"layoutStyleId": "style456",
"children": [...]
}
},
"styles": {
"style123": {
"backgroundColor": "#ffffff",
"opacity": 1,
"categories": { "colors": "color1" }
}
},
"optimizedStyles": {
"typography": {...},
"colors": {...},
"layout": {...},
"spacing": {...},
"sizing": {...}
},
"classNames": {
"style123": "bg-1",
"style456": "flex-row-1"
}
}技术细节
Figma 数据检索
该工具使用 Figma REST API 获取设计数据。它支持常规文件和新设计 URL 的 URL。您可以使用node-id指定特定节点。
数据优化
优化过程包括以下步骤：
删除不必要的属性
将样式分成几组（排版、颜色、布局……）
合并相似的样式以减少重复
自动生成 CSS 类名
令牌提取
令牌提取过程：
识别设计中使用的字体和颜色样式
为每个令牌创建标准化的命名约定
按类型（字体或颜色）对标记进行分组
删除重复项并组织它们以便于与设计系统轻松集成
限制
MCP 对返回数据的大小有限制；大文件将保存到
figma_data目录复数向量属性未完全保留
复杂的渐变和效果可能需要额外的处理
执照
MIT 许可证
Resources
Looking for Admin?
Admins can modify the Dockerfile, update the server description, and track usage metrics. If you are the server author, to access the admin panel.