🗣️

Figma MCP × Cursor ハンズオン事例共有メモ

に公開
勉強会
idea

0. はじめに

先日、デザイナー向けの CursorとFigma Dev Mode MCPによるAIコーディング体験 をテーマとしたハンズオン事例共有の発表を聴講しました。

※本記事は発表内容の公式な記録ではなく、参加者としての理解・学びを整理した学習ログです。記載内容は個人の解釈を含みます。

この記事では、発表で紹介された内容や、自分がそこから得た気づきをまとめています。

1. デザイナーが直面する「しんどさ」

勉強会の冒頭では、デザイナーが抱えやすい 2つの課題 が紹介されました。
これはデザイナーでない自分にとっても理解できる部分が多く、共感できました。

孤独 → 不透明 → 焦りの連鎖

  • 手元で試すしかなく、課題や成果を周囲と共有しにくい
  • ツールや技術の進化が速すぎて、他の人の進捗が見えない
  • 前に進めないまま置いていかれる不安

社内統制のジレンマ

  • 新しい技術はセキュリティや管理が追いつきにくい
  • コンプライアンス意識が高いほど試しづらい
  • 上位プランでないと利用承認が下りない場合がある

2. Figma公式のMCPリリース

2025年6月、Figmaは公式に Dev Mode MCPサーバー のベータ提供を開始しました。

この仕組みによって、Figma上のデザインから コンポーネント・変数・スタイルといった設計情報 を含む文脈を直接外部ツールに渡すことができ、
Cursorなどのエディタでコード生成や実装補助につなげられるようになりました。

従来デザイナーがアクセスしにくかった「設計情報からコードへ」という橋渡しを支援する仕組みであり、今回のハンズオンでも活用されていました。

参考: Introducing our Dev Mode MCP server (Figma公式ブログ)

3. ハンズオン事例の内容

今回のハンズオンでは、Figma MCP × Cursorを活用した高速プロトタイピング体験 をテーマに進められていました。

目的

実際に手を動かして、生成AI × UI の構築を体験すること。

実施内容

  • 第1回／第2回：Figma MCPを用いた高速プロトタイピング
  • 第3回：デザインとドキュメントの連携体験

特徴（聴講して感じたこと）

  • スターターキットが用意され、環境構築のハードルが低い
  • デザイナーでもコードに触れやすい設計になっていた
  • 成果をその場で共有でき、学びが広がりやすい雰囲気があった

4. ハンズオン結果の共有

発表では、体験を通じて得られた成果とつまずきも紹介されていました。

成果

  • 参加者全員が「動いた！」という成功体験を得られた
  • デザインからコードまで一気通貫で試せた
  • 仕様書ベースのデザイン言語化も実現できた

つまずき

  • 環境設定で個別対応が必要な場面があった
  • 同じプロンプトでも出力結果に差が出ることがあった
  • β版ならではの不安定さ（昨日できたことが今日はできない、など）

5. 学びの整理

今回の聴講を通じて、自分が強く印象に残った学びは次の3点です。

  • 「できそう感」を共有する場の重要性
    → 孤独に試すよりも、仲間と一緒に進める方が安心感がある
  • まずサンドボックス環境で試せることの価値
    → 社内統制のジレンマを乗り越える大きなヒントになる
  • MCP × Cursorは「デザインと言語の橋渡し」
    → デザイナーがコードに触れるきっかけとして非常に有効

まとめ

このハンズオン事例共有を通じて、生成AIとUIを橋渡しするための具体的なアイデアに触れることができました。
自分が直接手を動かしたわけではなくても、発表を聴くことで「どのように学びの場を設計すればデザイナーもAIコーディングを体験できるのか」が理解できました。

デザインからコード、そしてドキュメントまでをつなぐこの仕組みは、今後さらに広がっていく可能性を感じます。

Discussion