Figma MCP Server Session
2日目に開催したこちらのセッションでは、Figma MCPサーバーの機能とAIを活用した開発の可能性をデモンストレーションを交えて紹介しました。
Figma MCPサーバーは、Figmaのデザインファイルの情報をAIエージェントが理解できる形で提供する仕組みです。
数年前に登場した生成AIは、コードを書くことはできても、その組織やプロジェクトが蓄積してきた既存のコードを参照して記法を揃えたり、運用中のデータベースに接続させたりすることは苦手でした。その後、CursorやClaude Code、GitHub CopilotなどのAIコーディングツールが登場し、まるで人間のエンジニアのようにコードを書けるようになっています。
しかし、デザイン面はまだ十分ではありませんでした。MCPサーバーがない場合、デザイナーが作ったデザインデータの色やフォント、サイズやレイアウトなどの情報を、人が解釈して数値化したり、AIに画像解析させたりする必要がありました。多くの場合、人の手での微調整が必要になりがちです。
Figma MCPサーバーを使うことで、Figma DesignやFigJamのデータを正確な形でAIエージェントに渡すことができます。これは例えて言うなら、プリントアウトされた紙を見ながらWebデザインを再現して修正するのではなく、HTMLファイルなどのデータを直接触りながら作業することに似ています。
APIを活用した非公式なMCPサーバーは以前から存在していましたが、2025年6月からはFigma公式のMCPサーバーを提供開始しています。
プロトタイプと実装をつなぐ新しいワークフロー
Figma Makeがプロトタイプを作成する場面で活用するのに対し、Figma MCPサーバーの役割はプロダクト実装の段階にあります。
デザイナーがFigma Makeでプロトタイプを作成し、そのFigmaファイルのURLをAIエージェントに渡すことで、AIはデザインの詳細を理解して製品レベルのコードを生成することができます。
今回のイベントでは、ハンズオン形式でMCPサーバーを活用し、デザインの実装をAIに体験してもらう基本的なワークショップを行いました。
Speed Make
Speed Makeは、20分という短い時間でFigma Makeを実際に利用し、テキストプロンプトからアイデアを実行に移すタイムアタック形式のハッカソンです。参加者が作成したプロトタイプは実に多様でした。
物理演算エンジンを使った「絵画泥棒ゲーム」のような遊び心のあるものから、カメラAPIを使用してリアルタイムにエフェクトをかける「Fullscreen Camera App」など、幅広い作品が生まれました。
「絵画泥棒ゲーム」
「Fullscreen Camera App」
また、水分補給と休憩を促す「Hydration and Break Reminder App」のような、アプリやWebサイトのプロトタイプも多数作成されました。
「Hydration and Break Reminder App」
印象的だったのは、多くの参加者が20分という短時間でなにかしらの完成形に到達していたことです。プロダクト開発にあまり携わっていない方でもプロトタイプを作成できたことには、大きな可能性を感じます。また、高度な技術を駆使した作例も出てきたことから、プロダクト開発の実務にFigma Makeがつながるイメージを肌で感じることができました。
プロダクト開発者にとってのFigma Make
2日間の「Figma Make Cafe」を通じてあらためて感じたのは、Figma Makeがプロダクト開発のスピードと可能性を大きく広げるツールだということです。重要なのは、「AIに仕事が奪われる」のではなく「AIと協働して創造性を拡張する」という視点なのだと思います。
従来のプロダクト開発では数週間かかることもあったプロトタイプ作成が数十分で実現できるようになり、実装に進む前に何十個ものアイデアを検証することも可能になります。コーディングスキルのないプロダクトマネージャーやマーケターでも自分のアイデアを動く形で表現できる一方で、高度なスキルを持つデザイナーやエンジニアは、AIは業務効率をさらに向上させるパートナーとなるでしょう。Figma MCPサーバーとの組み合わせによって、プロトタイプで作成されたデザインを実装へ移行する作業も大幅に効率化されます。
現在、 Figmaのすべての利用プランとシートにAIクレジットが含まれており 、Figma Makeを使用できます。まずは手を動かして体験してみることが、その可能性を実感する最良の方法です。プロダクト開発に関わるすべての方に、ぜひFigma Makeを試していただきたいと思います。
フォトコーナー
