はじめに
Webサイト制作では「いかに効率的にコーディングを行うか」が常に課題となります。
その解決策として注目されているのが AIコーディング です。
特に Figma context MCP × Cursor の組み合わせを使えば、Figma上のデザインを直接コード化し、AIのサポートで修正や調整を効率的に進めることができます。
実際に試してみたところ、ゼロから手で書くよりも格段にスピードアップでき、実務でも「たたき台」として十分活用できると感じました。
導入までの手順でつまずく部分も多かったので、この記事が少しでもスムーズな導入の助けになればと思います！
Figma context MCPとは
MCP（Model Context Protocol)とは、AIが外部サービスやデータにアクセスするための「共通プロトコル（仕組み）」です。
これまでのAIは「テキストを受け取ってテキストを返す」ことが基本でしたが、MCPを使うことで API経由で実際の外部データを読み込みながら処理できる ようになります。
Figma context MCPは、上記のMCPの仕組みを利用して、AIがFigmaのデザインデータを直接参照できるようにする接続サーバー です。
Figma context MCPを通すことで、レイヤー構造・色・フォント・余白・コンポーネント情報といったFigmaのデータをAPI経由で取得し、それを基にコードを生成できます。
Figma context MCPは「FigmaのデザインをAIに理解させるパイプ役」。
Cursorと組み合わせれば、効率的なWebサイト構築が可能になりそう！
導入に必要な環境
導入に必要なものは以下の通りです。
– Figmaアカウント
– Figma APIアクセストークン
– Cursorエディタ（VSCodeベースのAIコーディングエディタ）
– Node.js(v16.0以上）
– npm（v7.0以上）またはpnpm（v8.0以上）
Cursorのインストール
Cursorは、VSCodeをベースにしたAIコーディングエディタです。
https://cursor.com/ja
公式サイトからCursorをダウンロードし、インストールを進めます。
無料版と有料版のいくつかのプランが用意されています。
https://cursor.com/ja/pricing
まずは無料版を触ってみるのが良いと思いますが、
無料版だとプレミアムリクエスト(高性能なAIモデル使用)が月50回までという制限があり、すぐ上限に達してしまうため、本格的に利用する場合は有料版を推奨します。
Node.js のインストール
Node.jsとは？
– Web開発で広く使われているJavaScript実行環境
– MCPサーバーを動かすのに必要
いきなりデザイナーには縁のないものが出てきましたが、難しく考えなくても「FigmaとCursorをつなぐための裏方ツール」と理解すればOK。
npmとpnpmはNode.jsをインストールしたら自動で梱包されているから問題ありません。
一回ローカルにインストールしたらCursorが勝手に使ってくれるよ
インストール手順
Macの場合：
1.Node.js公式サイトにアクセス
https://nodejs.org/ja/download
2.「LTS（推奨版）」をクリックして .pkg をダウンロード
3.インストーラを開き、指示に従って進める
4.インストール後、ターミナルを開いて以下を実行
node -v
npm -v
キーボードのCommand (⌘) + Spaceキーを同時に押して、Spotlight検索を開きます。
検索ボックスに「ターミナル」と入力します。
表示された「ターミナル」アプリケーションをダブルクリックして起動します。
Windowsの場合：
1.Node.js公式サイトにアクセス
https://nodejs.org/ja/download
2.「LTS（推奨版）」をクリックして .msiをダウンロード
3.インストーラを開き、指示に従って進める
4.インストール後、コマンドプロンプトを開いて以下を実行
node -v
npm -v
キーボードでWindowsキー + Rを同時に押します。
「ファイル名を指定して実行」ダイアログが表示されるので、「名前」の欄に「cmd」と入力します。
[OK]ボタンをクリックすると、コマンドプロンプトが起動します。
6.Figma context MCP のセットアップ
6-1.APIキーを取得
1.Figmaにログイン → 右上プロフィール → 設定
2.セキュリティタグの個人アクセストークンから新規トークンを発行
3.発行された文字列をコピー（これが FIGMA_API_KEY）
6-2. ファイルキーを取得
Figmaで対象ファイルを開き、コーディングしたいフレームのリンクを取得します
ファイルキーは取得したリンクの下記XXXの部分になります。
https://www.figma.com/file/XXXXXXXX/…?node-id=1-4
Cursorとの接続
設定ファイルを作成
プロジェクトのフォルダ直下に.cursorフォルダを作成、その中にmcp.json作成し、以下を記述します。
{
"mcpServers": {
"figma": {
"command": "npx",
"args": [
"-y",
"figma-developer-mcp",
"--stdio"
],
"env": {
"FIGMA_API_KEY": "ここにFigmaの個人アクセストークン",
"FIGMA_FILE_KEY": "ここに対象のFigmaファイルキー"
}
}
}
}
接続テスト
Cursorを再起動し、以下のようにプロンプトを入力してみます。
「Figmaのデザインを読み込んで、利用可能なコンポーネント一覧を表示して」
成功すれば、Figmaのコンポーネント名やスタイル情報が返ってきます！
実際の利用フロー
ここまでできたら、実際にCursorにプロンプトを入力して、構築を開始します！
プロンプト例：
「リンク: https://www.figma.com/file/XXXXXXXX/Project?node-id=123-456
上記のFigmaファイルを、Figma MCPサーバーを使って取得して構築してください。」
なるべくデザイン通りに構築させるためには、いくつかプロンプトのコツがありそうです。
私は最初のプロンプトでは、上記の指示に加え以下のようにざっくり指示をしています。
– 過去に構築したファイル(社内のコーディングルールを守ったもの)を読み込ませて、htmlやscssの書き方はこれに倣ってと指示
初回出力ではなんとなく形になっている程度ではあるのですが、たたき台にはなるので、ゼロから自分で書くよりはだいぶ効率的にできたと思います。
初回出力以降の調整については、セクションごとにキャプチャを貼ったりなどして構築していっています。
まとめ
今回の記事では、Figma context MCPとCursorの組み合わせで、デザインから実装までの流れを効率化できることを紹介しました。
現状はまだAIを完全に活かし切れてはいないと思うので、プロンプトの出し方やデザイン整理の仕方、チーム全体でのルール設計を工夫し、精度と効率が上げていきたいと思います。
今はまだ手作業での調整が必ず必要な段階だけど、AIとMCPの進化によって、近い将来「デザインからそのままプロダクト」が当たり前になるかもしれないね！
