ClineでMCP (Model Context Protocol) を使って何か試したくなりました。最近Figmaのデザインを元に開発していることから、Figma向けのMCPがないかを探したところ、いくつかありました。

　
そこで今回は、一番starの多く、かつ、Model Context Protocol Serversの Community Servers に掲載されている Figma-Context-MCP を利用することにしました。
modelcontextprotocol/servers: Model Context Protocol Servers

　
ただし、今回はあくまで試してみたという感じで、セキュリティ面はあまり考慮していません。そのため、もし試す場合は自己責任でお願いします。

MCPサーバーのセキュリティに関しては以下などを参照してください。
MCPサーバーを利用することはセキュリティ的に安全か?

環境
環境構築
Claude 3.7 Sonnet
- 実装
- 動作確認
Gemini 2.5 Pro
- 実装
- 動作確認
モデルの違いに関する所感
ソースコード

環境

Windows11
Dev Containerで開発
VS Code
Cline 3.8.4
figma-developer-mcp 0.1.12
AIモデル
- Claude 3.7 sonnet 20250219
- Google Gemini 2.5 pro exp-03-25
React 19.0.0
Vite 6.2.0
TypeScript 5.7.2

環境構築

create vite でReactアプリを作る

ReactアプリはNode.jsが動けばよいため、Dev Containerは以前の記事を流用します。
Clineとともに、AmazonのURLをシンプル化するChrome拡張を作ってみた - メモ的な思考的な

今回のReactアプリはViteで構築します。おそらくClineでも構築できるとは思いますが、自分で構築したほうが確実だろうと考え、自分でやってしまいます。

$ npm create vite@latest

> npx
> cva

│
◇  Project name:
│  figma-mcp-example
│
◇  Select a framework:
│  React
│
◇  Select a variant:
│  TypeScript
│
◇  Scaffolding project in /workspaces/figma-developer-mcp-example/figma-mcp-example
│
└  Done. Now run:

  cd figma-mcp-example
  npm install
  npm run dev

　
create viteで生成したReactの場合、Dev Containerだと npm run dev した時にブラウザからアクセスすることができません。

そこで、公式ドキュメントを参考に、 package.json の dev に --host オプションを追加します。

{
  // ...
  "scripts": {
    "dev": "vite --host",
  }
  // ...
}

　
あとは、npm run install 後に npm run dev し、http://localhost:5173/ へアクセスできればOKです。

ターミナルにはこんな感じで表示されます。

 $ npm run dev

> figma-mcp-example@0.0.0 dev
> vite --host


  VITE v6.2.3  ready in 744 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://***.***.***.***:5173/
  ➜  press h + enter to show help

Cline向けのドキュメントを用意する

Cline向けに

.clinerules/
memory-bank/
.clineignore

などを用意します。

また、Clineに対して、公式ページにあるCustom Instructionの内容を設定します。

Figmaでデザインを作る

今回は

ログインページ
- ログインボタンがあるだけ
ログイン後のメインページ

の2つを作成します。

また、デザインもReact側に反映されるのかを知りたいため、 Material UI for Figma (and MUI X) のコンポーネントを利用してデザインしておきます。
Material UI for Figma (and MUI X) – Figma

　
上記を踏まえ、今回はこんな感じの頑張らないFigmaになりました。

Figmaの個人アクセストークンを取得する

Figmaのアカウント設定タブにある個人アクセストークンを生成・取得します。このアクセストークンはMCP経由でFigmaへ接続する時に使います。

今回はFigmaデータの読み込みだけなので、スコープは次のようなデフォルトのままとします。

ファイルのコンテンツ
- 読み取りのみ
その他の項目
- アクセスなし

Figma-Context-MCP 関連を設定する

Figma-Context-MCP のREADMEに従い、まずはMCPサーバーをインストールします。 --figma-api-key オプションには先ほど取得したFigmaの個人アクセストークンを設定します。

% npx figma-developer-mcp --figma-api-key=<your-figma-api-key>

　
続いて、ClineのMCPサーバ設定を追加します。MCP Servers の Installed タブにある Configure MCP Servers をクリックするとJSONが表示されます。そこに Figma-Context-MCP のREADMEに記載されている内容を設定します。

{
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=***", "--stdio"]
    }
  }
}

　
あとはClineと `Figma-Context-MCP が接続できればOKです。

Claude 3.7 Sonnet

実装

Claude 3.7 Sonnet を使って実装してみます。

follow your custom instructions

というプロンプトを与えたところ、各種ドキュメントを読み込んだ後、

次に、使用したいFigmaファイルについて教えていただけますか？

FigmaファイルのキーまたはURL 特定のノードIDがあれば、それも教えてくださいどのようなコンポーネントを作成したいのか（例：ボタン、カード、フォームなど）

というメッセージが返ってきました。

URLを与えてActモードにしたところ、 Figma-Context-MCP を使ってFigmaの内容を把握したようで、あとはClineが勝手に実装し、タスクが終わりました。

動作確認

http://localhost:5173/ にアクセスするとFigmaのデザインの画面が表示されました。

　
ログインボタンを押すと、ログイン後に遷移する画面が表示されました。両画面ともデザインが適用されていました。

　
Figmaまわりの情報を .clinerules や memory-bank へ設定しなかったにも関わらず、それなりのものができました。

　
トータルのコストはこんな感じでした。

Gemini 2.5 Pro

ちょうど試していた時期に Google Gemini 2.5 pro exp-03-25 が公開されました。Gemini 2.5 Pro の状況を確認したかったため、今回試してみました。

実装

まずは、同じく以下のプロンプトを与えました。

follow your custom instructions

　
すると次のメッセージが返ってきました。

Figmaのデータを取得するために、FigmaファイルのURLかファイルキーを教えてくれへんか？ URLは figma.com/(file|design)//... みたいな形式になっとるはずや。

　
同じように回答したところ、あとはClineが作業を進め、完成しました。

　
ちなみに、Geminiでは「TanStack Routerでのルーティングを考慮した実装もできるか」も合わせて検証してみました。ただ、与えた情報が少なすぎたせいか、TanStack Router を組み込むことはできませんでした。

それでも、Claudeと同じような形での画面遷移は実装できました。

動作確認

http://localhost:5173/ にアクセスするとFigmaのデザインの画面が表示されました。

　
ログインボタンを押すと次の画面に遷移しました。AppBarがやや短くて太い感じですが、Figmaにあるデザインの雰囲気は出ています。

モデルの違いに関する所感

今回のケースでは以下の違いがありました。

チャットに表示される言語
- Claudeは、MemoryBankなどで指定していたにも関わらず、終始英語・日本語が混じっていた
- Geminiは follow your custom instructions 後は常に日本語
タスクの進め方
- Claudeは、Reactの実装とデザイン適用を一気に実施
- Geminiは、Reactの実装を終えてから、デザイン適用を実施
Memory Bankに残した情報
- Claudeは、箇条書きに加え、作業の流れや構造も記述
- Geminiは、箇条書きで記述