VS CodeやCursorからMCPを使ってFigmaに描画する（cursor-talk-to-figma-mcp）

📅

loading..🐩🐩🐩🐩

はじめに 🔗

VS CodeでMCPを使う準備については、前の記事を参照してください。VS CodeでMCPを使う

こんにちは。今回は、AIコードエディターとデザインツールの

Figma

をつなぐ cursor-talk-to-figma-mcp をインストールして使います。

このプロジェクトは、CursorだけでなくVS Codeでも使えるMCPサーバーを提供します。このサーバーでFigmaに接続し、デザイン作業を自動化できます。

cursor-talk-to-figma-mcp の概要、インストールと使い方、主な機能を順に紹介します。

cursor-talk-to-figma-mcp GitHub↗

cursor-talk-to-figma-mcp

環境設定（Environment Setup） 🔗

ここでは

macOSとLinux

を前提にします。WindowsではWSLを使うため、次の手順を参照してください。Windows + WSL↗

まず、GitHubからプロジェクトをクローンします。

git clone https://github.com/sonnylazuardi/cursor-talk-to-figma-mcp
cd cursor-talk-to-figma-mcp

1. Bunをインストールする 🔗

Bunは、高速なJavaScriptランタイム、バンドラー、パッケージマネージャーです。JavaScriptコードの実行や管理に使うツールの1つです。

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

このコマンドはWebからインストールスクリプトをダウンロードして実行し、Bunをインストールします。

2. プロジェクトのセットアップを実行する 🔗

Bunをインストールしたら、プロジェクトを設定します。ターミナルで次のコマンドを実行してください。

bun setup

この過程で、Cursorで開いているプロジェクトにもMCPがインストールされます。

VS CodeでCopilotに指示を出したい場合は、settings.jsonに次の内容を追加します。

{
  "mcpServers": {
    "TalkToFigma": {
      "command": "bunx",
      "args": ["cursor-talk-to-figma-mcp@latest"]
    }
  }
}

3. WebSocketサーバーを起動する 🔗

MCPサーバーとFigmaプラグインが通信できるよう、WebSocketサーバーを起動します。ターミナルで次のコマンドを実行します。

bun socket

次のメッセージが表示されれば成功です。

bun run src/socket.ts
WebSocket server running on port 3055
New client connected

4. MCPサーバーを起動する 🔗

Figmaと直接通信するMCPサーバーを起動します。新しいターミナルを開き、次のコマンドを入力します。

bunx cursor-talk-to-figma-mcp

このコマンドがMCPサーバーを起動します。次のメッセージが表示されれば成功です。

[INFO] Connecting to Figma socket server at ws://localhost:3055...
[INFO] FigmaMCP server running on stdio
[INFO] Connected to Figma socket server
[DEBUG] Received message: "Please join a channel to start chatting"
[LOG] myResponse"Please join a channel to start chatting"
[INFO] Received broadcast message: "Please join a channel to start chatting"

上がWebSocketサーバー、下がMCPサーバー

5. Figmaプラグインをインストールする 🔗

最後にFigmaプラグインをインストールします。

目的のFigmaファイルを開き、メニューで「プラグイン」→「新しいプラグイン」に進み、cursor talk to figma mcpプラグインを選びます。

プラグインのインストール

表示された画面でuse localhostを選び、connectボタンをクリックします。

connectボタンをクリックしたときの画面

これでFigmaとCursorがつながりました。以降は、チャンネルコードを使ってIDEからFigmaのデザインを読み取り、編集できます。

右上の共有ボタンを押してFigmaページのリンクをコピーします。共有権限は「リンクを知っている全員が編集可能」に設定します。

リンクの共有

IDEからFigmaのデザインを編集する 🔗

FigmaとCursorがつながったので、IDEからデザインを読み取り、編集できます。

接続できない場合は、IDEを完全に終了してから起動し直してください。

1. チャンネルに接続する 🔗

5. Figmaプラグインをインストールするで受け取ったチャンネルコードを渡し、接続するよう指示します。

connect to figma channel : <채널코드>

チャンネルへの接続

2. Figmaのデザインを読み取る 🔗

Figmaのデザインファイルを読み取るよう指示します。先ほどコピーしたページのリンクを貼り付け、読み込むよう伝えます。

read figma page : <링크>

ページを読み取る

3. Figmaに描画する 🔗

Figmaに好きなデザインを描いてみましょう。次は一例です。

큰 원을 그려 줘

円を描く指示

create_frame、create_rectangle、set_corner_radiusの順に実行して、円を描きます。

Figmaのページを確認すると、次のように円が描画されています。

円の描画結果

おわりに 🔗

AIコードエディターのCursorとデザインツールのFigmaをつなぐ cursor-talk-to-figma-mcp を見てきました。

このプロジェクトを使えば、単純な繰り返し作業を自動化し、コードとデザインの間の隔たりを小さくして、効率よく作業できます。

参考 🔗

VS CodeやCursorからMCPを使ってFigmaに描画する（cursor-talk-to-figma-mcp） | PromleeBlog