Figma Context MCP Tokens

🚀 Figma MCP サーバーガイド

Figma MCP サーバーは、Figma データの取得や設計トークンの生成などの機能を提供するサーバーです。このガイドでは、サーバーのインストール、実行、各種機能の使用方法について説明します。

🚀 クイックスタート

📦 インストール

依存関係のインストール

pnpm install

開発サーバーの起動

pnpm run dev

✨ 主な機能

🔍 Figma データ取得ツール (get_figma_data)

指定された Figma ファイルの情報を取得します。

パラメータ:

• fileKey (文字列): 情報を取得する Figma ファイルのキー。
• nodeId (文字列, オプション): 特定のノードの ID。
• depth (数値, オプション): ノードツリーを走査する深さレベル。
• extractCssProperties (ブール値, オプション): 各ノードの詳細な CSS プロパティを抽出するかどうか（デフォルト: true）。

🎨 設計トークン生成ツール (generate_design_tokens)

Figma ファイルから設計トークンを生成し、指定された形式でエクスポートします。

パラメータ:

• fileKey (文字列): 処理する Figma ファイルのキー。
• nodeId (文字列, オプション): 特定のノードの ID。
• depth (数値, オプション): ノードツリーを走査する深さレベル。
• format (文字列, オプション): 設計トークンの出力形式（オプション: "css", "scss", "ts", "json"、デフォルト: "css"）。
• outputPath (文字列, オプション): 設計トークンを保存するファイルパス。
• prefix (文字列, オプション): 変数名のオプションの接頭辞（例: "my-app-"）。

🔧 設定

🌐 環境変数

• FIGMA_API_KEY: あなたの Figma API アクセストークン（必須）
• PORT: サーバーが実行されるポート（デフォルト: 3333）

💻 コマンドライン引数

• --version: バージョン番号を表示
• --figma-api-key: あなたの Figma API アクセストークン
• --port: サーバーが実行されるポート
• --stdio: デフォルトの HTTP/SSE モードではなく、コマンドモードでサーバーを実行
• --help: ヘルプメニューを表示

🔗 Cursor への接続

🚀 サーバーの起動

> npx figma-developer-mcp --figma-api-key=<あなたの Figma API トークン>
# HTTP モードで Figma MCP サーバーを初期化します。ポート 3333...
# HTTP サーバーがポート 3333 でリッスンしています
# SSE エンドポイントのアドレス: http://localhost:3333/sse
# メッセージエンドポイントのアドレス: http://localhost:3333/messages

🔌 Cursor を MCP サーバーに接続する

サーバーが起動したら、Cursor を MCP サーバーに接続 します。Cursor の設定で、機能タブの下にあります。

接続が成功したら、開始する前に Cursor が有効な接続状態を表示していることを確認します。緑色の点が表示され、ツールが表示されていれば、正常に動作しています！

🎨 Composer で Figma デザインを処理する

MCP サーバーが正常に接続されたら、Composer がプロキシモードになっている限り、Cursor の Composer でツールを使用できます。

Figma ファイルへのリンクを Composer にドラッグアンドドロップし、Cursor に操作を実行させると、自動的に get_figma_data ツールがトリガーされます。

ほとんどの Figma ファイルは非常に大きいため、ファイル内の特定のフレームまたはグループへのリンクを指定する必要がある場合があります。単一の要素を選択して CMD + L を押すと、その要素のリンクをコピーできます。右クリックメニューからもこのオプションを見つけることができます。

特定の要素のリンクを取得したら、それを Composer にドラッグアンドドロップし、Cursor に操作を実行させることができます。

💻 使用例

📋 基本的な使用法

例 1: Figma ファイル情報の取得

curl --header "Content-Type: application/json" \
     --request POST \
     --data '{"fileKey":"your_figma_file_key","nodeId":"your_node_id"}' \
     http://localhost:3333/api/get_figma_data

例 2: 設計トークンの生成

curl --header "Content-Type: application/json" \
     --request POST \
     --data '{"fileKey":"your_figma_file_key","nodeId":"your_node_id","depth":2,"format":"scss","outputPath":"./tokens.scss","prefix":"my-app-"}' \
     http://localhost:3333/api/generate_design_tokens

🕵️‍♂️ レスポンスの確認

MCP サーバーからのレスポンスをより簡単に確認するには、inspect コマンドを実行して、@modelcontextprotocol/inspector ウェブ UI を起動し、ツール呼び出しとレスポンスを確認できます。

pnpm inspect
# > figma-mcp@0.1.7 inspect
# > pnpx @modelcontextprotocol/inspector
#
# MCP インスペクターを開始します...
# プロキシサーバーがポート 3333 でリッスンしています...
#
# 🔍 MCP インスペクターが http://localhost:5174 で起動して実行中です

http://localhost:5174 にアクセスして、ツール呼び出しとレスポンスを確認します。

⚠️ 重要提示

• サーバーが正しいポートで実行されており、ネットワーク設定が外部アクセスを許可していることを確認してください。
• 完全な機能サポートを得るには、有効な Figma API トークンを使用してください。
• 大きなファイルを処理する場合は、パフォーマンスの問題が発生する可能性があります。データ抽出と処理のロジックを最適化することをお勧めします。

📚 ドキュメント

詳細な情報については、Figma MCP サーバードキュメント を参照してください。