未分類

Figma MCP Cursor　利用手順

公開日 2025/9/2 最終更新日 2025/9/2

Figma-Context-MCP使うには、月3000円のfigmaの契約が必要。
使う前に：必要な知識と準備
figmaとcursor以外に、自身のコマンドプロンプトでMCPサーバーを起動必要！
セットアップ方法：アクセストークン取得からツール連携まで
ステップ1：Figma個人アクセストークンの発行
ステップ2：MCPサーバーのインストールと起動
ステップ3：AIツール（Cursorなど）への登録

Table of Contents

ステップ1：Figma個人アクセストークンの発行

MCPサーバーがFigmaデータにアクセスするための個人アクセストークンを取得します。

Figma設定画面 (Settings) を開く (左上プロフィール > Settings)。
「Account」 タブ等にある 「Personal access tokens」 セクションへ移動。
「Generate new token」 をクリック。
トークン名を入力 (例: Figma_MCP_Token)。
権限は 「File content: Read-only」 を確認。
有効期限を設定 (期限設定推奨)。
「Generate token」後、表示されるトークン文字列を必ずコピーし、安全な場所に保管（一度しか表示されません）。

⚠️ 重要：トークンの管理
トークンは絶対に公開・共有しないでください。
流出疑い時は、Figma設定から すぐにRevoke（無効化） を。

ステップ2：MCPサーバーのインストールと起動

あなたのPC上でMCPサーバーを起動します。
2つの方法があります。

方法A：npxを使ったクイック起動（簡単！）

ターミナルで以下を実行（Node.jsが必要）。

npx figma-developer-mcp --figma-api-key=【ここにコピーしたFigmaトークン】

https://qiita.com/embed-contents/link-card#qiita-embed-content__3b74f281a22354b4216575710f05c274

HTTP server listening on port 3333 のようなログが出れば成功。
デフォルトは http://localhost:3333 で起動します。

ここで躓いたわたし

npm ERR!
npm ERR!
npm ERR!
npm ERR!

ガーン。とにかくNodo.js昔インストールしたはずだけど、今もう一回最新版インストールしよ。

コマンドプロンプト苦手だから、普通にインストール。

https://nodejs.org/ja/download

できた。ではnode –version
v22.19.0確認もOK！
次にnpm –version
「npm : このシステムではスクリプトの実行が無効になっているため、ファイル C:\Program Files\nodejs\npm.ps1 を読み込むことが
できません。」
なんですと”(-“”-)”

https://ydk.vc/vscode-nodejs-scripts-about-execution-policies

こちらの記事に救っていただいた。

Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned
↓
Get-ExecutionPolicy

↓
RemoteSigned

よし。

npm –version

10.9.3

できた。

このあとに
npx figma-developer-mcp –figma-api-key=ほげほげ

で、手順のやり方に戻れた。躓き深かったな。

ステップ3：AIツール（Cursorなど）への登録

起動したサーバーをAIツールに認識させます (Cursor例)。

Cursorの設定 (Settings) を開く。
「MCP」 セクションへ移動。
「Add New MCP Server」 をクリック。
「Server Name」 を入力 (例: My Figma Server)。
「Connection Type」 で 「SSE (Server-Sent Events)」 を選択。
「Server URL」 にサーバーURLを入力 (デフォルト: http://localhost:3333)。
保存。

サーバー名の横に緑色のドットが表示されれば接続成功です！

次です。さらに課題は続きます。

Cursorのチャット画面の表示の仕方がわからない

AIチャット画面を開きたい場合は、タイトルバーの「Toggle AI Pane」ボタンをクリックするか、 ⌘+L または Ctrl+L を押します。 + アイコンをクリック、または Ctrl/⌘+N を押すと新しい（空の）チャット画面が表示されます。

よし・

5. 実践！Figmaのデザインをコード化する手順

セットアップ完了後、実際にデザインをコード化してみましょう (Cursor例)。

Figmaで要素リンクをコピー:
- コード化したいフレームやグループを選択（特定要素の選択が重要）。
- 右クリック > Copy/Paste as > Copy link to selection (ショートカット: Ctrl/Cmd+L)。
- https://www.figma.com/file/...node-id=... 形式のURLをコピー。
Cursorでリンク貼り付け & 指示:
- Cursorのチャット画面を開く。
- コピーしたFigmaリンクを貼り付け。
- 続けて具体的な指示を入力。例:
  - 「このFigmaデザインをReactコンポーネントにして」
  - 「Implement this using HTML and Tailwind CSS.」
  - 「この要素のCSSを生成して」
- 送信。
AIによるコード生成:
- AIがリンクを認識し、ローカルのMCPサーバー経由でFigma情報を取得。
- AIは受け取ったデザイン情報に基づき、指示された形式でコードを生成・表示。
結果確認 & 調整:
- 生成コードとFigmaデザインを比較。多くの場合、高精度なコードが出力されます。
- 必要ならAIに追加修正を依頼するか、手動で微調整。
応用:
- 「再利用可能なコンポーネントを抽出して」
- 「レイアウトの問題点を指摘して」
- 「Figmaコメントを一覧表示して」
  といった指示も可能。