グラビティグローバルフィグマ MCP

Gravity Global Figma MCP は、モデルコンテキストプロトコル (MCP) を介して Figma と Cursor を統合し、コード変換のために Figma から設計データを取得して最適化できるようにするツールです。

主な特徴

Figmaデータ取得: URLまたはファイルIDを使用してFigmaファイルからデザイン情報を取得します
データ最適化: 不要なプロパティを削除してJSONのサイズを縮小します
CSS 変換: スタイルを自動的にグループに分割して整理します (タイポグラフィ、色、レイアウトなど)
CSSクラス名生成:プロパティに基づいて意味のあるクラス名を自動的に作成します
デザイントークンの抽出のデザインからタイポグラフィとカラートークンを抽出します

インストール

リポジトリをクローンします。

git clone <repository-url>

依存関係をインストールします:

npm install

.envファイルを作成し、Figma API トークンを追加します。

FIGMA_API_KEY=your_figma_api_token_here

MCP サーバーを実行します。

node index.js

使用法

カーソルチャット

カーソルチャットを通じて次のツールを使用できます。

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 は、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"
  }
}

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の両方をサポートしています。node node-idを使用して特定のノードを指定できます。

データの最適化

最適化プロセスには次の手順が含まれます。

不要なプロパティを削除する
スタイルをグループに分ける (タイポグラフィ、色、レイアウトなど)
類似のスタイルを統合して重複を減らす
CSSクラス名の自動生成

トークン抽出

トークン抽出プロセス:

デザインに使用されているタイポグラフィとカラースタイルを識別します
各トークンの標準化された命名規則を作成します
トークンをタイプ（書体または色）別にグループ化します
重複を削除して整理し、デザインシステムとの統合を容易にします

制限事項

MCPでは返されるデータのサイズに制限があり、大きなファイルはfigma_dataディレクトリに保存されます。
複雑なベクトル特性は完全には保存されない
複雑なグラデーションや効果には追加の処理が必要になる場合があります

ライセンス

MITライセンス

Install Server

HTTP connection URL

security – no known vulnerabilities

license - not found

quality - confirmed to work

How are these scores calculated?

remote-capable server

The server can be hosted and run remotely because it primarily relies on remote services or has no dependency on the local environment.

モデルコンテキストプロトコルを介して Figma と Cursor を統合するツール。ユーザーは、Figma ファイルからデザインデータを取得、最適化し、構造化された CSS およびデザイントークンに変換できます。

Related MCP Servers

Figma MCP Server
GLips
-
security
A
license
-
quality
Enables Cursor to access Figma files through the Model Context Protocol, enhancing its ability to accurately interpret and utilize design data for code generation.
Last updated -
5
15,222
9,542
TypeScript
MIT License
Talk to Figma MCP
sonnylazuardi
A
security
A
license
A
quality
An MCP server integration that enables Cursor AI to communicate with Figma, allowing users to read designs and modify them programmatically through natural language commands.
Last updated -
19
2,677
4,958
JavaScript
MIT License
Figma MCP Server
1yhy
-
security
A
license
-
quality
A Model Context Protocol server that integrates Figma design files with AI coding tools like Cursor, Windsurf, and Cline, allowing AI tools to access and understand Figma design data for generating more accurate code.
Last updated -
13
14
TypeScript
MIT License
Cursor Talk to Figma MCP
paragdesai1
A
security
A
license
A
quality
Implements a Model Context Protocol integration between Cursor AI and Figma, allowing Cursor to programmatically read and modify Figma designs.
Last updated -
33
2,677
JavaScript
MIT License

View all related MCP servers

Gravity Global Figma MCP