MENU
開発ツール

Figma MCPサーバーをCursorで使ってみる【準備編】環境構築から動作確認まで

みなと
UI実装担当
UI実装担当

Figma MCPサーバーって最近よく聞くけど、正直まだよく分かってない…

この記事では、CursorからFigma MCPサーバーを接続し、実際に使える状態にするところまでを解説します。

Figma MCPサーバーやCursorについて調べていると、公式ドキュメントや断片的な解説は見つかるものの、「結局どんな手順で設定すればいいのか」が分かりづらいと感じることはないでしょうか。

本記事は、そうした方向けに、Figma MCPサーバーをCursorから使い始めるまでの準備を、順を追って説明する前編（準備編）です。

このシリーズは、前編・後編の2本構成になっています。

  • 前編（この記事）
    環境を整え、実際にコマンドを実行できる状態にする
  • 後編（検証編）
    同じ環境を使って、コード生成の挙動を検証する

本記事では、Figmaはすでに使っている前提で進めますが、Cursorについてはインストールから簡単に触れます。Figma MCPサーバーを使うために必要な設定を丁寧に説明していくので、初めてCursorを触る方でも問題ありません。

それではまず、Figma MCPサーバーとは何かから見ていきましょう。

Contents
  1. Figma MCPサーバーとは何か
  2. Cursorとは何か
  3. 事前に確認しておくこと
  4. FigmaデスクトップMCPサーバーを有効にする
  5. CursorにFigma MCPサーバーを接続する
  6. 実際に使ってみる（動作確認）
  7. まとめ

Figma MCPサーバーとは何か

Figma MCPサーバーは、Figmaのデザイン情報をAIツールに渡すための仕組みです。もう少し噛み砕くと、「Figmaの中にある情報を、CursorなどのAIクライアントが使える形で提供する役割」を担っています。

CursorのようなAIエディタは、そのままではFigmaのデザインデータを読むことができません。たとえば、

  • どのフレームが選択されているのか
  • レイヤー構造がどうなっているのか
  • テキストや色、サイズの情報は何か

といった情報は、Figmaの内部にしか存在しないからです。

そこで登場するのが、Figma MCPサーバーです。

Figma、Figma MCPサーバー、AIエディタの関係を示した図。AIエディタがデザインのコード化を依頼し、Figma MCPサーバーがFigmaから選択中のデザイン情報を取得して、AIが理解できる形に整理して渡す流れを表している。

Figma MCPサーバーは、

  1. Figmaのデザイン情報を取得し
  2. AIが理解できる形に整理して
  3. AIエディタからのリクエストに応じて返す

という橋渡し役をしています。

みなと
みなと

その情報を元に、コードをどう生成するかを判断しているのは、Figma MCPサーバーではなく、Cursor側のAIです。

そもそもMCPとは？

MCP（Model Context Protocol）は、AIと外部ツールのあいだで使われる「通訳のルール」のようなものです。

AIは、そのままではFigmaやデータベースの中身を直接理解できません。そこでMCPというルールを使って、

  • どんな情報を
  • どんな形で渡すのか

をあらかじめ決めておくことで、AIが外部ツールの情報を正しく受け取れるようになります。

Figma MCPサーバーは、このMCPの仕組みを使って、現在選択されている要素や、その構造・スタイルといったデザイン情報をAIエディタに伝えています。

Figma MCPサーバーには2つの種類がある

Figma MCPサーバーには、大きく分けて2つの種類があります。

  • デスクトップMCPサーバー
  • リモートMCPサーバー

デスクトップMCPサーバーは、Figmaデスクトップアプリに内蔵されており、ローカル環境でMCPサーバーを起動できるのが特徴です。特別なサーバー構築は不要で、アプリ上で有効にするだけで使えます。

一方、リモートMCPサーバーは、Figmaが提供するホストエンドポイントに接続する方式で、チーム運用を前提とした構成になります。

本記事では、設定がシンプルで、個人でもすぐに試せるデスクトップMCPサーバーを使って進めていきます。

Cursorとは何か

Cursorは、AI機能を組み込んだコードエディタです。操作感はVS Codeに近く、普段からエディタを使っている方であれば、特別な説明がなくても直感的に扱えます。

Cursor公式サイトのトップページ。AI機能を備えたコードエディタであることが分かるファーストビュー
Cursor公式サイトのトップページ

本記事では、CursorをFigma MCPサーバーと連携するためのAIエディタ（MCPクライアント）として扱います。Figma MCPサーバーを利用するには、MCPに対応したクライアント（エディタやアプリ）が必要です。

なぜCursorが良いのか

Cursorがこの用途に向いている理由として、次の点が挙げられます。

  • MCPに対応しており、Figma MCPサーバーを直接接続できる
  • ローカルURLを登録するだけで設定でき、構成がシンプル
  • 利用例が多く、画面や挙動を把握しやすい

これらの特徴から、Cursorは「まずFigma MCPサーバーを試す」「同じ手順を再現する」といった目的に適したエディタと言えます。

なお、MCPに対応したクライアントはCursor以外にもあり、VS CodeやClaude Codeなどを利用することも可能です。本記事では、手順と検証条件を揃えるため、以降の説明はCursorを前提に進めます。

Cursorのインストールについて

Cursorをまだ使っていない場合は、公式サイトからインストールしてください。インストール後、設定画面を開ける状態であれば十分です。このあと行うMCPサーバーの接続設定に進めます。

事前に確認しておくこと

ここから先は、実際に手を動かして設定を進めていきます。その前に、事前に確認しておきたいポイントが2つあります。

スワン
スワン

どちらも難しいものではないので、「この条件を満たしているかどうか」だけ軽くチェックしておきましょう。

Figmaデスクトップアプリで作業できること

本記事では、ブラウザ版ではなく、Figmaデスクトップアプリを前提に進めます。デスクトップMCPサーバーはFigmaデスクトップアプリからのみ有効にできるためです。

あわせて、MCPサーバーは現在開いているFigmaファイルの情報を扱います。そのため、次の状態になっていれば問題ありません。

  • Figmaデスクトップアプリが起動できる
  • 対象のデザインファイルを開ける
  • フレームやレイヤーを選択できる

Dev Modeが利用できるプランであること

デスクトップMCPサーバーは、FigmaのDev Modeから有効にします。そのため、Dev Modeを利用できるプランである必要があります。

公式ドキュメントによると、有料プランの「Dev」または「フルシート」で利用可能とされています。無料プランでは利用できない点に注意してください。

画面下部のバーからDev Modeに切り替えられる状態であれば、この条件は満たしています。

Figmaデスクトップアプリの画面。画面下部のバー右端にDev Modeの切り替えボタンが表示されている
Figmaデスクトップアプリでは、Dev Modeの切り替えボタンは画面下部のバー右端に表示されます。

FigmaデスクトップMCPサーバーを有効にする

ここからは、Figmaデスクトップアプリ上でデスクトップMCPサーバーを有効にする手順を見ていきます。

スワン
スワン

操作自体はそれほど難しくありません。Figmaの画面を開いた状態で、一つずつ確認していきましょう。

1. FigmaデスクトップアプリでDev Modeに切り替える

まずは、Figmaデスクトップアプリを起動し、MCPサーバーを使いたいデザインファイルを開きます。

ファイルを開いたら、画面下部のバーからDev Modeに切り替えてください。バーの右側にある切り替えボタンをクリックすると、画面右側にインスペクト関連の情報が表示されます。

Figmaデスクトップアプリの画面。Dev Modeに切り替えた状態で、下部バーと右側のインスペクト情報が表示されている
Dev Modeに切り替えた状態のFigmaデスクトップアプリ。画面下部のバーと、右側に表示されたインスペクト情報が確認できます。

2. デスクトップMCPサーバーを有効にする

画面右側のインスペクトパネル内に、「MCP」というセクションが表示されているはずです。その中にある「デスクトップMCPサーバーを有効にする」というボタンをクリックしてください。

Figmaのインスペクトパネルに表示されたMCPセクション。デスクトップMCPサーバーを有効にするボタンが表示されている

クリックすると、サーバーが実行中であることを示すメッセージが表示されます。この時点で、Figmaデスクトップアプリ内でMCPサーバーがローカルで起動している状態になります。

デスクトップMCPサーバーが有効になると、サーバーが動作しているローカルURLが表示されます。デスクトップMCPサーバーは、以下のURLで動作します。

http://127.0.0.1:3845/mcp

このURLは、次のセクションでCursor側の設定に使用します。

CursorにFigma MCPサーバーを接続する

Figma側でデスクトップMCPサーバーを有効にできたら、次はCursorからそのMCPサーバーに接続する設定を行います。ここでやることは、「Cursorに、FigmaのMCPサーバーのURLを教える」だけです。

1. Cursorの設定画面（Tools & MCP）を開く

まず、Cursorを起動します。画面右上にある歯車アイコンをクリックして、Cursor Settingsを開いてください。設定画面が開いたら、左側メニューにある「Tools & MCP」を選択してください。

Cursorの設定画面（Cursor Settings）。「General」が表示され、左側メニューに「Tools & MCP」が見えている状態
Cursorの設定画面（Cursor Settings）。左側メニューに「Tools & MCP」が表示されています。

2. 新しいMCPサーバーを追加する

「Tools & MCP」画面では、Cursorに外部のMCPサーバーを登録できます。「Add Custom MCP」をクリックすると、新しいMCPサーバーを登録するための入力欄が表示されます。

CursorのTools & MCP設定画面。「Add Custom MCP」ボタンが表示されている
「Add Custom MCP」をクリックして、新しいMCPサーバーを追加します。

3. Figma MCPサーバーの情報を入力する

表示された入力欄に、FigmaデスクトップMCPサーバーの情報を入力します。下記の内容を追加してください。

{
  "mcpServers": {
    "figma-desktop": {
      "url": "http://127.0.0.1:3845/mcp"
    }
  }
}
  • figma-desktopは任意の名前です。後でCursorからコマンドを実行する際に使用されます。
  • URLには、先ほど確認したhttp://127.0.0.1:3845/mcpを指定します。

入力できたら、そのまま保存してください。

4. 接続できていることを確認する

設定を保存して戻ると、追加したMCPサーバーが一覧に表示されます。Figma MCPサーバーの左側にあるアイコンが緑色になっていれば、接続は完了です。

CursorのTools & MCP設定画面。Installed MCP Serversの一覧にfigma-desktopが表示され、有効になっている
Figma MCPサーバーが一覧に表示され、左側のアイコンが緑色になっていれば接続は完了です。
toolsとpromptsについて

追加したMCPサーバーの欄には、「10 tools, 3 prompts enabled」という表記が表示されます。ここをクリックすると、toolsとpromptsの一覧を確認できます。

  • tools
    AIが内部で使う機能群です。Figmaの構造情報やスタイル、スクリーンショットなどを自動的に取得します。ユーザーが直接操作するものではありませんが、プロンプト実行時に表示される処理内容を理解するうえで、存在を知っておくと安心です。
  • prompts
    ユーザーがCursorから直接実行できるコマンドです。このあと使うget_code_for_selectionも、そのひとつです。

実際に使ってみる（動作確認）

ここまでの設定が正しくできていれば、CursorからFigma MCPサーバーを呼び出せる状態になっています。この章では、Figma MCPサーバーが正しく動作するかどうかの確認を行います。

前提：セレクションベースとリンクベースについて

Figma MCPサーバーでは、Figmaのデザイン情報をAIクライアントに渡す方法として、セレクションベースとリンクベースの2つがあります。

セレクションベース

セレクションベースは、Figmaデスクトップアプリ上で選択しているフレームやレイヤーを、そのまま対象として扱う方法です。現在の選択内容を起点にデザイン情報が取得されるため、「いま選んでいるものが対象になる」という関係が分かりやすく、操作しながら挙動を確認しやすいのが特徴です。

リンクベース

リンクベースは、FigmaのフレームやレイヤーへのURLを使って対象を指定する方法です。URLに含まれるノードIDをもとにデザイン情報が取得されるため、選択状態に依存せず、対象を明示できる点が特徴です。

本記事（前編・後編）では、セレクションベースの使い方を前提に説明を進めます。以降の手順では、Figma上で対象の要素を選択した状態で操作してください。

1. Figmaで対象の要素を選択する

Figmaデスクトップアプリで検証用のデザインファイルを開き、フレームやセクションなど、ある程度まとまりのある要素を選択してください。

Figmaデスクトップアプリでフレームが選択されている状態のデザイン画面。選択範囲がハイライト表示されている
Figmaでコード化したい要素を選択する

この章では、選択した要素が正しくMCPサーバーに渡るかどうかを確認するのが目的なので、「この範囲をコード化するとどうなるか」を試してみたい要素を選んでおけば問題ありません。

2. Cursorのチャットを開く

Cursorでは、AIへの指示はチャット（New Chat）から行います。以下のいずれかの方法で表示してください。

  • メニューバーの「View」→「Open View…」→「New Chat」を選択する
  • 画面右上の「…（三点リーダ）」をクリックし、「Chat」のトグルをONにする

ショートカットを使う場合は、以下でも開けます。

  • macOS：⌘ + L
  • Windows：Ctrl + L

チャットが開いたら、入力欄にカーソルを置いてみてください。チャットの入力欄にスラッシュ（/）を入力すると、先ほど登録したMCPサーバー名（figma-desktop）が頭についた状態で、そのMCPサーバーに用意されているprompts（get_code_for_selectionなど）が候補として表示されます。

Cursorのチャット画面でスラッシュを入力した状態。figma-desktop のMCPコマンド候補が一覧表示されている
チャット入力欄でスラッシュ（/）を入力すると、MCPコマンドの候補が表示される

このように、Figma MCPサーバーを接続しておくことで、Cursorのチャット上からFigmaの情報を使った操作をコマンドとして実行できるようになります。

3. Cursorでコマンドを実行する

次に、Cursorのチャット入力欄で以下のコマンドを実行してください。

/figma-desktop/get_code_for_selection
HTMLとCSSを生成してください。

get_code_for_selectionは、現在Figmaで選択している要素をもとに、デザイン情報を取得するためのコマンドです。このコマンドを実行することで、Figma MCPサーバーから選択中のデザイン情報がCursorに渡されます。

その後に続けて書いている文章は、どのような方針でコードを生成したいかを伝えるためのプロンプトです。ここで指示を補足することで、出力されるコードの内容をある程度コントロールできます。

今回は動作確認が目的のため、文章プロンプトはシンプルなものにしています。このプロンプトをどう工夫すると、より意図に近いコードが生成されるのかについては、後半の記事で詳しく見ていきます。

4. MCPが反応すればOK

コマンドを実行すると、Cursor側で処理が始まります。画面には、AIが考えている様子を示すメッセージや、Figmaからデザイン情報を取得していることを示すログが表示されます。

また、処理の途中で、
「Run get_design_context:figma-desktop」
「Run get_screenshot:figma-desktop」
といった表示が出ることがあります。

これは、前の章で説明したtoolsが実行される際の確認表示です。Figmaの構造情報やスクリーンショットなどを取得するための内部処理を実行してよいかどうかを確認しています。表示された場合は、「Run」をクリックして処理を進めてください。

Cursorのチャット画面に「Run get_design_context:figma-desktop」などの実行確認が表示されている状態

最終的に、Figmaの情報をもとにしたHTMLやCSSが出力されていれば、Figma MCPサーバーとの接続と動作は問題ありません。

Cursorのチャット画面に、Figmaのデザイン情報をもとに生成されたHTMLとCSSのコードが表示されている
コードが出力されていれば準備編はここまででOK

まとめ

この記事では、Figma MCPサーバーをCursorから使い始めるための準備として、デスクトップMCPサーバーの有効化から、実際にコマンドを実行して動作を確認するところまでを紹介しました。

ここまでの手順を終えていれば、Figma上で選択したデザインをもとに、CursorからMCP経由でデザイン情報を取得し、出力を生成できる状態になっています。

次回の後編では、今回整えた同じ環境を使って、プロンプトの書き方を変えながら、どこまで意図したコードが生成できるのかを検証していきます。

押していただけると励みになります！

ABOUT ME
みなと
みなと
フロントエンドエンジニア
Contact
東京のWeb制作会社で15年以上働いている現役フロントエンドエンジニアです。これまで、いろんなプロジェクトに関わりながら、フロントエンド開発やWebデザインに取り組んできました。このブログでは、今までの経験を活かして、Web制作に役立つ情報やノウハウをシェアしていきたいと思います。初心者の方から、現場で働く方まで、誰でも参考にできる内容をお届けしますので、ぜひ覗いてみてください。
Recommend
こちらの記事もどうぞ
記事URLをコピーしました