Repolode
grab

grab/cursor-talk-to-figma-mcp

AIエージェントがFigmaのデザインをプログラムから読み取り、変更できるMCPサーバーとFigmaプラグインです。

スター
7,065
フォーク
782
未解決の Issue
93
最終コミット
3 か月前

これは何?

Talk to Figma MCPは、CursorやClaude CodeなどのAIコーディングエージェントをFigmaに接続します。TypeScript製のMCPサーバーとWebSocketサーバーを動かし、デザインファイル内で実行するFigmaプラグインにコマンドを中継します。接続すると、エージェントはドキュメントや選択範囲、ノードのプロパティを確認し、フレーム、長方形、テキストの作成、塗りや線、オートレイアウト設定の変更、ノードのエクスポートを行えます。

大規模なファイルでの一括作業にも対応しており、テキストの一括置換、テキストノードの分割スキャン、あるコンポーネントインスタンスのオーバーライドを複数の対象に反映する処理などが可能です。また、レガシーな注釈をFigmaのネイティブ注釈に変換したり、プロトタイプのリアクションをFigJamコネクタに変換したりするタスクを、補助プロンプトでエージェントに案内できます。

セットアップでは、Bunをインストールしてセットアップコマンドを実行し、ソケットサーバーを起動してFigmaプラグインをインストールします。コマンドを実行する前に、プラグインからチャンネルに参加してください。ソケットのホスト名を変更するWindowsおよびWSL向けガイドも用意されています。

主な機能

  • 01MCPツールを通じて、Figmaのドキュメント、選択範囲、ノードの詳細を読み取ります。
  • 02フレーム、長方形、テキストノード、セクション、コンポーネントインスタンスを作成します。
  • 03塗り、線、角丸、オートレイアウトのパディング、間隔、サイズ設定を編集します。
  • 04テキストを一括置換し、複数の対象にインスタンスのオーバーライドを反映します。
  • 05プロトタイプのリアクションから、ネイティブ注釈やFigJamコネクタを作成します。
  • 06ノードをPNG、JPG、SVG、PDFとしてエクスポートします。

ユースケース

  • 大規模なマーケティング用デザインファイルやローカライズ用デザインファイルのテキストを一括更新する。
  • CursorやClaude Code内でエージェントに指示し、レイアウトやフレームの土台を作成する。
  • レガシーな注釈やプロトタイプのフローを、Figmaのネイティブ機能に移行する。
  • あるコンポーネントインスタンスのカスタマイズを、類似する複数のインスタンスに反映する。

クイックスタート

  1. 1

    README に記載されている公式インストールスクリプトを使って Bun をインストールします

  2. 2

    setup を実行して、MCP server を Cursor プロジェクトにインストールします

    bun setup
  3. 3

    WebSocket server を起動します

    bun socket
  4. 4

    Figma Community ページから Figma plugin をインストールします

使う前に知っておきたいこと

  • エージェントが Figma を操作するには、WebSocket server を起動したままにし、Figma plugin からチャンネルに参加する必要があります。
  • WSL を使用する Windows では、接続を許可するために src/socket.ts を手動で編集する必要があります。

トピック

よくある質問

cursor-talk-to-figma-mcp とは?
AIエージェントがFigmaのデザインをプログラムから読み取り、変更できるMCPサーバーとFigmaプラグインです。 Talk to Figma MCPは、CursorやClaude CodeなどのAIコーディングエージェントをFigmaに接続します。TypeScript製のMCPサーバーとWebSocketサーバーを動かし、デザインファイル内で実行するFigmaプラグインにコマンドを中継します。接続すると、エージェントはドキュメントや選択範囲、ノードのプロパティを確認し、フレーム、長方形、テキストの作成、塗りや線、オートレイアウト設定の変更、ノードのエクスポートを行えます。
cursor-talk-to-figma-mcp は無料で使えますか?ライセンスは?
cursor-talk-to-figma-mcp は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
cursor-talk-to-figma-mcp は今もメンテナンスされていますか?
半年以内に更新あり。cursor-talk-to-figma-mcp の最終コミットは 2026年7月26日 です。
cursor-talk-to-figma-mcp は何に使えますか?
大規模なマーケティング用デザインファイルやローカライズ用デザインファイルのテキストを一括更新する。 CursorやClaude Code内でエージェントに指示し、レイアウトやフレームの土台を作成する。 レガシーな注釈やプロトタイプのフローを、Figmaのネイティブ機能に移行する。 あるコンポーネントインスタンスのカスタマイズを、類似する複数のインスタンスに反映する。
cursor-talk-to-figma-mcp のインストール方法は?
README に記載されている公式インストールスクリプトを使って Bun をインストールします setup を実行して、MCP server を Cursor プロジェクトにインストールします: bun setup WebSocket server を起動します: bun socket Figma Community ページから Figma plugin をインストールします
cursor-talk-to-figma-mcp はどこで入手できますか?
ソースコードとインストール手順は GitHub にあります:https://github.com/grab/cursor-talk-to-figma-mcp

概要はプロジェクトの README をもとに AI が生成しています。GitHub の数値は毎日更新されます。

関連プロジェクト