Figma MCPとCursorを連携してデザインを自動コーディングする完全ガイド
コーダーのためのWeb制作ブログ、中の人のhisaです👋
今回は、最近よく耳にする「Figmaのデザインを自動でコーディングしてくれる機能」についてお話しします。有料級の内容なので、ぜひ最後までご覧ください！
デザインからコードへの変換は、多くの開発者にとって時間がかかる作業です。
しかし、Model Context Protocol（MCP）とFigmaを組み合わせることで、この作業を大幅に自動化できます🤖✨
この記事では、Figma MCPサーバーとCursorというツールを連携し、Figmaのデザインを直接コードに変換する方法を、わかりやすく解説します🖌️➡️💻
そもそもMCPとは
Model Context Protocol（MCP）は、AI言語モデルと外部システム間で標準化されたコンテキスト交換を可能にするオープンプロトコルです。
MCPの主な特徴
- 標準化されたインターフェース: 異なるAIツールとデータソース間の一貫した接続
- 双方向通信: リアルタイムでのデータ交換
- セキュリティ: 認証とアクセス制御の統合
- 拡張性: カスタムツールとの容易な統合
必要な前提条件とツールの準備
- Node.js のインストール Node.js (v16.0以上推奨)
- Figmaアカウントの作成 – API アクセス用
- Cursor – インストールされていない方はこちら公式サイトからダウンロードしてください
Windowsの場合
Node.js 公式サイト: https://nodejs.org/ja/download/
公式サイトにアクセスすると、Windows Installer (.msi) が提供されています。LTS (Long Term Support) 版とCurrent (最新) 版がありますが、安定性を考えるとLTS版を選ぶのが良いでしょう。インストーラーに従って進めば、Node.js と npm (Node Package Manager) が同時にインストールされます。
macOSの場合
Homebrew を使用したコマンドラインインストール (推奨)
macOSのパッケージマネージャーであるHomebrewを使うのが、最も一般的で簡単な方法です。Homebrewがまだインストールされていない場合は、まずHomebrewをインストールする必要があります。
Homebrewのインストール（まだの場合）: ターミナルを開き、以下のコマンドを実行します。
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" Node.jsのインストール（Homebrewインストール後）:
brew install nodeHomebrewを使用すると、Node.jsとnpmがインストールされ、パスも自動的に設定されるため、ターミナルからすぐに使えるようになります。
公式ウェブサイトからインストーラーをダウンロード Windowsと同様に、macOS版のインストーラー (.pkg) も公式ウェブサイトで提供されています。
どちらの方法でも、インストール後にターミナルで以下のコマンドを実行して、正しくインストールされたか確認できます。
node -v
npm -v
Node.jsとnpmのバージョン番号が表示されれば、インストールは成功です。
Figma APIの取得方法
設定画面からAPIキーを取得します。
⚠️ 重要: トークンは再表示されないため、必ず安全な場所に保存してください。
Figmaのホーム画面から左上にアイコンがあります。そちらをクリックしたら設定という項目があります。
続いて上部に『セキュリティ』タブの中の画面下らへんに
『個人アクセストークン』がありますので、『新規トークンを作成』を押してください。
1.トークンに分かりやすい名前を付ける。
プロジェクト名とか分かりやすい名前がいいです。
今回は適当につけていますが、普段はプロジェクト名をつけています。
2.有効期限は自分は一番長い『90日間』を選択しています。
3.ファイルのコンテンツがありますのでそちらを読み取りのみに選択してください。
トークン生成ボタンを押して生成してください。
トークンが発行できたら以下の画面になりますのでコピーしてください。
一番大事な事なのでもう一度言います。
⚠️ 重要: トークンは再表示されないため、必ず安全な場所に保存してください。
コメントを残す