Figma Context

🚀 Figma MCP サーバー

Figma MCP サーバーは、Figma デザインツールとのインタラクションを可能にするミドルウェアです。MCP プロトコル を通じて、Figma ファイルやリソースのデータアクセスを提供します。このサーバーにより、Claude や ChatGPT などの AI ツールが Figma プロジェクト内のデザインアセットを直接取得し操作することができます。

✨ 主な機能

1. Figma データの取得：get_figma_data ツールを使用して、Figma ファイルのメタデータや特定ノードの情報を取得できます。
2. 画像リソースのダウンロード：download_figma_images ツールを使用して、Figma ファイル内の画像やアイコンリソースをダウンロードできます。
3. コマンドラインでの実行：コマンドラインからサーバーを起動でき、HTTP や SSE などの複数のモードで AI ツールと統合できます。

📦 インストール

ローカル開発とパッケージング

1. このリポジトリをクローンします。
2. 依存関係をインストールします：pnpm install
3. .env.example を .env にコピーし、Figma API アクセストークンを入力します。
4. ローカル開発を行います：pnpm run dev
5. プロジェクトをビルドします：pnpm run build
6. プロジェクトをパッケージングします：pnpm run publish:local

パッケージング後、プロジェクトのルートディレクトリに .tgz ファイル（例：figma-mcp-server-1.0.0.tgz）が生成されます。

ローカルインストールと使用

このサービスを使用する方法は 3 つあります：

方法 1：NPM からのインストール（推奨）

# グローバルインストール
npm install -g @yhy2001/figma-mcp-server

# サービスを起動
figma-mcp --figma-api-key=<your-figma-api-key>

方法 2：ローカルパッケージからのインストール

# グローバルにローカルパッケージをインストール
npm install -g ./figma-mcp-server-1.0.0.tgz

# サービスを起動
figma-mcp --figma-api-key=<your-figma-api-key>

方法 3：プロジェクト内での使用

# プロジェクト内にインストール
npm install @yhy2001/figma-mcp-server --save

# package.json の scripts に追加
{
  "start-figma-mcp": "figma-mcp --figma-api-key=<your-figma-api-key>"
}

# または直接実行
npx figma-mcp --figma-api-key=<your-figma-api-key>

コマンドライン引数

• --version：バージョン番号を表示します。
• --figma-api-key：Figma API アクセストークン（必須）
• --port：サーバーが動作するポート（デフォルト：3333）
• --stdio：デフォルトの HTTP/SSE モードではなく、コマンドモードでサーバーを実行します。
• --help：ヘルプメニューを表示します。

📚 ドキュメント

AI ツールとの接続

設定ファイルでの使用

Cursor、Windsurf、Claude Desktop などの多くのツールは、設定ファイルを使用して MCP サーバーを起動します。設定ファイルに以下の内容を追加できます：

# MCP Client での使用
{
  "mcpServers": {
    "Figma MCP": {
      "command": "npx",
      "args": ["figma-mcp", "--figma-api-key=<your-figma-api-key>", "--stdio"]
    }
  }
}
# ローカルでの使用
{
  "mcpServers": {
    "Figma MCP": {
      "url": "http://localhost:3333/sse",
      "env": {
        "API_KEY": "<your-figma-api-key>"
      }
    }
  }
}

Cursor との接続

1. サーバーを起動します：figma-mcp --figma-api-key=<your-figma-api-key>
2. Cursor の設定 → 機能タブで MCP サーバーに接続します：http://localhost:3333
3. 接続が成功したことを確認した後、Agent モードで Composer を使用します。
4. Figma ファイルのリンクを貼り付け、Cursor にデザインの実装を依頼します。

利用可能なツール

get_figma_data

Figma ファイルまたは特定ノードの情報を取得します。

パラメータ：

• fileKey：Figma ファイルのキー
• nodeId：ノード ID（強く推奨）
• depth：ノードツリーをトラバースする深さ