Figma MakeでAIを使ってデザインからコードへ
あなたが構築したいエクスペリエンスを描写しましょう。Figma Make は、あなたのデザインを動作する編集可能なコードに変換し、テスト・共有・改良ができる状態にします。
AIを使ってデザインから機能的なコードへ
自然言語を用いてコードを生成
フレームから始めて、欲しいものを記述しましょう。Figma Makeは、編集可能で機能的なコードを出力するため、モックアップからテスト可能なプロトタイプへより速く移行できます。
出力を編集してインスペクト
組み込みのコードエディターを使用して、デザインを動作させるコードをインスペクト、調整、拡張しましょう。
同じスペースでデザインと開発を行う
ツールを切り替えたり、最初から再構築したりする必要はありません。Figma Makeを使用すると、シームレスなワークフローでプロトタイプを作成し、コードを調整することができます。
プロトタイプを共有または公開
チームメイトだけと共有するか、すべてのユーザー向けに公開できます。
実際のチームによって構築されたものです。
メーカー、デザイナー、プロダクトマネージャーがFigma Makeを使用して、社内ツールから製品MVPまで、コード不要のWebアプリをどのように構築しているかをご覧ください。
- Jacques Debeuneure Jr.
- Daniela Muntyan
- kishoree04u
- Seungmee Lee
Figma MakeでAIを使ってプロトタイプを生成する方法
Figma Designでスクリーンを作成するか、既存のファイルからコピーしてください。
自然言語プロンプトを使用して、画面、構造、インタラクションを定義します。
Figma Makeは、テストおよび共有可能な、レスポンシブでインタラクティブなプロトタイプを生成します。
より多くのプロンプトを使用するか、デザインを直接調整しましょう。Figma Makeではすべてが編集可能です。
FAQ
デザインからコードへの変換ツールは、ビジュアルレイアウトを編集、テスト、またはエクスポート可能な機能的なコードに変換します。Figma MakeはAIを使用して、プロンプトから直接コードを生成します。
Figma MakeはAIとデザイン構造を組み合わせて、あなたが記述した内容に基づいてクリーンで編集可能なコードを生成します。開発者ハンドオフは必要ありません。
Figma Makeは、フロントエンドプロトタイプ用にHTML、CSS、およびJavaScriptを出力します。組み込みエディターでコードを直接表示および編集することができます。
いいえ。開始するにはプロンプトだけで十分です。より詳細な調整を望む場合は、生成されたコードをインスペクトして編集することができます。
スタータープランでFigma Makeを無料でお試しいただけます。高度な機能は有料プランでのみご利用いただけます。
はい、コードをエクスポートしたり、動作するプロトタイプを公開したり、ライブリンクを共有したりすることができます。
はい。Figma MakeはSupabaseの統合をサポートしているため、実際のデータをシミュレートし、ダイナミックな動作をテストすることができます。
Figmaの「デザイナーの今をデータで読み解く 2026」レポートによると、AIツールはデザインと開発の間で従来存在した境界を積極的に解決しており、PMや開発者がデザインプロセスに早期に参加し、デザイナーが作業コードに近づくようになっています。AIの使用を増やしたデザイナーの80%が、チーム間での協力をより効果的に行えると述べています。
データは質を向上させると言っています。Figmaの 「デザイナーの今をデータで読み解く 2026」レポートによると、AIの使用を増やしたデザイナーの91%が速度だけでなく質も向上すると述べています。