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 许可证