ステップ1. フレームから始める

Figma Designでスクリーンを作成するか、既存のファイルからコピーしてください。

ステップ2. プロトタイプを描写する

自然言語プロンプトを使用して、画面、構造、インタラクションを定義します。

Figma Makeは、テストおよび共有可能な、レスポンシブでインタラクティブなプロトタイプを生成します。

より多くのプロンプトを使用するか、デザインを直接調整しましょう。Figma Makeではすべてが編集可能です。

あなたが構築したいエクスペリエンスを描写しましょう。Figma Make は、あなたのデザインを動作する編集可能なコードに変換し、テスト・共有・改良ができる状態にします。

フレームから始めて、欲しいものを記述しましょう。Figma Makeは、編集可能で機能的なコードを出力するため、モックアップからテスト可能なプロトタイプへより速く移行できます。

組み込みのコードエディターを使用して、デザインを動作させるコードをインスペクト、調整、拡張しましょう。

ツールを切り替えたり、最初から再構築したりする必要はありません。Figma Makeを使用すると、シームレスなワークフローでプロトタイプを作成し、コードを調整することができます。

チームメイトだけと共有するか、すべてのユーザー向けに公開できます。

メーカー、デザイナー、プロダクトマネージャーがFigma Makeを使用して、社内ツールから製品MVPまで、コード不要のWebアプリをどのように構築しているかをご覧ください。