FigmaのデザインをCursorで実装する ― Figma MCPを活用したフロントエンド開発

公開日：2026.06.12　更新日：2026.06.12

tag: AI

こんにちは。wistaveです。
近年、生成AIの進化によってソフトウェア開発の現場は大きく変化しています。
当社でも日々の開発業務にAIツールを取り入れており、その活用方法について継続的に検証を行っています。
今回は、AIエディターであるCursorと、Figmaのデザイン情報をAIから参照できるFigma MCPを利用して、どの程度フロントエンド実装を効率化できるのかを検証してみました。
なお、実案件の情報は掲載できないため、本記事用に作成したサンプルデザインを用いて検証を行います。

Figmaとは

Webサイトやアプリケーション開発では、デザイナーが作成した画面デザインをもとにエンジニアが実装を進めるケースが一般的です。
Figmaは、そういったWebサイトやアプリのUI/UXデザインに特化したデザインツールです。
ただデザインできるだけでなく、より開発に近い形でカラー、タイポグラフィ、コンポーネントなども定義できます。
ボタンを押したときに画面を遷移させたりする簡易的なプロトタイプを作ることも可能です。
近年では多くの開発現場で標準的なデザインツールとして利用されています。

Cursorとは

Cursorは、AI機能を搭載したコードエディターです。
自然言語による指示で、コード生成、リファクタリング、バグ修正、ドキュメント生成などを行うことができます。
既存コードを理解した上で回答してくれるので、エンジニアがレビューや保守しずらいコードが生成されにくいのが良い点です。

Figma MCPとは

Figma MCPは、CursorなどのAIツールでFigmaのデザインファイルを操作するための仕組みです。
MCP（Model Context Protocol）を利用することで、AIはデザインのスクリーンショットだけではなく、レイアウト構造、コンポーネント情報、テキスト情報、サイズや余白などを理解した上でコード生成を行えるようになります。
これにより、エンジニアがFigmaを確認しながら実装していた作業の一部をAIが補助できるようになります。
また、今回の趣旨とはズレますが、コードからFigmaにデザインさせることもできたりします。

今回の検証内容

今回は以下のサンプルデザインを作成しました。

サンプル画面

SaaS管理画面を想定したダッシュボード画面です。
このデザインからCursorとFigma MCPを利用してどこまで実装できるかを検証します。

検証用デザインには以下の要素を含めています。

サイドバー
KPIカード
グラフ表示エリア
ユーザー一覧テーブル
ステータス表示

実案件でもよく登場するUIパターンを意識して作成しています。

余談ですが、Figmaには生成AIを利用してデザインを生成できるFigma Makeという機能があります。
Figma Makeは実際に動くフロントエンドのコードが生成されるので、Figmaだけでもプロトタイプ開発が可能です。
ただ、今回は人が作成したデザインからコードを生成することが目的ですので、また機会があればFigma Makeの紹介もできればと思います。

CursorからFigmaを参照する

CursorからFigma MCP経由で対象デザインを参照できる設定を行います。
ローカルで動作するデスクトップ版MCPサーバーもありますが、今回はリモートMCPサーバーを利用した方法で検証します。

※執筆時点（2026年6月）の設定方法であり、ご覧いただいているタイミングによっては設定方法が異なる可能性があります。
最新の情報は公式のインストールガイドを参照いただければと思います。
https://developers.figma.com/docs/figma-mcp-server/

1. CursorにFigmaのプラグインをインストールします。

CursorのAgentチャットでコマンドを実行すると、プラグインのインストールができます。

/add-plugin figma

2．Figmaアカウントで認証します。

これだけで、MCPサーバーが利用できるようになりました。

実際に生成してみる

Figma MCPを使ってAIに指示する

今回は以下のプロンプトでAIに指示します。

Figmaのデザインを参考に、Next.js + TypeScript + Tailwind CSSで実装してください。
レスポンシブ対応を考慮し、保守しやすい構成で作成してください。
https://figma.com/design/...（参照してほしいデザインのURL）

このとき、Figma上で参照してほしい要素を右クリックしてコピー/貼り付けオプションの選択範囲へのリンクをコピーでURLを取得できますので、そのURLをプロンプトに記載するとより正確に指示を出すことができます。

プロンプトを実行すると、いくつかコマンドの実行許可を求めれますので、問題なければ許可していきます。
特に追加の指示をすることなく、ひと通りのコードが出力されたようです。

生成結果

それでは、生成の結果を見ていきましょう。

初回生成にもかかわらず、レイアウトや配色は概ね再現できていました。
ただ残念ながら、折れ線グラフは表示されませんでした。
コード上は実装されているぽかったので、表示上のバグのようです。

生成されたコード

Next.jsのルーティングをしているappディレクトリから、トップのpage.tsxを抜粋してきました。

import { PlanCompositionChart } from "@/components/dashboard/PlanCompositionChart";
import { SalesChart } from "@/components/dashboard/SalesChart";
import { StatCards } from "@/components/dashboard/StatCards";
import { SystemStatusPanel } from "@/components/dashboard/SystemStatusPanel";
import { UserTable } from "@/components/dashboard/UserTable";
import { DashboardLayout } from "@/components/layout/DashboardLayout";

export default function Home() {
  return (
    <DashboardLayout>
      <div className="flex flex-col gap-6">
        <StatCards />

        <div className="flex flex-col gap-6 xl:flex-row">
          <div className="min-w-0 flex-1">
            <SalesChart />
          </div>
          <PlanCompositionChart />
        </div>

        <div className="flex flex-col gap-6 xl:flex-row">
          <UserTable />
          <SystemStatusPanel />
        </div>
      </div>
    </DashboardLayout>
  );
}

page.tsxは最低限の実装になっており、ちゃんとコンポーネント化されているようです。

どこまで実装できたか

生成結果を確認したところ、多くのUIは問題なく実装できていました。

良かった点

レイアウト構造は高精度で再現できた

サイドバーやカードレイアウト、テーブル構造などはほぼ期待通りに生成されていました。

コンポーネントのたたき台として十分使える

KPIカードやステータスバッジなどは、そのまま利用できるレベルだと思いました。
テーブルに至っては、フィルターや検索も機能していました。

レスポンシブ対応も考慮されていた

画面幅が変わったときのレイアウトも申し分ない程度に実装されていました。

気になった点

表示上の問題は検知できない

AIはコマンド上で出るエラーは検知し修正してくれますが、表示上の問題までは実際の画面を見ているわけではないので検知が難しいようです。

ダミーデータ前提の実装になりやすい

画面に表示されるデータは、ダミーデータとして定数で定義されていました。
実際のAPI連携を想定すると追加実装が必要になりそうです。

状態管理は別途設計が必要

より詳細なフィルタリングや検索機能を実装する場合は、改めて設計が必要です。

これらの気になる点は、CursorのPlan Modeを使ったり他のMCPツールを活用すれば、そこまで手間を掛けずに対応できると思います。

まとめ

今回はCursorとFigma MCPを利用して、Figmaのデザインからフロントエンド実装を生成する検証を行いました。
結果として、レイアウト実装やスタイリングの初期作業については大きな効率化が期待できることが分かりました。
一方で、拡張性や保守性、より詳細なアーキテクチャ設計といった部分を求めると、もう少し指示を工夫する必要があると思います。
今後もAIを積極的に活用しながら、開発効率と品質の両立を目指していきます。
フロントエンド開発やWebシステム開発に関するご相談がありましたら、お気軽にお問い合わせください。

wistave

Webのフルスタックエンジニアを目指して勉強中!!