株式会社CAENのロゴ

Figma Makeとは？AI駆動開発で業務レベルのUIを作る実践ガイド

この記事で分かること

Figma Make は、Figma が公式に提供しているAIデザイン機能です。自然言語（日本語OK）で「こういう画面を作って」と伝えるだけで、業務でそのまま使えるレベルのUIと動くプロトタイプが出てきます。

デザインができないエンジニアにとって、ついに本命が来た。

僕（大森翔吾）は1日で1ヶ月分のAIクレジットを溶かすほど使い倒しました。この記事では、Figma Make が何者で、どう使えば AI 駆動開発と噛み合うのかを初心者向けに整理します。

そもそも Figma とは

まず前提から。Figma は、いま世界で一番使われているUIデザインソフトです。ブラウザで動く、共同編集が強い、無料枠もある、という三拍子が揃っていて、Web/アプリのデザインはほぼ Figma がデファクトスタンダードになっています。

僕もずっと Figma を使っています。自分のプロダクトのUIはだいたいここで作ってきました。

その Figma の中に、2025年から Figma Make という新機能が追加されました。これが今回の主役です。

Figma Make が他のAIデザインツールと違う点

これまでも「AIでUIを作る」系のツールはいくつかありました。ただ、正直なところ 業務レベルに使えるか？ という観点で言うと、どれも「プロトタイプの域を出ない」というのが僕の感想でした。

Figma Make は、そこの壁を初めて越えてきた、というのが僕の結論です。ポイントは3つ。

1. 画像ではなく「動くもの」が出てくる

普通のAIデザインツールは、デザイン画像（静止画）を生成して終わります。

Figma Make は違います。ウェブサイト、あるいは簡易ウェブサービスとして動くものが出てきます。

  • この要素をタップしたら、別の画面に遷移する
  • ここを押したら、表示内容が切り替わる
  • データベース的なものとも連携できる

つまり「紙芝居」ではなく「実際に触れるアプリ」に近いものが、いきなり出力される。これは体験として別格です。

2. デザインのセンスが実用レベル

AIが作るUIって、正直ちょっと怪しいイメージがありますよね。配色が微妙、余白がズレてる、フォントが変、みたいな。

Figma Make が作るUIは、ゼロから自分で手直しする前提ではなく、7割くらい完成した状態から微調整で済むレベル感です。僕は「自分が頭の中で描いていたデザインの7割」を1発で具現化してもらえました。

デザイナーさんに発注したとき、初回の提案が70点で来るかどうか、みたいな話に近いです。そのくらい実務に使えます。

3. UX を「作りながら体感」できる

これが個人的に一番大きいポイントでした。

デザインって、画像だけ見ていても「このボタンを押した瞬間の気持ちよさ」とかって分からないんですよ。動かしてみないと分からない。

Figma Make は、画面遷移まで含めて動くプロトタイプを作ってくれるので、デザイン段階でユーザー体験そのものを体感しながら調整できます。「ここのタップのあと、1画面挟んだ方が親切かも」みたいな気付きがその場で出てきます。

実際に使ってみた感想（スマホアプリのUIデザイン）

僕はいま、あるスマホアプリのアイデアを温めていて、機能面のプロトタイプは AI 駆動開発でサクッと作れました。機能だけならすぐ形になるんです。

問題はデザイン。「なんかいい感じにしたいんだけど、いい感じが何か分からない」状態で止まっていました。

そこに Figma Make が登場したので、

  1. どういうアプリか
  2. どういう画面があるか
  3. どういう雰囲気のデザインにしたいか

を日本語で送りました。返ってきたUIを見て「これいいじゃん」と素直に思えたのは初めてです。そこから「この要素を中央に置いて」「ここの余白をもう少し広げて」と日本語で指示を重ねていくだけで、自分が欲しかったデザインに近づいていく。

気持ちよすぎて、1日で月3,000円分のAIクレジットを溶かしました。次に使えるのが来月1日、と言われて我に返った感じです。

料金と使用量の注意点（2026年4月時点）

Figma Make を使うには、Figma の有料プラン（最低で月20ドルのプラン）が必要です。

  • 為替や料金改定で変動するので、正確な最新情報は Figma 公式サイト を確認してください
  • AI クレジットには使用量の上限があり、使い切ると翌月リセットまで待つ仕組みです（日常的な検証なら足ります。がっつり回すと僕のように1日で溶かせます）
  • 使い放題ではなく、月ごとの利用上限がある点に注意

ちなみに僕は 放送大学の学生プラン で Figma を使えているので、Make 機能も学生向けの条件内で使えています。学生プランの条件は都度変わるので、こちらも公式の最新ポリシーを確認してください。

費用対効果で言うと、スマホアプリのデザインをデザイナーさんに1画面だけ依頼しても、月3,000円では絶対に済まないです。自分で7割作ってからプロに微調整を依頼する、みたいな組み方ができるだけで、発注規模が1桁変わります。

AI 駆動開発との最強の組み合わせ方

ここからが本題です。Figma Make は、AI 駆動開発と組み合わせると破壊力が跳ねます。

1. Figma → コード変換

Figma はもともとプログラミングとの親和性が高いツールで、デザインデータをコードに変換する機能があります。HTML/CSS や各種フレームワーク向けのコードが吐き出せる。Figma Make で作ったUIも、そのままこのパイプラインに乗ります。

2. Figma の MCP サーバー

さらに強力なのがこれ。MCP（Model Context Protocol） は、AIが外部のソフトを直接触れるようにする仕組みです（詳しくは別記事で解説しています）。

Figma にも公式の MCP が用意されていて、これを繋ぐと、AI 駆動開発ツール（僕は Codex CLI や Cursor を使っています）が Figma のデザインデータを勝手に見に行って、「なるほどこういうデザインなのね」と理解した上でコードを書いてくれる ようになります。

口頭で「このデザインを実装して」と言うだけで、AIがデザインデータを取得 → 構造を把握 → 実装、まで走る。これはもう体験として次元が違います。

3. 役割分担の整理

僕の中では、こう整理しました。

  • Figma Make：プロトタイプと、自分が欲しいUXを体感するまで。7割完成したら十分
  • Figma（通常モード）：Figma Make の結果を引き継いで、人間が手作業で微調整
  • AI 駆動開発ツール（Cursor / Codex）：Figma MCP でデザインを読み込ませて、実装に落とす

Figma Make の AI クレジットは有限なので、細かい調整にクレジットを溶かすのはもったいない。UXが固まるところまでで Figma Make は卒業して、あとは人間と別のAIに引き継ぐのが、いまの僕のベストです。

デザイン・コーディングの知識があるほど強い

使ってみて改めて感じたのは、「AI 駆動デザインも AI 駆動開発と同じで、自分の知識がゼロでも成立はする。けど、知識があればあるほど恩恵が跳ね上がる」ということ。

たとえば「画面中央にこの要素を置きたい」とAIに指示するとき、

  • 「position: absolute で中央に置いて、下の要素はその分余白を取って…」

みたいに、HTML/CSS の構造まで踏まえた指示ができると、ハリボテではなく、そのまま実装に流せるキレイなコード構造で出力されます。逆に、ふわっとした指示だと、見た目は合ってるのにコードは汚い、ということが起きます。

だから僕の結論はこう。

  • デザインやったことない人でも Figma Make は十分使える
  • デザインやったことある人はもっと使いこなせる
  • HTML/CSS 書ける人はさらにもう一段使いこなせる

AI 駆動開発の 基本スタンス と同じです。知識は「なくてもいい」けど「あれば爆発的に効く」。

こんな人に Figma Make を薦める

  • 個人開発者／副業で、デザイナーに発注するほどの予算はないがUIはちゃんとさせたい人
  • AI 駆動開発でサービスは作れるけど、UI デザインで毎回止まってしまう人
  • 既存のAIデザインツールを触って「業務には使えないな」と感じてきた人
  • Figma を既に使っている人（乗り換えコストがゼロ）

逆に、紙芝居レベルの雑なモックで十分な段階なら、無料で始められる AI 駆動開発スタック でそのまま実装まで行っちゃった方が早いケースもあります。

関連する記事

AI駆動開発のご相談・お仕事のご依頼

株式会社CAEN（代表：大森翔吾）では、Figma Make を含む AI デザイン × AI 駆動開発の導入支援、プロトタイプ〜実装までの一気通貫な開発、チーム向けの研修を承ります。

「デザイナーを雇う前に、まず Figma Make × AI 駆動開発で MVP を立ち上げたい」「Figma MCP を使った実装パイプラインを社内に組みたい」など、お気軽にご相談ください。