local-only server

The server can only run on the client’s local machine because it depends on local resources.

Integrations

Enables configuration of the MCP server using environment variables stored in a .env file, particularly for storing the Figma API token.
Converts Figma design elements into organized CSS styles, automatically divides styles into logical groups (typography, colors, layouts), and generates meaningful class names based on properties.
Retrieves and optimizes design data from Figma files, extracts design tokens (typography and colors), converts design elements to CSS, and generates CSS class names based on design properties.

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

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

主な特徴

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

インストール

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

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ライセンス

You must be authenticated.

A

security – no known vulnerabilities

F

license - not found

A

quality - confirmed to work

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