はじめに

FigmaのMCP開発に興味を持っていたところ、2025年6月4日にFigma公式からもMCPサーバーのベータリリース「Dev Mode MCPサーバー」機能が発表されました！使ってみたい🎉🎉🎉

▼ 発表内容はこちら

Chat UIからFigma MCPにつなぎたい

Figmaの下記MCP公式ガイドを参照

その中では下記のAIエディタへの導入・連携方法が詳しく説明されています

VS Code
Cursor
Windsurf
Claude Code

基本的にAIエディタからの問い合わせ利用がメインになるとは思いますが、
馴染みのあるChat形式で連携もできると、AIデザイナーに相談やレビューをお願いする体験ができるかも。良いかも？？？
と思い、今回は"Figmaの新機能のMCPサーバー"と"Claude Desktop"の連携を試しました。

必要なプラン設定

Figma側の要件

20250625現在、Figma側では下記のプランが存在します。
そのうち、MCP サーバー機能は同様にProfessionalプラン以上が必要。無料だと利用不可です。

Dev Mode MCPサーバー機能の利用条件：

❌️無料プランでは利用不可
✅️ Professional プラン
✅️ Organization プラン
✅️ Enterprise プラン

Claude側の要件

20250625現在、LocalのMCPと連携するためには
今はCloaudのDesktopを利用する必要ありそうです。
また、Desktopの設定からMCPの設定するためはProプラン以上が必要になります

Claude Desktopでの利用：

❌️無料プランではアプリから設定不可
✅️ Pro プラン
✅️ Max プラン

※ 直接設定ファイルを編集すれば行けるらしい。今回では試してはいません🙇‍♂️

連携手順

① Figma MCPサーバーの起動

1 Figma Desktop Appを起動して、使用したいデザインファイルを開きます

2 基本設定 > Dev Mode MCPサーバーを有効にするを押下

3 以下のような表示でサーバーが起動することを確認

Dev Mode MCP サーバーがlocalhost:3845/sseで有効になりました

ワンタッチでlocalサーバ起動できるのはかなりお手軽で優しいです

(補足)SSEとは

localhostに立ち上がった、MCPサーバーの末尾の/sseはServer-Sent Eventsという通信方式のことで

サーバーからクライアントへの一方向通信
リアルタイムでデータを送信

が特徴です。ライブチャットやリアルタイム通知で用いられ、MCPサーバーもリアルタイムでデザインデータを配信するためのこの通信規格を採用しているんですね

💡 Claude DesktopがSSE非対応のため中継が必要

Claude Desktopは現時点で stdio形式のMCPサーバーのみ対応となっています
方やFigmaはSSE形式でMCPサーバーを提供するので、この間を中継しないといけません

ここで、SSEをstdioに変換するmcp-remoteを使用します

Node.jsベースのプロトコル変換ツールmcp-remoteを使用し、各ツールを連携します

Claude Desktop ←→ mcp-remote ←→ Figma MCP Server
    (stdio)     (プロトコル変換)      (SSE)

② mcp-remoteの準備

mcp-remoteを使用するためにはNode.jsのバージョンを確認、必要とあらば更新しましょう

バージョン確認を確認

node --version
npm --version
npm install -g npm@latest

“① Figma MCPサーバーの起動”ですでにMCPサーバーが起動済みのため
mcp-remoteが正常に疎通が取れるか、下記でチェックしましょう

npx -y mcp-remote http://127.0.0.1:3845/sse

疎通が取れたら、Claude側に設定追加します

③ Claude Desktop設定ファイルの編集

Claude側から使用するMCPサーバーを追加/設定します

1 Claude Desktopを立ち上げて、メニューから「設定」を選択
2 左側の「開発者」タブをクリック

3 「構成を編集」をクリック

claude_desktop_config.jsonが編集できるので、任意のエディターで今回のFigma MCPサーバーの設定情報を追記します

▼ 以下の内容を編集・追加

{
    "mcpServers": {
        "figma-dev-mode": {
            "command": "npx",
            "args": ["-y", "mcp-remote", "http://127.0.0.1:3845/sse"]
        }
    }
}

4 設定保存後、Claude Desktopを完全に再起動
もう一度MCP設定をみると、先ほど空だった設定情報に、FigmaMCPがrunnningで登録されていることが確認できます

これで連携終了です

動作確認：SNSアプリ風デザインを読み込ませてみる

テストとしてSNSのデザインファイルを用意しました。これを読んでくれるか

連携の確認

実際に連携できるか確認します。

Figmaとの疎通確認が入り、

その後、そのまま連携情報と自身できることを回答してくれました。行けてそう

レビュー依頼

それでは、AIデザイナーにFBをお願いしてみます

📝回答内容はフルで下記に記載します📝

現在のFigmaデザインを詳細に分析して、良い点と改善点をお伝えします！

##  デザインフィードバック全体評価
 デザインのコンセプト
写真中心のSNSアプリ（Instagram風）のホーム画面として、基本的な構造は良く設計されています。

 良い点
1. レイアウト・情報設計
	•	明確な情報階層: プロフィール → フィード → ナビゲーションの論理的な流れ
	•	適切なコンテンツ密度: 情報が詰め込みすぎず、読みやすい
	•	標準的なSNS構造: ユーザーが慣れ親しんだUIパターンを採用
2. ビジュアルデザイン
	•	統一されたタイポグラフィ: DM Sansフォントで一貫性を保持
	•	クリーンな配色: 白ベース + 紫のアクセントカラーでモダンな印象
	•	高品質な画像素材: 美しい風景写真で視覚的魅力を演出
3. 技術的実装
	•	Reactコンポーネント化: 適切にコンポーネント分割されている
	•	TailwindCSS使用: モダンなCSSフレームワークで保守性が高い
	•	レスポンシブ対応: モバイルファーストのアプローチ

 改善点
1. ナビゲーション設計【重要度: 高】
問題:
	•	ボトムタブのアイコンが重複（Search/Notifications/ProfileのアイコンがImage同じ）
	•	Homeタブのみアクティブ状態で他の視覚的区別が不明確
改善提案:
現在:  同じアイコン 同じアイコン 同じアイコン
改善:     (専用アイコンを使用)
2. インタラクション状態【重要度: 高】
問題:
	•	いいねボタンの状態（押済み/未押し）が分からない
	•	タップ領域のフィードバックが不明確
	•	フォローボタンの状態変化がない
改善提案:
	•	いいねボタン: ♡（未押し）→ （押済み）の色変化
	•	ホバー/タップ時のマイクロアニメーション
	•	フォローボタン: 「Follow」→「Following」への状態変化
3. コンテンツの多様性【重要度: 中】
問題:
	•	全投稿が同一ユーザー（Akira Takahashi）
	•	投稿形式が写真のみで単調
	•	リアルタイム性が感じられない
改善提案:
	•	複数ユーザーの投稿を表示
	•	ストーリー、リール、カルーセル投稿の追加
	•	より多様なコンテンツタイプ
4. 数値・データの現実味【重要度: 中】
問題:
	•	いいね数（250, 300, 150）の一貫性
	•	フォロワー数（1.2K）とエンゲージメントの比率
	•	投稿時間（2時間前、1日前、3日前）の規則性
改善提案:
	•	よりリアルな数値分布
	•	エンゲージメント率を考慮した数値設定
	•	ランダムな投稿時間
5. アクセシビリティ【重要度: 中】
問題:
	•	ステータスバーの時刻が固定（10:30 AM）
	•	カラーコントラストの最適化余地
	•	タップ領域のサイズ（最小44px推奨）
改善提案:
	•	動的な時刻表示
	•	WCAG 2.1 AA準拠のコントラスト比
	•	より大きなタップ領域
6. マイクロインタラクション【重要度: 低】
問題:
	•	静的すぎるデザイン
	•	フィードバックアニメーションの不足
	•	読み込み状態の考慮不足
改善提案:
	•	スムーズなスクロール体験
	•	いいね時のハートアニメーション
	•	スケルトンローディング

 具体的な改善提案
優先度1: ナビゲーション修正
// 現在のアイコン問題を修正
const icons = {
  home: HomeIcon,      // 
  search: SearchIcon,  //   
  notification: BellIcon, // 
  profile: UserIcon    // 
}
優先度2: インタラクション改善
// いいねボタンの状態管理
const [isLiked, setIsLiked] = useState(false);
const heartColor = isLiked ? '#ff4458' : '#8e8e93';
優先度3: デザインシステム強化
/* カラーシステムの拡張 */
:root {
  --primary: #4e3cdb;
  --secondary: #f2f2f7;
  --success: #34c759;
  --danger: #ff3b30;
  --warning: #ff9500;
}

 総合評価
現在のスコア: 7.5/10
強み:
	•	基本設計が堅実
	•	モダンな技術スタック
	•	一貫したデザインシステム
改善領域:
	•	インタラクション設計
	•	コンテンツの多様性
	•	ナビゲーションの完成度
この改善により、ユーザー体験が大幅に向上し、実用的なSNSアプリケーションとして完成度が高まります！

かなり回答が丸い気もしますが、ここはプロンプト改善でなんとかなりそう。
幅広く見てくれてますし、実装観点などもありがたい。

まとめ

以上、ChatツールとFigmaMCPとの連携方法を試してみました。
Figma MCPの立ち上げは体験はかなりお手軽になっており、迷うことなく使いやすいです。
今後はChatGPTもアプリ経由でMCP連携が広まってきそうなので、使えるようになったら試してみたいなと思います。