デザイナー中心に22人でFigma×MCP×CursorでUI実装体験レポート

はじめに
- 生成AI×デザインのメンタルモデルを醸成したい
ハンズオン「Figma×MCP×CursorでUI実装体験」概要
参加者アンケート結果
ハンズオン実施にあたり「難しかったポイント」とその乗り越え方
ハンズオン実施で気をつけたこと
おわり

はじめに

こんにちは。クライアントサービスデザイン部のUIUXデザイナー篠崎です。

プロダクト開発の現場では、デザインを取り巻く生成AIの波がますます勢いを増しています。2024年までは文章から画像を生成する「テキストtoビジュアル」の手法が主流でしたが、今年2025年にはデザインシステムをMCPサーバー化し、ビジュアルを飛び越えて直接コードベースのUIを作るやり方が注目を集めています。

Figmaからも公式MCPのβ版が発表され、デザインプロセス、ひいてはプロダクト開発の流れそのものが大きく変わろうとしています。

生成AI×デザインのメンタルモデルを醸成したい

「MCP、気になるけど一人でやるにはちょっとハードルが高そう……」デザイナーの多くが一度は感じた共通認識がこれだと思います。「MCPって何？」「生成AIとUIってどうつながるの？」といった得体の知れなさが及び腰の理由な気がします。2025年6月時点では、まだまだ新しい技術であり、いずれデザインプロセスに"定番"として組み込まれる予感だけがある状態です。

そこで、「みんなで手を動かして、まずは"何ができるか"を体感してみよう！」と、FigmaMCPに興味のあるデザイナーが集まり、ハンズオンを開催することにしました。

1時間でゼロベースから環境設定を行い、CursorでAIコーディング環境を構築し、FigmaMCPと連携し、Figma上のデザインを実装するところまでを体験する内容です。

以下にハンズオンの開催概要とアンケート結果からみえそうなことをまとめました。

ハンズオン「Figma×MCP×CursorでUI実装体験」概要

参加人数と体制

参加人数：デザイナー中心に22名（3回に分散開催）
- UIUXデザイナー19名、リサーチャー1名、サービスデザイナー1名、フロントエンドエンジニア1名
所要時間：1時間
運営体制：ファシリ1名（デザイナー）、ハンズオンサポート（エンジニア計3名）

目的・ゴール

自分の手を動かすことで、生成AIとデザインのメンタルモデルを構築すること
AIとUIの関係性を理解し、トレンド記事のキャッチアップや、技術記事の事例を実際に試せるようになること
参加者全員のクリアを目指すが、一人でも完了できたらハンズオンは成功とすること
参加者が「なんとなく概要が分かったので、あとは自分で進められそう」と感じられること

特徴

実践的なハンズオン形式で、参加者が実際に手を動かしながら学べる内容
Cursor（AIエディター）を活用したAIコーディングを体験
FigmaのMCP（Model Context Protocol）との連携に焦点を当てる
初学者から経験者まで幅広いレベルの参加者を想定し、手順通りに進めるルートとAIチャットのみで進めるルートを用意
Reactスターターキットや、つまずきやすいポイントをチェックできる流れ
エンジニアによるサポート体制があり、個別対応も実施。

内容

導入：目的・ゴール、用語の定義（AIコーディング、Cursor、MCPとUIの関係性）を解説。
環境設定（ハンズオン）：
- PCセットアップ（Git、Node.js、npmのインストール）
- Cursorのセットアップ（インストール、起動、プライバシーモード設定など）
- Reactベースの開発プロジェクト作成（スターターキットの使用）
- CursorでのAIチャット動作確認
- FigmaとMCPの設定
- Figma上のデザインをCursorで実装する体験
質疑応答・交流：感想の共有やトラブルシューティング
その他：アンケートの実施。

ハンズオンの成果

参加デザイナーを中心に22名全員がCursorでAIコーディング（Reactベース）を試せる環境を整えることができました🙌
22名全員がCursor上でFigmaMCPとFigmaの連携設定を完了
過半数の参加者が、実際にFigma上のデザインを実装し、ローカルホストでブラウザプレビューまで到達
その後、ご自身で試行錯誤しながらブラッシュアップを進める方も多く、目的は達成できたといえそう

参加者アンケート結果

回答数：15件（回答率 68.2%）

満足度と理解度、「自分でもできそうか」の感覚（5段階評価）

今日のハンズオンの満足度：平均4.8点（中央値5点）
内容の理解度：平均4.1点（中央値4点）
「自分でもできそう」という感覚：平均4.0点（中央値4点）

特記事項

多くの参加者から、特に環境設定においてサポートがあったことを高く評価
「自分でもできそう」の評価が3点以下だった理由は、「エラーへの対応」「コーディング知識の不足」「補助の方がいないと難しい」などが挙げられる
次にやってみたいテーマとして、「MCPを使ったプロトタイピング体験」「AIエージェントとUIの共同設計」「デザイナー向けのAIツール比較と活用術」などが多く上がった

アンケート結果から見えたこと

CUIやフロントエンド初学者の方が満足度が高い傾向にある
- デザイナーとの連携に長けたエンジニアによる丁寧なサポート体制が大きな助けに。今後この手法を取り入れる際は、エンジニアとデザイナーの相互サポート体制があると良さそう。
理解度は、一定のCUIやフロントエンド知識がある方が高い傾向にある
- デザイナーの志向性によってAI×UIの進み方が異なり、必要な知識も変わってくると考えられそう

ハンズオン実施にあたり「難しかったポイント」とその乗り越え方

難しかったポイント①――「そもそも環境設定の難易度が高い…！」
- 今回、多くの参加者から、特に環境設定においてサポートがあったことを高く評価いただきましたが、環境設定にあたり、ターミナル操作（通称：黒い画面）での設定やローカル環境の構築に慣れておらず、ここで心が折れてしまうケースも多いだろうな、と感じました。
- 今回はこれらを想定して、Reactベースのスターターキットを用意した上でエンジニアに協力いただき、1on1でサポートしてもらえる体制を構築し、乗り越えました。
難しかったポイント②――「エラーの対応」「コーディング知識不足」
- 特にコーディングの経験が浅いメンバーにとっては、エラーの対応やコーディング知識が不足していることから、補助がないと難しい！といった声が上がっていました。実際にエラーが出ると、何が間違っているのかどうすれば正解なのかが判断しにくく、独力ではそこから先に進めることが難しいケースも散見されました。
- 今回は、つまずきポイントごとにSTEPを分け、よくあるエラーの事例と完了状態のスクリーンショットを添えて判断がしやすいように工夫し乗り越えましたが、ハンズオンではこの辺りまでケアすることが必要だと感じました。また参加者の積極的な協力も大きく、「私はこういうエラーコメントでました！この操作したら解消しました！」と一緒に乗り越えようといてくださって、なにより心強かったです

ハンズオン実施で気をつけたこと

20名を超える大所帯のため、時間対効果を高めること（当初は4～5名の予定でした）
- ハンズオン後も自分で試せる環境作りを重視
β版FigmaMCPや不安定な先端技術を扱うため、社内水準のセキュリティ観点を再確認
一緒に学んでいくスタイルで、CUIやフロントエンド知識が少なくても大丈夫なように工夫
- 置いてきぼりを作らないため、エンジニアにご協力いただき1on1サポート体制を整備
- つまずきポイントごとにSTEPを分け、エラーの切り分けがしやすい流れに

おわり

MCPという技術を通じて設計意図を構造化することで、デザインのSSoT（Single Source of Truth）実現や、コードベースの新しいデザインプロセスに希望を感じています。「仕様書の"最新の正"はどれ？」「Figmaのマスターデータ維持が大変」「ビジュアルのプロトタイプだけでは角丸やドロップシャドウが実装で毎回見落とされる」。そんな悩みも、新しいプロセスとともに一気に解消できるかもしれません。

ただ、ここ最近は本当に変化が激しく、今キャッチアップしている最新技術も、あっという間に陳腐化してしまいます。だからこそ「わからなくても使える」ある種のブラックボックス化が進みますが、逆に言えば中身を学ぶチャンスは今しかありません。

私が所属するテクノロジー統括では、今期「No.1 Tech組織」を掲げ、今起きてるパラダイムシフトのなかで全員が試行錯誤の最中です。今すぐ気軽に試せて、「自分もこれはできそう」と感じられる、そんな場作りの一助になれるといいなとおもいました。