【2026最新】Figma Makeをプロ並みに使いこなしてアプリとコードを作成する方法

Vlad Solomakha

2026/06/28

ゼロからアプリを構築してコードをエクスポートする、Figma Makeチュートリアル！

移動

タイトル

AIを使用してUIデザインとワイヤーフレームを生成

デザインを生成する

AI PMが、Figma Makeを使ったアプリ試作、ハンドオフ用コード出力、そしてこのFigma App Makerの機能を最大限に活かす方法を伝授します！

Figma Makeとは？

Figma Makeは、Figmaが提供するAI搭載のプロンプトtoアプリツールです[1]。アイデアをテキストで説明するか、Figmaのフレームや画像を添付するだけで、わずか数分で機能的でインタラクティブなプロトタイプが生成されます。デザインのスキルもコーディングの知識も必要ありません。

Figma MakeはFigmaのエコシステム内で動作し、そのまま公開や引継ぎ（ハンドオフ）ができる本物のアプリコードを出力します。

無料でプロンプトtoプロトタイプを試す >

Figma Makeでアプリを構築するステップ

Figma Makeの使い方をデモするため、子ども向けのコーディング学習アプリをゼロから構築してみます。UIはDuolingoのインターフェースを参考にし、制作を爆速化するためにFigma Agentなどの他のFigma AI機能もプロ並みに活用します。

注意: このFigma Make AIチュートリアルはFigma Pro[2]を使用していますが、機能が制限されたFigma AIフリーミアムプランをお使いの場合でも、手順は全く同じです。

Figma Makeを開いてセットアップする

Figmaのダッシュボードを開くと、最上部にインタラクティブなプロンプト入力バーとしてFigma Makeのバナーが表示されます。そこから始めるか、「www.figma.com/make」に直接アクセスしてください。私は後者の方が好みです。

ここでは、アプリのアイデアを普通の言葉（英語推奨）で説明します。画像やUI参照、Design MDファイル、PRD、さらにはFigmaデザインフレームのリンクを追加することも可能です。面白いのは、アプリの原動力となるAIモデルをGemini、GPT、Claudeから選べる点です。今回はデザイン重視のモデル「Gemini 3.1 PRO」で進めます。

Gemini 3.1 PROでWebデザインする方法 >

テキストプロンプトを入力し、参照ファイルをアップロードする

プロンプトでは、単一の画面について説明することも、全体のフローを説明することもできます。スタイリングをAIに完全に任せることも、テキストやビジュアルの参考資料を提示することも可能です。本気で「バイブス・コーディング」をするなら、できる限り詳細に指示することをおすすめします。

まずは、今回のアプリ（名前は「Coddly」にします）の「Q&Aレベル」の画面用のプロンプトを用意し、参考にDuolingoの画面を数枚アップロードします：

"Build a kids' coding tutor app called Coddly. Start with a home/unit-map screen showing a learning path with locked and unlocked levels. Then a lesson screen with 2 question types: (1) select the correct image (out of 4) for a programming language description, (2) write a small line of code by tapping word chips. End with a level-complete celebration screen showing XP earned.

Use a playful, gamified UI inspired by the attached Duolingo UI. But make the color purple and yellow palette, rounded cards, mascot character, progress bar at top, bottom tab navigation."

リクエストの処理中、AIがバックグラウンドで思考するプロセスをリアルタイムで確認できます。タブを開いたままにしておけば、完了時に通知してくれます。Q&A画面の細かい内容までは指定しませんでしたが、文脈を汲み取って非常にうまく補完してくれました。

今回のプロンプト処理にかかった時間は約4分、消費したAIクレジットは54でした。出力されたのは、フローが繋がった4画面構成のインタラクティブなアプリで、デザインもほぼイメージ通りです。

手動編集とAIによる編集を組み合わせる

次に、ちゃんとしたマスコットキャラクターを配置し、「Unit 1」という文字を「Coddly」に変更して、これらを全画面のヘッダーに表示させたいと思います。ここで、Figma Makeの強力な「双方向編集」機能が役立ちます。

i) 手動でのポイント＆エディット（Point & Edit）

チャットバーの下にある「Manual Edit」オプションを選択します。編集したいテキスト要素をクリックして、直接文字を打ち替えるだけです。

Figma Makeでの手動編集はクレジットを一切消費しません。画面内のちょっとした修正に非常に便利です。

ii) AIにお願いして編集する

より複雑な編集や、複数画面にまたがる変更を一括で行う場合は、チャットボットに直接指示を出すのが最速です。

“最初の画面と最後の画面にある現在のロゴを、プロンプトに添付したマスコット画像に差し替えてください。また、すべての画面のヘッダーをホーム画面と同じものに統一してください。”

*補足: このマスコットキャラクターは、Figma Weaveのtext-to-vector（テキストからベクター変換）ツールを使って作成しました。

4分、90クレジットを消費して、リクエスト通り全4画面にマスコットがきれいに配置されました。

Lovableを使ってユニークなUIを生成する方法 >

プロンプトで新規画面を追加する

現在の画面に満足したら、次は「連続記録（Streak Log）」用の新画面を追加してみましょう。Figma App Makerに自然な言葉で依頼するだけで、既存の画面と同じデザインシステムとロジックを継承して作ってくれます。今回はDuolingoの参考画像は不要です。

“既存のアプリのデザインにあわせて「連続記録とチャレンジ（Streak Log and Challenges）」の画面を追加してください。ナビゲーションバーのターゲット（的）のアイコンからアクセスできるようにしてください。”

所要時間は2分、消費クレジットは56。完璧な仕上がりです。

手動で画面を一から構築するのと比べて、Figma Makeを使ったバイブス・コーディングが、骨組み（スキャフォールディング）や画面UIの作成、画面遷移の設定において、どれほど時間を節約できるか想像できるでしょう。

2026年最新バイブス・コーディングツール徹底比較 >

プレビューモードでインタラクションをテストする

最後に、バックエンドやAPIを接続してアプリをデプロイ・完成させる前に、Figma Makeのプレビュー上で動きを確認しましょう。右上にある再生アイコンをクリックするだけで、プレビュー用の別ウィンドウが開きます。

実際に確認してみたところ、アプリの挙動には大満足でした。全体のフローは完璧で、ボタンは機能し、Q&Aの正誤判定ステートも正しく連動し、マイクロアニメーションも楽しく動いています。当然ですが、このプレビュー表示にクレジットは消費されません。

また、プレビューの共有リンクを誰にでも送ることができます。さらに、Figma Makeヘッダーの「Publish」オプションから、実際にホスティングされたライブアプリとして公開することも可能です。

Figma Makeで作ったCoddlyアプリをプレビューする >

Figma Makeからコードへのエクスポート

Coddlyの5画面アプリが完成し、インタラクションのテストも完了したら、次は開発（本番環境）へのハンドオフです。Figma Makeでは2つの方法が用意されています。

1つ目は、コードビューに切り替えてダウンロードアイコンをクリックする方法です。これだけで、全コードが格納されたZipファイルが即座に手に入ります。中身はTailwind CSSとViteで構築された、構造化されたReact + TypeScriptプロジェクトです。各画面はコンポーネント（Home.tsx, Lesson.tsx, Celebration.tsx, StreakAndChallenges.tsx）として整理されています。さらに、BottomNavやHeaderといった共通パーツは自動でコンポーネント化されて切り出されており、画像もバンドルされ、ルーティングも設定済みです。そのままVS Codeにドラッグ＆ドロップすれば動きます。

2つ目の方法は、Figma Makeに内蔵されているGitHubやSupabaseとのIDE連携機能です。ブラウザから一歩も出ることなく、リポジトリへのプッシュや、本物のバックエンドのセットアップを直接行えます。

また、Figma MCPサーバーも用意されているため、Claude CodeやCursorといったAIコーディングエージェントがFigmaのファイルコンテキストを直接読み込むことができ、Figma内でのプロンプトからコードへの引き継ぎが格段に精密になります。

その他にも、アプリの構築中にプロダクトの仕様書や文脈を参照したい場合は、Figma Makeの各種コネクター経由でNotion、Slack、Monday.com、Marvin、Sprigなどとスマートに連携できます。

Figma-to-Code対応AIツール無料比較 >

Figma Makeを使いこなすためのヒント

Figma MakeアプリビルダーAIは、Figma AIツールキット全体と同様、非常に高速で素晴らしい実力を持っています。しかし、クレジットの消費が激しかったり、プロンプトの解釈ミス、平凡なアウトプットになることも珍しくありません。これらは現在のすべてのAIアプリビルダーに共通する課題ですが、私が試行錯誤の末に見つけた、Figma Makeを最大限に活かすコツを紹介します。

1回目のプロンプトは徹底的に具体的に書く: Makeは最初のステップで最も優れた成果を出します。必要な画面数、画面遷移のロジック、UIスタイル、カラーパレット、インタラクションなどを最初から詳しく説明してください。最初のプロンプトで多くの文脈を与えるほど、後から修正するために余計なクレジットを支払わずに済みます。

もしアイデアが固まっておらずブレストしたい場合は、セットアップ時に「Build」モードではなく「Plan」モードを使いましょう。

微修正には手動（Manual Edit）を使う: クリックして編集する手動操作は消費クレジットゼロです。AIへの指示は、新規画面の追加、レイアウトの大きな変更、ルーティングの設計などの構造的修正のために取っておきましょう。シンプルな文言変更に貴重なクレジットを使ってはいけません。

AIへの指示は、一度にひとつだけ: ひとつのプロンプトに複数の変更を詰め込みすぎると、処理が途中で漏れたり、指示が誤解される原因になります。「1ターンにつき明確な指示を1点だけ」に絞ることで、正確に指示が実行され、何があっても前の状態に戻しやすくなります。
コードタブからサクッと修正する: 色の間違いや余白（パディング）の微調整などは、AIに再指示するよりも、コードタブから直接書き換えてしまった方が圧倒的に早く済みます。
バイブス・コーディングの前に、バイブス・デザインという選択肢: Figma Makeが生成するデザインは、時に少し個性に欠けることがあります。より洗練されたデザインを、素早くかつ安価に手に入れるために、実装前のフェーズでは、まずはBanani AIで超速プロトタイピング（バイブス・デザイン）を行うことを強くおすすめします。

以下は、Bananiを用いて同じプロンプトから生成したアプリ画面のデザインです。

Bananiが創ったCoddyアプリのUIを見る＆編集する >

Figma Makeと他のFigma AIツールの併用

Figma Makeは、2026年時点におけるFigma AIエコシステムの一部にすぎません。他のAIツールと組み合わせることで、開発全体のワークフローをさらに加速できます。例えば、まずはFigma WeaveでUIパーツを生成し、次にFigmaのキャンバス上でFigma Agentを使ってレイアウトを組み立てます。デザインの方向性が決まったら、それらのフレームをFigma Makeに読み込ませてコードを生成し、バックエンドを接続します。そして完成したら、Figma Sitesを使ってワンクリックでライブWebページとして世界に公開できます。

とはいえ、このFigma AIスタックはまだ機能が発展途上のフェーズであり、クレジットの消費もかなり早いです。もし、デザインからコードへの変換に特化し、Figmaと深く統合されたAIをお探しなら、Banani AIも超おすすめです。

Design-to-Code AIを試す

無料

Figma Make AIに関するよくある質問（FAQ）

Figma MakeはどのAIモデルを使用していますか？

Figma Makeは、複数のモデルに対応しています（Claude Sonnet 4.6 & Opus、Gemini 3 Flash & 3.1 Pro、GPT-5.5）。生成を実行する前に、使いたいモデルを自由に選択できます。

Figma Makeが作成するコードの対応言語は？

Figma Makeは、Tailwind CSSでスタイリングされたReactおよびTypeScriptのコードを生成します。出力されるコードは標準的なViteベースのプロジェクトとなっており、コンポーネントファイル、ルート設計、スタイルシートがすべて含まれています。

Figma AIはどうやってデザインからコードを生成しているのですか？

Figma Makeは、ユーザーのプロンプトと添付されたすべてのビジュアル参照（画像やフレーム）を解析し、選択されたAIモデルを使用して、指示された通りのレイアウト、操作性、スタイルを再現するコンポーネント設計のコードを生成します。

Figma MakeとFigma Sitesの違いは何ですか？

Figma Makeは、プロンプトから実際に動作するWebアプリ（コード）を生成するツールで、主にコードを裏側に持ったインタラクティブなプロトタイプの構築向けです。一方、Figma Sitesは、Figmaで作成したデザインをそのまま、レスポンシブ対応のWebサイトとして直接パブリッシュ（公開）するためのツールです。