CursorAIでFigmaのデザインを作る!? cursor-talk-to-figmaを試してみた
はじめに
CursorAIを利用した開発が活発になってきている中、FigmaとのMCP連携も注目されてきていると思います。
最近ではFigma-Context-MCPなどを利用したFigmaとCursorAIを連携させた開発や社内デザインシステムをMCP経由でCursorにインプットしたりと様々な工夫が行われています。
参考リポジトリ&記事
今回は逆転の発想で、CursorAIからFigmaのデザインを変更できるという話を聞きつけたので、面白そうだと思い試してみました。
セットアップ
以下がオープンソースとして公開されているプラグインなので、こちらのREADMEを参考にセットアップを進めてみます。
bunのインストール
Macを利用しているため以下のコマンドにてbunをインストールします。
curl -fsSL https://bun.sh/install | bash
bunがインストールされたようです。
(base) maaku ~ % curl -fsSL https://bun.sh/install | bash
######################################################################## 100.0%
bun was installed successfully to ~/.bun/bin/bun
Added "~/.bun/bin" to $PATH in "~/.zshrc"
To get started, run:
exec /bin/zsh
bun --help
cursor-talk-to-figma-mcpのクローン
以下のコマンドで任意のディレクトリにcursor-talk-to-figma-mcpをクローンしてください。
git clone git@github.com:sonnylazuardi/cursor-talk-to-figma-mcp.git
その他セットアップコマンドの実行
クローンしたcursor-talk-to-figma-mcpのディレクトリに移動。
cd cursor-talk-to-figma-mcp
Run setup, this will also install MCP in your Cursor's active project
bun setup
Start the Websocket server
bun socket
上記2コマンドを実行すると、以下のように3055ポートにWebSocket サーバーが立ち上がります。
(base) maaku cursor-talk-to-figma-mcp % bun setup
$ ./scripts/setup.sh
bun install v1.2.10 (db2e7d7f)
+ @types/bun@1.2.5
+ bun-types@1.2.5
+ tsup@8.4.0
+ typescript@5.8.2
+ @modelcontextprotocol/sdk@1.7.0
+ uuid@11.1.0
+ ws@8.18.1
+ zod@3.24.2
171 packages installed [1121.00ms]
(base) maaku cursor-talk-to-figma-mcp % bun socket
$ bun run src/socket.ts
WebSocket server running on port 3055
ここまで確認できたら下記コマンドでMCPサーバーを起動します。
bunx cursor-talk-to-figma-mcp
(base) maaku cursor-talk-to-figma-mcp % bunx cursor-talk-to-figma-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"
Figmaとの接続が確認できました！
FigmaのPluginのインストール
参考
以下のページから直接FigmaのFileに遷移できます。
Figma側でCursor Talk To Figma MCP Pluginを起動
画面下部のpluginボタンからCursor Talk To Figma MCP Pluginを検索。
僕の場合はRecentに表示されていますが、Searchすれば見つかるはずです。
pluginを選択すると以下のようなモーダルが表示されました。
その後Use localhostを選択状態で、Figma側のConnectボタンを押下すると、以下の画像のように接続状態となりました。
Cursor AIのセットアップ
.cursor/mcp.jsonに以下の設定を追加してください。
すでに他のMCPを利用している方はTalkToFigma部分のみを設定してください。
{
"mcpServers": {
"TalkToFigma": {
"command": "bunx",
"args": [
"cursor-talk-to-figma-mcp@latest"
]
}
}
}
接続後は以下のようにToolsが利用可能な状態となります。
Cursor Talk To Figma MCP Plugin動作確認
Connected to server in channel: x51mwv3fというようにzf7eol0oというチャネル名で接続されているようです。
ではこのチャネルを通じてCursorAIからFigmaのデザインを調整してもらいましょう。
デザインの再現度はイマイチですが、CursorAIへの自然言語での指示でFigmaのデザインが書き換わることを確認できました！
以下の画面のデザインを作るように指示したので、ちょっとリッチすぎたかな..。
まとめ
今回はCursor Talk To Figma MCP Pluginを使用し、CursorAIからFigmaのデザインを変更してみました。デザインの再現度自体はイマイチでしたが、今後の進化に期待ですね！！
以下の動画のように細かいデザインの調整であれば、使えるのかもしれないですがCursorを経由する必要はないですよね笑
Discussion