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_hereMCP サーバーを実行します。
node index.jsカーソル チャットを通じて次のツールを使用できます。
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 は、Figma デザインから抽出されたタイポグラフィとカラー トークンを含む JSON オブジェクトを返します。
応答例:
{
"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の両方をサポートしています。node 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.
