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

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

主な特徴

• Figmaデータ取得: URLまたはファイルIDを使用してFigmaファイルからデザイン情報を取得します

• データ最適化: 不要なプロパティを削除してJSONのサイズを縮小します

• CSS 変換: スタイルを自動的にグループに分割して整理します (タイポグラフィ、色、レイアウトなど)

• CSSクラス名生成:プロパティに基づいて意味のあるクラス名を自動的に作成します

• デザイントークンの抽出:Figmaのデザインからタイポグラフィとカラートークンを抽出します

Related MCP server: Talk to Figma MCP

インストール

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

git clone <repository-url>

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

npm install

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

FIGMA_API_KEY=your_figma_api_token_here

4. 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を使用して特定のノードを指定できます。

データの最適化

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

1. 不要なプロパティを削除する

2. スタイルをグループに分ける (タイポグラフィ、色、レイアウトなど)

3. 類似のスタイルを統合して重複を減らす

4. CSSクラス名の自動生成

トークン抽出

トークン抽出プロセス:

1. デザインに使用されているタイポグラフィとカラースタイルを識別します

2. 各トークンの標準化された命名規則を作成します

3. トークンをタイプ（書体または色）別にグループ化します

4. 重複を削除して整理し、デザインシステムとの統合を容易にします

制限事項

• MCPでは返されるデータのサイズに制限があり、大きなファイルはfigma_dataディレクトリに保存されます。

• 複雑なベクトル特性は完全には保存されない

• 複雑なグラデーションや効果には追加の処理が必要になる場合があります

ライセンス

MITライセンス