こんにちは、ENECHANGEの川野邉です！

今回は、CursorでFigmaのデザインを読み込み、そのまま実装に活用するための「Figma MCP」セットアップ手順 を、3ステップで紹介します。
この仕組みを使えば、Figmaのデザインを直接Cursorに取り込み、フロントエンド開発を効率化できます。

セットアップ手順

1. Figma personal access token の取得

まずは、Figma APIを利用するための Personal Access Token を発行します。

Figmaにログイン後、 Settings > Account を開く
画面下部の Personal access tokens セクションで Generate new token をクリック
任意の名前（例：Sample Token）を入力
Scopeは Read-only を選択
生成されたトークンをコピーし、安全な場所に保存

⚠️ トークンは一度しか表示されません。必ず控えておきましょう。

2. mcp.jsonファイルの作成

次に、CursorでFigma MCPを利用できるように設定ファイルを作成します。

{
    "mcpServers": {
      "Figma MCP": {
        "command": "npx",
        "args": ["-y", "figma-developer-mcp", "--figma-api-key={1.で発行したトークンの値}", "--stdio"]
      }
    }
  }

--figma-api-key の値には、手順1で取得したトークンを入力します。

3. Cursor SettingでMCPサーバーの起動

Cursorの Settings > Tools & Integration を開く
手順2で設定した Figma MCP が表示されていることを確認
起動をクリックし、1分ほど待つと有効化されます

Figma MCPを利用してコンポーネント実装してみる

それでは早速CursorにFigmaを読み込んでみてもらいましょう。今回読み込んでもらうFigmaで書いたコンポーネントは以下です。

以下の手順でFigmaで作成したコンポーネントをCursorに読み込ませてみます。

Figmaで対象のコンポーネントを選択
Copy link to selection でリンクをコピー
Cursorにリンクを貼り、次のように依頼します

> {コンポーネントのリンク} を読み込んでください。どのようなコンポーネントかも簡単に教えてください。

Cursorはデザインを解析して以下のように認識してくれます。

はい、Figmaのデザインを読み取ることができました！このデザインは「サンプル」という名前のフォーム画面で、以下の要素が含まれています：

[デザインの概要]
フレーム名: サンプル
サイズ: 816px幅
背景: 白色
ボーダー: 14pxの角丸、グレーの境界線

[主要なコンポーネント]

1. 入力セクション
タイトル: "XXX を入力してください" (青いバー付き)
入力フィールド: 150px幅のテキストボックス
プレースホルダー: "1000001"
スタイル: グレーの境界線、中央揃えのテキスト

2. 選択肢セクション
タイトル: "XXX を選択してください"
ラジオボタン: 3つの選択肢（選択肢1、選択肢2、選択肢3）
...（省略）

また、コンポーネントの実装までCursorに依頼して出来上がったのが以下です。
問題なく適切なinput要素でコードを生成してくれますし、フロントエンドの開発スピード向上しますね。👏