はじめに
何かと話題なMCPですが、2025/06/04にFigmaの公式MCPサーバがリリースされました！(ベータ版)
Cursorとの連携を試してみたので、セットアップ方法と使い方をまとめます！
MCPってなに？
Model Context Protocol の略
AIと外部アプリケーションでやりとりするためのプロトコルです。
MCPクライアント(生成AIを搭載したアプリケーション Cursor、Claude等)から
MCPサーバ(Figmaやlinear等のツールやデータソースへのアクセスを提供するサーバ)を経由することで、生成AIに対してFigmaなどの情報を読み込ませることができます
こちらの記事がわかりやすいです
概要理解はこの記事がおすすめ
詳細はこちら
セットアップ方法
Cursor側(クライアント)とFigma(サーバ側)の設定が必要になります
Figmaの設定
Figma Design メニュー＞基本設定＞Dev Mode MCP Serverを有効にするをクリックします
チェックがつけば有効化されています
上記を行うとローカルでmcpサーバが起動します
以下URLにブラウザでアクセスしてください
http://127.0.0.1:3845/sse
以下のようなレスポンスが返ってくれば起動完了です
event: endpoint
data: /messages?sessionId=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
Cursorの設定
以下のサイトにアクセスする
https://docs.cursor.com/tools/mcp
以下のように連携できるサービスの一覧が出てくるのでAddボタンをクリックする
Cursorの起動を促されるのでクリック
installをクリックする
この時に表示されるURLがfigmaの設定で確認したサーバのURLと同じことを確認してください
以下のように、連携しているツールの一覧にFigmaが追加されれば完了です。
使い方
Figmaのデザインをクライアントに提供する方法は「選択ベース」と「リンクベース」の 2 つがあります
選択ベースの場合はfigma内のフレームやレイヤーを選択し、選択状態のままAIに指示を出します
agentモードで以下のように指示を出します
RunToolをクリックするとMCPサーバを経由してLLMがfigmaの情報を取得し、コードを生成してくれます。
リンクベースの場合は参照させたいデザインのリンクをカーソルにコピペすれば同じように読み取ってくれます
使ってみた所感
コンポーネントは絶対にプロンプトで指示するべし
アクションボタンや、カード等はプロジェクトで共通コンポーネント化されていると思うので、どのコンポーネントを使うべきか指示するほうが会話のラリーが少なくなるのでオススメです
指示しないと自分で勝手にボタンの部品実装し始めるので。
figmaで参照して欲しくないコードはプロンプトで指示するべし
figmaのフレームにfont-family等が設定されてると全て実装してしまう。
設計的にプロジェクトの共通クラスにfont-family定義するのが一般的だと思うので、
反映させたくないコードは事前に指示したほうがいいです
まとめ
既存のコンポーネント修正する場合は細かい修正することが多く自分で実装したほうが早いのでは？と感じることの方が多かったです。（プロンプトが悪いのはあると思いますが）
新規実装で新しくコンポーネント作る時はある程度形になった物が出来るので、使えそうな印象です。
また、デザイナーの方とも認識合わせてこのプロパティはデザインの方に記載してください！と擦り合わせることができば、手直しの手間が減るのでもっと効率化できそうと感じました。
mcpサーバ経由で情報取得するときに毎回実行していいか尋ねられるのが面倒なので、自動許可設定ないのかな・・・