グラビティグローバル フィグマ MCP
Gravity Global Figma MCP は、モデル コンテキスト プロトコル (MCP) を介して Figma と Cursor を統合し、コード変換のために Figma から設計データを取得して最適化できるようにするツールです。
主な特徴
Figmaデータ取得: URLまたはファイルIDを使用してFigmaファイルからデザイン情報を取得します
データ最適化: 不要なプロパティを削除してJSONのサイズを縮小します
CSS 変換: スタイルを自動的にグループに分割して整理します (タイポグラフィ、色、レイアウトなど)
CSSクラス名生成:プロパティに基づいて意味のあるクラス名を自動的に作成します
デザイントークンの抽出:Figmaのデザインからタイポグラフィとカラートークンを抽出します
Related MCP server: Talk to Figma MCP
インストール
リポジトリをクローンします。
依存関係をインストールします:
.envファイルを作成し、Figma API トークンを追加します。
MCP サーバーを実行します。
使用法
カーソルチャット
カーソル チャットを通じて次のツールを使用できます。
1. Figmaからデータを取得する
結果: MCP は最適化された Figma データを返します。
2. デザイントークンの抽出
結果: MCP は、Figma デザインから抽出されたタイポグラフィとカラー トークンを含む JSON オブジェクトを返します。
応答例:
3. オプション
figmaデザインツール：
fullJson=true : 完全な非圧縮JSONデータを返します
cleanData=true : HTML/CSSレンダリングに不要なプロパティを削除します
figmaTokensツール:
tokenTypes=["typography"] : タイポグラフィトークンのみ抽出します
tokenTypes=["colors"] : 色トークンのみ抽出する
tokenTypes=["typography", "colors"] : 両方を抽出（デフォルト）
例：
データ構造
変換されたFigmaデータの構造は次のようになります。
技術的な詳細
Figmaデータ取得
このツールは、Figma REST APIを使用してデザインデータを取得します。通常のファイルと新しいデザインのURLの両方をサポートしています。node node-idを使用して特定のノードを指定できます。
データの最適化
最適化プロセスには次の手順が含まれます。
不要なプロパティを削除する
スタイルをグループに分ける (タイポグラフィ、色、レイアウトなど)
類似のスタイルを統合して重複を減らす
CSSクラス名の自動生成
トークン抽出
トークン抽出プロセス:
デザインに使用されているタイポグラフィとカラースタイルを識別します
各トークンの標準化された命名規則を作成します
トークンをタイプ（書体または色）別にグループ化します
重複を削除して整理し、デザインシステムとの統合を容易にします
制限事項
MCPでは返されるデータのサイズに制限があり、大きなファイルは
figma_dataディレクトリに保存されます。複雑なベクトル特性は完全には保存されない
複雑なグラデーションや効果には追加の処理が必要になる場合があります
ライセンス
MITライセンス