CursorからFigma MCPに接続する手順

この記事のポイント

• CursorからFigma MCPに接続するには、CursorとFigmaの2つのツールを用意し、MCPプロジェクトを手動で構成するのが正解。
• create-mcp-app コマンドは存在しないため、設定ファイルと依存パッケージは自分で用意する必要がある。
• FigmaのPersonal Access Tokenを取得してAPIキーとして設定することが、Figmaとの連携を実現する前提条件となる。
• Cursorエディタ内でMCPを有効化した後、MCPコマンドを実行することでFigmaのデザインデータを直接操作できる。
• 一連のステップを完了すれば、CursorからFigmaのデザインを取得・操作できる開発環境が構築できる。

デザイナーとエンジニアの垣根を超えるツール「Cursor」と「Figma」。CursorからFigmaMCPに接続することができればFigmaで作ったデザインをCursorで簡単にコーディングできます。

今回はCursorからFigmaMCPに接続する方法をChatGPTに聞きながら何とか環境を構築することができました。

この記事では、ChatGPTとのやり取りで得られたCursorとFigmaMCPの接続方法を解説しています。

ステップ1：環境準備

図1: CursorとFigma MCPの全体アーキテクチャ概念図

まずは開発環境を整えましょう。以下の2つのツールが必要です。

Node.jsのインストール

Figma MCPツールはNode.js環境で動作するため、公式サイトからLTS版（推奨安定版）をインストールします。

インストール後、以下のコマンドでバージョン確認ができます：

node -v

Gitのインストールと認証

Git for Windowsを導入し、GitHubとの認証も済ませておきましょう。こちらも以下で確認可能です。

git --version

GitHubアカウントとの認証を行っておくと、今後のツール拡張時に便利です。

ステップ2：MCPプロジェクトの作成

既存の create-mcp-app コマンドは存在しないため、MCPプロジェクトの構成は手動で準備する必要があります。

以下のようなディレクトリ構成を作成してください

my-mcp-tool/
├── mcp.json
├── mcp.config.json
└── tools/
    └── sample-tool/
        ├── index.ts
        └── tool.config.json

これはMCPとして動作する最低限の構成で、ツールを追加することで機能を拡張できます。

ステップ3：設定ファイルの記述

ここからは各種設定ファイルの記述に入ります。

mcp.json

Figma APIキーなど、MCPの全体設定を記述するファイルです。

{
  "apiKey": "YOUR_FIGMA_API_KEY",
  "port": 3001
}

mcp.config.json

使用するツールの一覧を定義します。

{
  "tools": ["sample-tool"]
}

tools/sample-tool/tool.config.json

個々のツールの情報を設定します。

{
  "name": "get_figma_data",
  "entry": "index.ts"
}

tools/sample-tool/index.ts

ここには、Figma上に図形を生成するなどの処理を記述します。TypeScriptでの記述になります。

ステップ4：依存パッケージのインストール

プロジェクトルートで以下を実行します。

npm init -y
npm install figma-developer-mcp

これで、Figmaとの通信や操作を行うための基盤が整います。

ステップ5：Figma APIキーを取得して設定

次に、Figmaと連携するためのAPIキー（Personal Access Token）を取得します。

取得手順

1. FigmaのDeveloper Settingsを開く
2. 「Personal Access Token」を生成
3. 生成されたキーを .env ファイルまたは mcp.json に記述

これでFigma APIとの通信が可能になります。

ステップ6：CursorでMCPを有効化

図2: MCP有効化後のCursor→Figma通信フロー

Cursorエディタ内でMCPプラグインを有効化しましょう。

1. Cursorの「MCP Tools」パネルを開く
2. figma-developer-mcp を有効にする
3. Figmaデスクトップアプリを起動
4. MCPプラグインが読み込まれていることを確認

これで、CursorとFigmaの接続が整いました。

ステップ7：MCPツールを実行してみよう

接続が完了したら、実際にMCPコマンドを使ってFigmaを操作してみましょう。

たとえば

get_figma_data

と実行すると、Figma上に図形が追加されるなどの動作が確認できます。ツールによっては、コンポーネント情報の取得やアセットの抽出なども可能です。

成果と次のステップ

以上の手順を踏めば、CursorからFigma MCPに接続してデザインを取得・操作できる開発環境が完成します。

この基盤を使えば、以下のような応用も可能です：

• UIコンポーネントの自動生成
• デザイン仕様書の自動抽出
• デザインシステムとの統合・連携

コードでデザインを操作することで、開発フローの効率が大幅に向上します。

まとめ：Cursor × Figma MCPで次世代開発を始めよう

私自身、コーダーではないので記事の説明は舌足らずなところが多いと思いますが、いかがでしたでしょうか？

上記の方法を試しても難しい場合、ChatGPTにゼロから聞いてやってみるのもアリかもしれません笑

記事が参考になりましたら幸いです！