🎉

Claude DesktopでFigmaを操作！プロトタイプの自動生成

2025/04/12に公開

Figma

Model Context Protocol

Cursor

Claude

tech

最近、話題になっている「Cursor Talk to Figma MCP」というプロジェクトをご存知でしょうか？
テキストベースでFigmaを遠隔操作し、UIプロトタイプを自動生成できるというものです。
ただ、このプロジェクトのデモはCursorエディタを前提としていたため、「普段Cursor使ってないけど、同じようなことってできないの？」と思い、実は、この「MCP protocol（Model Context Protocol）」という仕組み自体がとても柔軟で、いわば「LLM世界のUSB-C」のような存在です。
「MCPとは」に関して、以下から参照できます！

つまり、一度MCPに対応したServerを立てれば、特定のエディタ（たとえばCursor）に依存せず、どんなMCP対応クライアントからでも接続・操作できるというのが最大のポイント。
今回のケースでも、Cursor用に作られたMCP ServerをClaude Desktopから使うことができました！

どんなことができた？

Claude Desktopに自然言語で指示を出すと、Figma上でプロトタイプ画面がどんどん作られていきます。
たとえば、こんな感じの指示を出します。

「ショッピングアプリのログイン画面を作ってください。ロゴ、ユーザー名、パスワード、ログインボタンを含めて」

セットアップのポイント

コード修正の部分

Claude Desktopを使うためには、Figma側のMCPプラグイン（ui.html）で使うチャネル名を固定化しておく必要があります。
src/cursor_mcp_plugin/ui.html の中で、channelName をランダム生成していた部分を、以下のように書き換えました：

state.socket.onopen = () => {
  // Generate random channel name → 固定化
  const channelName = "figma";
  console.log("Joining channel:", channelName);
  state.channel = channelName;

  // Join the channel using the same format as App.tsx
  state.socket.send(
    JSON.stringify({
      type: "join",
      channel: channelName.trim(),
    })
  );
};

これで、Claude Desktop 側でも "figma" というチャネル名を指定すれば接続可能になります。
また、編集しなくても実際には Claude のプロンプトに以下のように指示を加えるだけでも OK：

MCPチャンネル名は「figma」にしてください。

コマンドの部分

① Bunのインストール
まずは Bun公式に従って、Bunをインストールします：

curl -fsSL https://bun.sh/install | bash

インストール後は、ターミナルを再起動 or source ~/.bashrc（or ~/.zshrc）で反映してください。

② MCP対応プロジェクトのセットアップ

bun setup

このコマンドで、MCP関連のファイルや依存関係がプロジェクト内に自動的に構築されます。

③ WebSocket Serverを起動

bun socket

これにより、Figma PluginやClaudeとの通信を仲介するWebSocketサーバーが立ち上がります。

④ MCP Server（Cursor to Figma）

bunx cursor-talk-to-figma-mcp

MCP Serverが起動すると、Claudeなどのクライアントからの命令をFigmaに中継する準備が整います。

試してみた様子はこちら

やってみた感想

今回、Claude Desktopを使ってFigmaのUIプロトタイプを自動生成する仕組みを実際に試してみて、
「ここまで自然言語だけで画面が作れるのか！」と本当に驚きました。
特に良かったのは、UXデザインの経験がなくても、思いついたアイディアを「形」として残せる点。
ふと思いついた機能やUIの構成を、テキストでざっくり書くだけでFigma上に再現できるので、
プロトタイピングというより、「発想の記録ツール」としても有用だと感じました。