Figma MCPサーバーをCursorで使い倒す 環境構築から動作確認まで 仕事が速くなる現場目線ガイド

Figmaのカンプを見ながらCursorで実装していると、たまに発生します。確認したい情報が多すぎて、目が泳ぐ瞬間。

この余白は何pxでしたっけ。角丸は。色は。フォントサイズは。行間は。コンポーネントのバリエーションは。あれ、同じボタンが3種類あるぞ。誰だ増やしたの。

ここで一つ、止めたい作業があります。いわゆる目コピと手拾いです。頑張ればできる。けれど、頑張らない方が成果が出るタイプの作業でもある。

そこで登場するのがMCPです。Model Context Protocol。ざっくり言えば、エディタやAIが外部の情報源と会話するための共通の口。

そしてFigmaには、MCPサーバーという形でデザイン情報を取り出せる仕組みが用意されました。Cursor側からFigmaに話しかけ、必要な情報を取って、実装の近道を作れます。

この記事は「Figma MCPサーバーをCursorで動かす」までを、現場の手順としてまとめます。環境構築から動作確認、つまずきポイント、運用のコツまで。読み物としても退屈しないように、少しだけ毒も入れます。

まず 何を止めるのか 目コピと手拾いの話

止めたいのは、努力ではありません。摩耗です。

Figmaを開いて、Dev Modeで数値を見て、メモして、Cursorに戻って、CSSを書いて、ブラウザで確認して、違っていて、またFigmaへ。これを1日50回やると、脳のCPUが熱暴走します。

人間が弱いのは集中力ではなく、コンテキストスイッチです。タブ移動は意外とHPを削る。しかも削られていることに気づきにくい。怖い。

このタブ移動と手拾いを減らせるのがMCPの気持ちよさです。必要な時に必要な情報が、会話として返ってくる。実装の流れを止めない。

あなたは普段、Figmaを見て「このコンポーネント、何で出来てるか」を推理していませんか。推理の時間、嫌いじゃないけれど、納期が推理小説の読者でいてくれないのが問題です。

MCPとFigma MCPサーバーをざっくり理解する

MCPは、AIやエディタが外部のツールやデータにアクセスするための共通プロトコルです。ホスト側(今回はCursor)がクライアントとしてMCPサーバーに接続し、サーバーが情報取得や操作を担当します。

Figma MCPサーバーは、Figmaのファイルや選択中の要素などの情報を、Cursorから取得できるようにする橋渡しです。デザインの数値、コンポーネント構造、スタイルの参照。こういう「実装に欲しいやつ」を会話で引き出せる。

ポイントは、あなたの作業の中心がCursorに寄ること。Figmaが脇役になります。これは地味に効きます。

できることのイメージ 何が嬉しいのか

例を出します。たとえば、ボタンの実装をしている時。

• ボタンの角丸、余白、フォントサイズ、行間、色をまとめて取得する
• ホバー、フォーカス、disabledの差分を確認する
• 同じ見た目なのに別スタイルが混ざっていないか炙り出す
• コンポーネントのバリアント名や使い分け意図を拾う
• デザインシステムのトークンっぽいものを見つけてCSS変数化する

実装者が欲しいのは、華やかな文章ではなく、正確な数値と一貫性です。だけど人間の目は、ときどきウソをつく。MCPはそこを殴ってくれます。やさしく。

準備するもの ここで詰まる人が多い

環境構築で必要なものを先に並べます。途中で探すとテンポが死ぬので。

• Cursor(最新版推奨)
• Node.js(ローカルサーバーを使う場合。LTS推奨)
• Figmaアカウント
• Figmaファイルへのアクセス権(閲覧だけでは足りない場合があります)
• Figma Dev Modeを使える状態(組織やプランにより異なります)

Figma側の権限まわりが一番の地雷です。自分は見えているのに、AIには見えない。こういうことが起きます。権限は人間にも機械にも優しくない。

セットアップの全体像 ローカル版とリモート版

Figma MCPサーバーには、大きく2つの運用があります。

• ローカルで動かす(Desktop Serverのイメージ。自分のPC内で完結)
• リモートで動かす(Remote Server。ネットワーク越しに接続)

最初はローカルが楽です。セキュリティ的にも扱いやすい。チームで共有したい、CIっぽく使いたい、権限管理を中央集権にしたい。そうなったらリモートを検討するとよい。

手順1 Figma側でMCPの入口を確認する

まずFigmaの公式ドキュメントで、MCPサーバーの導入ページを確認します。FigmaはDev Modeを軸にMCP連携を案内しており、Cursor向けの導線も用意されています。

ここでやることは2つ。

• MCPサーバーの種類(ローカルかリモートか)を選ぶ
• Cursorでの接続手順の流れを掴む

読み飛ばしても構いません。必要なところだけ拾えば十分です。ドキュメントは分厚い辞書、現場は単語帳。

手順2 Cursor側でMCPサーバーを追加する

CursorにはMCPサーバーを追加する仕組みがあります。基本は設定から「MCP Servers」を開き、追加します。

ここで大事なのは、どの方式で繋ぐか。

方式A ローカル(stdio)で繋ぐ

ローカルでMCPサーバーを起動し、Cursorがstdio経由で接続する形です。ネットワーク越しに出ないので、最初の一歩として安心感があります。

Figma側が提供しているローカルサーバーの実装がある場合は、それを使うのが早いです。自前実装も可能ですが、最初から沼に飛び込む必要はありません。

流れはこうです。

1. Node.js環境を用意
2. Figma MCPサーバーを取得(公式の案内に従う)
3. ローカルでサーバーを起動
4. CursorでstdioのMCPサーバーとして登録
5. ツール一覧にFigma関連が出るか確認

方式B リモート(HTTP)で繋ぐ

リモートサーバーは、OAuthなどを絡めて安全に接続するのが基本です。Figmaのリモートサーバー案内では、Cursorの設定に追加するための導線もあります。

チームで共通のサーバーを使う場合、ここが本命になります。ログの集約もやりやすい。

動作確認 ここまで来たら勝ち

接続できたかどうかは、会話で確かめます。難しいテストは要りません。

まずはCursorのチャットで、こう聞きます。

• 「FigmaのMCPツールが利用可能か教えて」
• 「今開いているFigmaファイルから選択中の要素の情報を取得して」

もしFigma側の選択情報を拾えるなら、要素を選択した状態で聞くのが早いです。Figmaを開いて、対象のフレームやレイヤーをクリック。戻ってCursorで質問。これで返ってくればOK。

ここで返ってくる情報は、形式が多少荒くても構いません。目的は「繋がっている」ことの確認です。美しさは後回しでよい。

ところで、あなたは「繋がった瞬間」に変な達成感を感じるタイプですか。私は感じます。ケーブルを挿しただけで世界を救った気分になる。人間は単純。

よくある詰まりポイントと直し方

1 権限が足りない 問い合わせても自分は見える

人間のFigma閲覧権限と、MCP経由で取得できる権限が一致しないケースがあります。Figmaの組織設定やDev Modeの扱い、ファイルの共有範囲が絡む。

対策はシンプルです。

• 対象ファイルに対して、必要な権限(閲覧だけで足りるか、編集が必要か)を再確認
• Dev Modeの利用可否を確認
• 会社アカウントと個人アカウントが混ざっていないか確認

アカウントの混在は本当に多い。ログインし直したら直るのに、半日悩むやつ。

2 サーバーが起動していない そもそも居ない

ローカルの場合、サーバーは常駐していないと接続できません。Cursor側の設定は正しいのに、プロセスが落ちている。ありがち。

• ターミナルでサーバーが動いているか確認
• ポートが被っていないか確認(リモート方式の場合)
• NodeのバージョンをLTSに寄せる

3 Cursorにツールが出ない MCPの設定が反映されていない

設定ファイルの書き間違い、追加したつもりで保存していない、再起動していない。地味だけど多いです。

対策はチェックリスト化が一番。

• MCPサーバーがEnabledになっているか
• サーバーの種類(stdio/HTTP)が想定と一致しているか
• Cursorを再起動しても表示されないか

現場での使い方 ただ繋いだだけでは速くならない

繋いだだけで速くなるなら、世の中の締切は消滅しています。実際は使い方の型が要る。

型1 まずは要素情報を一括で出させる

ボタン、カード、ナビ、フォーム。パーツ単位で「この要素のスタイルをまとめて出して」と頼みます。1項目ずつ聞くと、会話が長くなる。短距離走のはずがマラソンになる。

型2 取得結果をトークン化してCSS変数に落とす

Figmaの数値をそのままCSSに直貼りすると、後で泣きます。特に色と余白。

取れた値は、

• CSSカスタムプロパティ
• Sass変数
• TailwindやUnoCSSのトークン

このどれかに寄せる。プロジェクトの流儀に合わせます。揃えるだけで保守性が跳ね上がる。

型3 デザイン差分を炙り出す

「同じに見えるのに違う」が最も厄介です。MCPで複数要素のスタイルを比較させると、違いが露骨に出ます。

たとえば、見た目が同じカードなのに、片方だけpaddingが14pxだった。こういうのを早い段階で潰せると、後工程の修正が減ります。QAが静かになる。夜も静か。

メリット 速度だけではない

• 実装中にFigmaへ戻る回数が減る
• 数値の取り違えが減る
• デザインの揺れを早く見つけられる
• 新人や学習者が「何を見ればいいか」を掴みやすい
• レビュー時に根拠を示しやすい(この値はFigma由来)

地味に大きいのは、コミュニケーションです。デザイナーに聞く回数が減る、ではありません。聞く時の精度が上がる、です。

「ここ、なんか違います」より「このコンポーネントだけ角丸が8で、他は12です。意図ありますか」の方が、話が速い。現場は速さが正義のフリをしている会話ゲー。

デメリット いい道具ほど使い方で痛い目を見る

• 権限やプラン、組織設定に左右される
• 初期セットアップでつまずくと心が折れやすい
• 取得できる情報がプロジェクトやファイル構造に依存する
• サーバー運用(特にリモート)はセキュリティ設計が要る
• AIの解釈が混ざるので、最終的な目視確認は残る

万能ではありません。目視確認が不要になる未来は、たぶん来ない。来たとしても、その時は別の仕事が増えています。人類は忙しいことが好き。

学習者向け これを機に伸びるポイント

MCPを触ると、学習者にとって嬉しい副作用があります。抽象化が見えてくる。

Figmaの値をただ写すのではなく、

• なぜこの余白なのか
• なぜこの行間なのか
• どの単位で管理すべきか

こういう設計の視点が出やすい。実装は写経から設計へ進むと一気に楽しくなる。ここに到達したら勝ちです。勝ちと言っても給料は増えませんが、ストレスは減る。

実務者向け チーム運用でのコツ

1 まずは一人で成功体験を作る

いきなりチーム導入は燃えやすいです。まずは自分の作業で「確かに速い」を作る。小さい成功が正義。

2 コマンド例をテンプレ化する

Cursorのチャットで聞く内容をテンプレにします。

• 「選択中の要素のCSSに必要な値を表で出して」
• 「ホバーとフォーカスの差分も出して」
• 「同種のコンポーネント3つを比較して」

このテンプレがあるだけで、導入が早い。属人化もしにくい。

3 リモート化するなら認証とログ設計を先に考える

リモートサーバーは便利なぶん、責任も増えます。OAuthの扱い、アクセス範囲、ログの保存。ここを適当にすると、後でセキュリティレビューに呼ばれます。呼ばれるだけならいい。長い。

動作確認のチェックシート これで迷子になりにくい

• CursorにMCPサーバーが追加され、Enabledになっている
• ローカルの場合、サーバープロセスが起動中
• Figmaの対象ファイルにアクセスできるアカウントで認証できている
• Figma側で要素を選択した状態で取得できる
• CursorのチャットにFigma関連ツールが出る

ここまで揃えば、現場投入は十分可能です。

この話題で読者に役立つおまけ 実装が速くなる小技

1 デザイン値をそのまま使わない まずスケールに寄せる

余白を8, 12, 16, 24のスケールに寄せるだけで、CSSが読みやすくなります。Figmaの値が14なら、意図があるのか、ただのズレなのかを確認する。ズレが多いほど、あとで地獄を見る。

2 ボタンとフォームだけでもトークンを作る

全部トークン化は疲れます。最初はボタンとフォームから。ここは変更が頻繁で、影響範囲が大きい。

3 レビュー観点を固定する

レビューで見る項目を固定します。

• 余白スケールに乗っているか
• 色がトークン化されているか
• フォーカススタイルがあるか
• ホバー差分が過剰でないか

この観点をチームで共有すると、実装の揺れが減ります。レビューが速い。気持ちも速い。

最後に 使いどころの見極め

Figma MCPサーバーをCursorで使うと、デザインと実装の距離が縮まります。縮まるのは距離で、苦労がゼロになるわけではない。そこは誤解しない方がいい。

ただ、目コピと手拾いの往復を減らせるのは確かです。コンテキストスイッチが減ると、実装が止まりにくい。止まらない日は、仕事が楽に感じます。

今日から全部を変える必要はありません。まずは1コンポーネント。ボタンでもカードでもよい。繋げて、聞いて、値を取って、実装してみてください。そこで「おっ」となったら、もう戻れません。便利さには中毒性がある。