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 使用以下工具：
Get data from Figma URL https://www.figma.com/file/abc123/my-design?node-id=123-456结果：MCP 将返回优化的 Figma 数据。
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"
}
}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 REST API 获取设计数据。它支持常规文件和新设计 URL 的 URL。您可以使用node-id指定特定节点。
优化过程包括以下步骤：
删除不必要的属性
将样式分成几组（排版、颜色、布局……）
合并相似的样式以减少重复
自动生成 CSS 类名
令牌提取过程：
识别设计中使用的字体和颜色样式
为每个令牌创建标准化的命名约定
按类型（字体或颜色）对标记进行分组
删除重复项并组织它们以便于与设计系统轻松集成
MCP 对返回数据的大小有限制；大文件将保存到figma_data目录
复数向量属性未完全保留
复杂的渐变和效果可能需要额外的处理
MIT 许可证
| Name | Required | Description | Default |
|---|---|---|---|
| figmaUrl | Yes | Figma URL or file ID | |
| fullJson | No | If true, returns full uncompressed JSON data | |
| cleanData | No | If true, removes unnecessary properties for HTML/CSS rendering |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Tool has no description.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Tool has no description.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Tool has no description.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Tool has no description.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
Tool has no description.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Tool has no description.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
v1.0.0figmaDesignScored across 1 tool
With only one tool, there is no possibility of confusion between tools.
A single tool trivially follows a consistent naming pattern with itself.
One tool for a Figma MCP is extremely limited; a typical Figma integration would require many more operations, making this an extreme mismatch.
The tool has no description, and a single tool cannot cover the expected domain of Figma operations (e.g., fetching designs, components, etc.), indicating severe incompleteness.
The Figma MCP server brings Figma design context directly into your AI workflow.
Access and maintain design system docs, tokens, components, skills, and contexts across any project.
Turn any live website into brand colors, fonts, design tokens, SVGs, Lottie and paste-ready code.
Build and manage your design system with AI: tokens, themes, components, icons, Figma and code.
