はじめに
カーソル フィグマと話す エムシーピー を通じて開発されたオープンソースプロジェクトである。 モデル・コンテキスト・プロトコル (MCP）プロトコルは、AIプログラミングツールCursorと設計ソフトウェアFigmaを接続するもので、開発者のSonny Lazuardi氏によって作成され、GitHubでホストされている。このツールの主な機能は、CursorがFigmaのデザインファイルを読み込んでコードを生成したり、デザイン内容を直接修正したりできるようにすることだ。TypeScriptで書かれており、リアルタイム通信のためにWebSocket技術が組み込まれている。デザインを素早くコード化したり、AIでデザインファイルを操作したり、この無料ツールは開発者の効率化を支援します。誰でもコードをダウンロードして開発に参加できる。
ボルト・ニュー 数日前に稼動した新機能：ワンクリックでFigmaデザインをフルスタックアプリケーションに変換
機能一覧
- カーソルとFigmaの接続双方向通信はMCPプロトコルとWebSocketによって実現されます。
- デザイン情報を読むFigmaファイルのドキュメント概要、選択されたコンテンツ、またはノード固有の詳細を取得します。
- デザイン要素の作成矩形、フレーム、またはテキスト・ノードをFigmaに追加します。
- スタイルとレイアウトの変更色、ボーダー、角丸の調整、ノードの移動、サイズ変更、削除ができます。
- コードの生成Figmaの設計を使用可能なコードに変換することで、手作業による記述時間を短縮します。
- コンポーネント管理のサポートローカルまたはチームのコンポーネントを読み込み、コンポーネントインスタンスを作成します。
- エクスポート機能デザインノードをPNG、JPG、SVGまたはPDF形式でエクスポートします。
- オープンソースで無料コードは公開されており、開発者は自由に修正や最適化を行うことができる。
ヘルプの使用
設置プロセス
Cursor Talk to Figma MCPを使用するには、いくつかのパーツをインストールし、設定する必要があります。以下に、詳細な手順を示します：
1.環境を整える
- インストレーション・バン: BunはJavaScriptを素早く実行するツールです。インストールされていない場合は、ターミナルを開いて入力してください：
curl -fsSL https://bun.sh/install | bash
- カーソルのインストール: 公式ウェブサイト（cursor.ai）からプログラミングツール「Cursor AI」をダウンロードし、インストールする。
- フィグマ・トークンを手に入れるFigmaにログインし、アカウント設定でパーソナル・アクセストークンを生成し、保存します。
2.プロジェクトのダウンロード
- ターミナルで以下のコマンドを実行し、プロジェクト・コードをダウンロードする：
git clone https://github.com/sonnylazuardi/cursor-talk-to-figma-mcp.git
- プロジェクト・カタログにアクセスする：
cd cursor-talk-to-figma-mcp
3.依存関係のインストールとセットアップ
- プロジェクト・ディレクトリで実行する：
バンのセットアップ
- これにより、すべての依存関係（TypeScriptやWebSocketライブラリを含む）がインストールされ、CursorのMCPサーバーが自動的に設定される。
4.WebSocketサーバーを起動する
- それをターミナルに入力する：
バンズスタート
- あるいは手動で実行する：
src/socket.tsを実行する
- これにより、FigmaプラグインとMCPを接続するためのWebSocketサーバーが起動します。
5.Figmaプラグインをインストールする
- Figmaデスクトップアプリケーションを開きます。
- トップメニュー「プラグイン」→「開発」→「新規プラグイン」をクリック。
- 既存のプラグインをリンクする」を選択し、次の場所を探します。
src/cursor_mcp_plugin/manifest.jsonドキュメンテーション - 確認後、プラグインはFigmaの開発プラグインのリストに表示されます。
6.カーソル MCP サーバーの設定（手動モード）
- 万が一
バンのセットアップ自動ではなく、手動で設定可能。 - 見せる
~/.cursor/mcp.jsonファイルに以下を追加する：
{
"mcpServers"：{。
"TalkToFigma": {
"命令": "bun".
"args": ["/path/to/cursor-talk-to-figma-mcp/src/talk_to_figma_mcp/server.ts"].
}
}
}
- 相互互換性
/パスプロジェクトの実際のパス。
主な機能の使い方
インストールが完了したら、以下の手順に従ってください：
スターターキット
- WebSocketサーバーの実行::
- ターミナルで
バンズスタートサーバーが稼動していることを確認してください。
- ターミナルで
- Figmaプラグインの起動::
- Figmaでキャンバスを右クリックし、"Plugins" > "Develop" > 今インストールしたプラグインを実行します。
- プラグインが起動したら
join_channelコミュニケーション・チャンネルに参加する
- 接続カーソル::
- Cursorを開き、MCPサーバーが設定され、実行されていることを確認します。
デザイン情報を読む
- Figmaでデザインファイルを開き、操作するセクションを選択します。
- 例えば、カーソルの「コンポーザー」モードでコマンドを入力する：
- 「現在の文書情報を取得する
get_document_info. - 「選択したコンテンツを表示」：コール
ゲット・セレクション.
- 「現在の文書情報を取得する
- カーソルはMCP経由でレイアウトやスタイルなどのデザインデータを返す。
デザインの作成と修正
- カーソルに具体的な指示を入力する：
- 矩形を作成する：
長方形の作成場所とサイズを指定してください。 - テキストを追加する：
テキストを作成するコンテンツとフォントを設定する。 - 色を修正する：
塗りつぶし色RGBA値を入力する。
- 矩形を作成する：
- 変更はリアルタイムでFigmaファイルに反映されます。
コードの生成
- Figmaファイルへのリンクをカーソルに貼り付けます。
https://www.figma.com/file/xxx/yyy). - コマンドを入力する。 反応 コード"
- カーソルはデザインを読み取り、対応するコードを出力する。
デザインのエクスポート
- カーソルを入力：
ノードを画像としてエクスポート以下の表は、フォーマット（PNG、JPGなど）の選択方法を説明しています。 - エクスポートされたファイルはローカルに保存される。
取り扱い上の注意
- 接続シーケンスまずWebSocketを起動し、次にプラグインを実行し、最後にCursorを使ってコマンドを送信する。
- エラー処理コマンドに失敗した場合は、端末のログを確認し、ネットワークとパーミッションに問題がないことを確認してください。
- パフォーマンスのヒント大きなファイルを扱うときは、まず
get_document_info概要を見てから、特定のノードを操作する。
このツールの威力は、デザインとコーディングをシームレスに行えることです。AIを使ってFigmaを直接操作したり、コードを素早く生成したりできるので、多くの繰り返し作業を省くことができます。
アプリケーションシナリオ
- ラピッドプロトタイピング
シナリオ説明: プロダクト・マネージャは、デザイン・アイデアを検証する必要があります。Cursorを使用してFigmaで要素を作成し、コードをエクスポートすることで、インタラクティブなプロトタイプを素早く生成することができます。 - 設計と開発の同期化
シナリオ説明: 設計者がFigmaファイルを調整した後、開発者はCursorを通して最新の設計を読み、通信コストを削減するためにリアルタイムでコードを更新します。 - 自動スタイル調整
シナリオ説明: チームは、デザインカラーやレイアウトを一括で変更する必要があります。開発者はカーソルを使用してコマンドを入力し、調整を自動化できます。
品質保証
- このツールは有料ですか？
答え：必要ない。これはオープンソースのプロジェクトで、無料で使用でき、コードはGitHubで公開されています。 - 出力に対応しているプログラミング言語は？
回答：カーソルの能力によりますが、現在のところ、React、HTML、CSS、およびその他の一般的なフロントエンド・コードをサポートしています。 - 同時に複数のFigmaファイルを扱うことはできますか？
答え: はい、ただしファイルごとに異なるチャンネルを追加する必要があります。join_channel)、コマンドが正しいファイルを指していることを確認してください。
日本語 
简体中文 
English 
Deutsch (Sie) 
Português do Brasil