デザインをコードに落とし込む作業を効率化したい方には、Figma MCPがおすすめです。
MCP連携すれば、デザインの意図をAIが直接理解し、コーディングを自動化してくれます。
この記事では、Cursorと連携したFigma MCPの使い方や実際にデザイン作成する方法を解説します。
なお、この記事で扱うFigma MCPは公式のDev Mode MCPサーバーです。
MCPとは？FigmaのModel Context Protocolを理解する
近年のAI技術の進化に伴い、AIが外部ツールと連携するための新しい標準規格としてMCP（Model Context Protocol）が注目されています。
特にデザインツールであるFigmaがMCPに対応したことで、デザイナーとエンジニアの連携が大きく変わろうとしています。
ここでは、MCPの基本的な概念から、Figmaにおける具体的な活用方法、そしてAI搭載エディタのCursorで利用するメリットをご紹介します。
MCPの概要
MCP（Model Context Protocol）とは、AIモデルが外部のアプリケーションやサービスと効率的に情報交換するためのオープンスタンダードな技術概念です。
これにより、AIはモデル内部のコンテキストウィンドウだけに頼るのではなく、外部で管理されている最新の文脈情報を動的に取得・更新できます。
具体的には、AIエージェントなどのクライアント、文脈情報を提供するサーバー、そしてテキスト生成を行うLLM本体などで構成されます。
MCPは、AIがより深い理解に基づいた対話や自律的な問題解決を行うための重要な基盤技術とされています。
FigmaでMCPが解決する課題
FigmaにおけるMCPは、特にデザインと開発のプロセス間に存在する大きなギャップを埋めることを目的としています。
従来の方法でデザイナーが作成したデザインをエンジニアがコードに変換する際には、手作業による情報の伝達ミスや解釈の違いが発生してしまう可能性があります。
しかしMCPでは、AIがFigmaのデザインデータに直接アクセスし、レイアウト、スタイル、コンポーネントなどの情報を正確に理解することを可能にします。
これにより、デザインの意図がコードへ忠実に反映され、手戻りの削減や開発スピードの向上が実現します。
Figma Dev Mode MCP Serverの仕組み
Figma Dev Mode MCP Serverは、Figmaのデスクトップアプリに組み込まれた機能で、ローカルサーバーとして動作します。
このサーバーを有効にすると、VS CodeやCursorといったMCPをサポートするコードエディタが、Figmaで開かれているデザインの文脈情報に直接アクセスできるようになります。
具体的には、エディタ上で選択したFigmaのフレームやコンポーネントの情報をサーバーが抽出し、AIに提供します。
その結果、AIはデザインの変数、レイアウト、さらにはCode Connectで連携された既存コンポーネントの情報まで活用し、より精度の高いコードを生成できるのです。
Cursorで活用するメリット
AIコーディングエディタであるCursorでFigmaのMCPを活用すると、開発ワークフローが劇的に効率化されます。
最大のメリットは、Figmaのデザインを見ながら、対話形式でAIにコーディングを指示できる点です。
「このボタンを実装して」といった簡単な指示だけで、AIがFigmaの正確なデザイン情報を基にコードを生成してくれます。
これにより、ゼロからコードを書く手間が大幅に削減されるだけでなく、デザインの一貫性を保ったコンポーネントの高速な生成が可能になります。
また、生成されたコードの微調整もAIとの対話を通じて行えるため、デザインの再現性を高めつつ、開発プロセス全体をスムーズに進めることができます。
Figma MCPの使い方：Cursorと接続するステップ
続いて、Figma MCPをCursorと接続する手順や、接続の際のトラブルシューティングについて解説します。
Figma MCPとCursorの接続手順
Figma MCPとCursorの接続手順は以下の通りです。
デスクトップアプリが最新バージョンに更新されていることを確認し、Figma Designファイルを開くか、新規ファイルを作成します。
左上のメニューから「基本設定」を選択し、「Dev Mode MCPサーバーを有効にする」を選択します。
画面下部に確認メッセージが表示されると有効化完了です。
Cursorを導入していない人は、公式サイトからインストールしましょう。
Cursorを開き、「設定」に移動します。
「Tools ＆Integrations」タブを選択し、「Add Custom MCP」をクリックしましょう。
開いたファイルに以下の内容を入力し、保存します。
{
"mcpServers": {
"Figma": {
"url": "http://127.0.0.1:3845/sse"
}
}
}
「Tools ＆Integrations」に戻ると、Figma MCPが追加されています。
設定完了後はサーバーを更新するか、起動してください。
接続がうまくいけば利用可能なツールが表示されます。
以上でCursorとFigma MCPの接続が完了です。
トラブルシューティング：接続できないときの対処
接続で問題が発生した場合、まずは基本的な確認から行いましょう。
FigmaのデスクトップアプリとCursorを両方とも再起動することで、問題が解決することがあります。
また、Figmaの「基本設定」で「Dev Mode MCP Serverを有効にする」がチェックされているかも確認してください。
Cursor側の設定でサーバーのURLが正しく入力されているかのチェックも重要です。
Figma MCP × Cursorでデザイン作成を自動化する方法
次に、実際にFigma MCPとCursorを使ってデザイン作成を行う方法を解説します。
デザインシステムと変数を活用して精度UP
Figma MCPとCursorを連携させる際、コード生成の精度を高めるには、デザインシステムとFigma variables（変数）を活用することが有効です。
特に、間隔や色、半径、タイポグラフィには変数を活用することをおすすめします。
AIに単なる見た目を解釈させるのではなく、color-background-dangerやradius-corner-mdといった意味を持つ変数を渡すことで、デザインの意図が正確に伝わります。
これにより、AIは「これは危険を知らせる背景色で、角丸は中サイズ」と構造的に理解し、コードに反映させることが可能です。
さらに、spacing-lg（大きな余白）やfont-size-xl（特大フォント）などの変数をAuto Layoutと組み合わせることで、レイアウトの意図も明確になります。
これらの変数をデザインの初期段階から定義し、コンポーネントに適用しておくことで、Cursorはより一貫性があるコードを生成してくれるでしょう。
使用できるツール
Figma MCPで使用できるツールには以下のようなものがあります。
| ツール名 | 機能 |
|---|---|
get_code | Figmaの選択内表からコード生成 |
get_variable_defs | 選択範囲で使用されている変数とスタイルを返す |
get_code_connect_map | FigmaノードIDとコードベース内の対応する コードコンポーネント間のマッピングを取得 |
get_image | 選択した範囲のスクリーンショット取得 |
create_design_system_rules | デザインシステムルール生成のためのプロンプトを作成する |
これらはAIによって自動で使用されます。
なお、生成されるコードはデフォルトではReact + Tailwindですが、チャットで指定することも可能です。
プロンプト例：Webアプリを生成する
続いて、実際にデザインからWebアプリを生成する手順を解説します。
デザインをCursorに送るには、選択ベースとリンクベースの二つの方法があります。
まずはFigmaのデスクトップアプリから、使用したいフレームかファイルを選びます。
リンクベースで使用する場合、右クリックをして「選択範囲へのリンクをコピー」をクリックしましょう。
選択ベースの場合は、選択範囲についてのプロンプトをAIに送ります。
一方リンクベースの場合は、リンクをプロンプトに含めます。
今回は、以下のデザインをもとにコード作成を依頼しました。
プロンプトを送信すると、ツールを使用することについて許可を求められます。
「Run tool」をクリックして実行を続けましょう。
ファイルの作成が完了すると、使用方法が表示されます。
実際に実行して表示されたサイトがこちらです。
画面下部に先ほどのデザインが再現されていることが分かります。
作成後のコード調整とデバッグ
作業後のコードは、その場でチャットから調整やデバックが可能です。
今回は、先ほどのサイトから文章を削除し、元のデザインの再現のみを実装してもらいました。
修正後のコードを実行した結果がこちらです。
指示通り文章を削除し、画面下部のデザインのみを再現していることが分かります。
Figma MCPの料金体系
Figma MCPを使用するには、有料プランの契約が必要です。
MCPを利用できるプランは以下の通りです。
| プラン | Devシートの料金（年払い） | フルシートの料金（年払い） | 対象者 | フルシート用のクレジット数 | 主な機能 |
|---|---|---|---|---|---|
| プロフェッショナル | 1,800円/月 | 2,400円/月 | 個人または小規模なチーム | 3000/月 | 無制限のファイルとプロジェクト チーム全体のデザインライブラリ |
| ビジネス | 3,750円/月 | 8,300円/月 | 組織全体でプロダクトを デザインする企業 | 3500/月 | 無制限のチーム数 共有ライブラリとフォント 一元管理ツール |
| エンタープライズ | 5250円/月 | 13,600円/月 | 複数のプロダクトやブランドの デザインを行う企業 | 4250/月 | カスタムチームワークスペース デザインシステムのテーマ設定とAPI SCIMによるシート管理 |
また、シート別の利用できる製品一覧がこちらです。
| 製品 | コラボシート | Devシート | フルシート |
|---|---|---|---|
| FigJam | |||
| Figma Slides | |||
| Dev Mode | |||
| Figma Design | |||
| Figma Draw | |||
| Figma Buzz | |||
| Figma Sites | |||
| Figma Make |
MCPはDev Modeが利用できるDevシートとフルシートで使用可能です。
MCPが目的であれば、より安価なDevシートでも十分でしょう。
Figma MCPの今後のアップデート予測
Figma MCPは現在オープンベータ版であるため、今後アップデートで利用できる機能が増えたりパフォーマンスが改善したりする可能性があります。
そこで最後に、Figma MCPの今後のアップデート予測をお伝えします。
なお、こちらで紹介する内容はあくまで予測である点にご注意ください。
リモートサーバー機能の展望
現在、FigmaのDev Mode MCPサーバーはローカル環境での実行に限られていますが、将来的にはリモートサーバー機能の追加が期待されます。
この機能が実現すれば、物理的に離れた場所にいるチームメンバー同士でも、単一のサーバーを介してリアルタイムでの共同作業が可能になります。
特に、グローバルに分散したチームでの開発効率が飛躍的に向上するでしょう。
クラウドベースのMCPサーバーは、セットアップの手間を削減し、よりシームレスなデザインと開発の連携を実現するための重要なステップになると予測されます。
AI × デザイン開発ワークフローの進化
Figma MCPの登場は、AIを介したデザインと開発の融合を加速させ、今後のワークフローを大きく変えていくと予測されます。
将来的には、静的なコード生成だけでなく、インタラクティブなコンポーネントや複雑なアニメーションまでAIが自動で実装できるようになる可能性があります。
さらに、AIがデザインシステム全体を理解し、命名規則の統一や修正箇所の提案、ドキュメントの自動生成まで行うようになるかもしれません。
これにより、デザイナーとエンジニアの境界はより曖昧になり、両者が一体となってプロダクト開発を進める、より創造的で効率的なワークフローが主流になると考えられます。
まとめ
Figma MCPは、テキストエディタと連携することにより、AIにデザイン情報を送りコードを自動生成できるようになります。
公式のデスクトップアプリから利用でき、APIキーの設定も不要で簡単に連携させることが可能です。
現在Figmaを利用しており、コード化を効率化したいという方は、ぜひFigma MCPを試してみてください。