Figma Makeを使用すると、チャットインターフェースを使って、機能的なプロトタイプ、Webアプリ、インタラクティブなUIなどを作成できます。Figma MakeにはAIが搭載されており、例を共有したり、短い会話をするだけで、インタラクティブなプロトタイプを簡単に作成することができます。会話を続けることで、機能的なプロトタイプやWebアプリを編集または改善し、プレビューとコードを直接編集することができます。
ヒント: Figma Makeとその使用方法について詳しく知りたい場合は、「Figma Makeを探る」をご覧ください。
機能的なプロトタイプまたはWebアプリを作成する
Figma Makeを使用して機能的なプロトタイプ、Webアプリ、またはインタラクティブなUIを作成するには:
-
Figma Makeファイルを作成し、ファイルブラウザでドラフトに移動して、右上の[Make]をクリックします。
- AIチャットで、何を構築したいかをモデルを伝えます。以下を行うことで、AIをガイドできます。
- Figmaデザインを添付する
- Figma Designライブラリのいずれかからスタイルコンテキストを取り込む(有料プランのみ)
- データとシークレットを安全に保存および管理するためにバックエンドを追加する
- Figmaデザインからフレームや画像をチャットに直接貼り付ける
- プロンプトボックスにアイデアや指示を入力する
- [送信]をクリックします。
プロンプトを送信した後、Figma Makeは機能的なプロトタイプまたはWebアプリのコード生成を開始します。最終結果の複雑さに応じて、Figma Make がコードの生成を完了するまでに数分かかることがあります。
プロセスが完了すると、Figma Makeは変更の概要を返し、インタラクティブなプレビューが表示されます。
最初の結果の取得中に問題が発生した場合は、Figma Makeでのトラブルシューティングに関する推奨事項をご覧ください。
機能的なプロトタイプまたはWebアプリを編集する
既存の機能的なプロトタイプまたはWebアプリを編集するには、「機能的なプロトタイプまたはWebアプリを作成する」と同じ手順に従います。元の結果を反復して改善するために、既存の会話を続けます。また、元の結果の特定の部分をAIに変更してもらうこともできます。
機能的なプロトタイプまたはWebアプリを編集するには、以下の方法を使用します。
- [ポイントして編集]ツールを使用して、Figma Makeがポイントする機能的なプロトタイプまたはWebアプリの特定の部分を指定します。
- バージョン履歴を使用して、機能的なプロトタイプまたはWebアプリの過去のバージョンを編集します。
- Figmaデザインを添付する
- Figma Designライブラリのいずれかからスタイルコンテキストを取り込む(有料プランのみ)
- データとシークレットを安全に保存および管理するためにバックエンドを追加する
- Figmaデザインからフレームや画像をチャットに直接貼り付ける
- プロンプトボックスにアイデアや指示を入力する
別のプロンプトを送信するたびにプレビューが更新され、AIによって変更が加えられます。
アップデート中に問題が発生した場合は、Figma Makeでのトラブルシューティングに関する推奨事項をご覧ください。
ポイントして編集ツール
[ポイントして編集]ツールを使用すると、機能的なプロトタイプやWebアプリの要素をポイントすることができます。要素の種類や生成方法に応じて、色、パディング、マージン、テキストスタイルなど、さまざまなプロパティを変更することができます。また、その要素に直接変更を加えるようモデルに指示することも可能です。
[ポイントして編集]ツールを使用するには:
- プロンプトボックスの下部で、[ポイントして編集]をクリックします。
- プレビューで、変更したい要素をクリックします。
- ツールバーを使用して変更を行います。
- 必要に応じて、をクリックし、選択した要素に変更を加えるようモデルに指示します。
編集可能なプロパティは、選択した要素の種類によって異なります。一部の要素には、以下に説明するプロパティが混在していることがあります。
画像の編集
画像を編集する際には、以下の操作を行いことができます。
- 新しい画像をアップロードして既存の画像を置き換える
- ボーダー半径を変更する
- 画像の周囲の間隔(マージンとパディング)を変更する
- ソースコードに移動する
テキストの編集
テキストを含む要素(段落や見出しなど)を編集する際には、以下の操作を行うことができます。
- オープンソースのGoogleフォントを切り替える
- テキストの色を変更する
- テキストのサイズを調整する
- テキストを太字にする
- テキストを斜体にする
- テキストに下線を引く
- テキストの整列を調整する
- テキストの周囲の間隔(マージンとパディング)を変更する
- ソースコードに移動する
注: Figma Makeではカスタムフォントはサポートされていません。
コンテナの編集
divやsectionなどのコンテナ要素を編集する場合、以下の操作を行うことができます。
- 背景色を変更する
- ボーダー半径を変更する
- コンテナの間隔(マージンとパディング)を変更する
- ソースコードに移動する
編集のプロンプト
編集ツールで要素を選択すると、その要素に直接変更を加えるようモデルに指示することができます。要素に編集可能なプロパティがない場合、デフォルトでツールバーにプロンプトボックスが表示されます。それ以外の場合は、をクリックしてプロンプトボックスを表示できます。
バージョン履歴
AIチャットで会話する際、機能的なプロトタイプまたはWebアプリの各バージョンに対してチェックポイントが作成されます。AIチャットをスクロールして、機能的なプロトタイプまたはWebアプリの過去のバージョンを復元することができます。バージョン履歴を使用すると、機能的なプロトタイプやWebアプリの過去のバージョンで作業したい場合や、会話のステップ中に問題が発生した場合に役立ちます。
過去のバージョンを復元するには、[このバージョンを復元]をクリックします。
バージョンを復元しても、復元したバージョン以降の会話のステップやバージョンは失われません。これらのバージョンにはいつでも戻ることができます。
次のステップ
Figma Makeが機能的なプロトタイプ、Webアプリ、またはインタラクティブなUIのコード生成を完了すると、以下のことができます。
ベストプラクティス
Figma Make を使用する際のベストプラクティスを紹介します。一般的なベストプラクティスに加え、添付ファイルの操作や問題解決に関するベストプラクティスも含まれています。
一般的なベストプラクティス
Figma Makeのチャットコンポーザーを使用する際に役立つベストプラクティスをいくつかご紹介します。
-
明確で率直な指示を出す: AIチャットでプロンプトを作成する際には、求める最終結果を具体的に指定すると良いでしょう。望んでいることを具体的に示すことで、モデルによる推測が減り、意図しない機能を積極的に追加しようとする可能性が低くなります。
✅プロンプト:
以下の機能を含むノートアプリを構築してください。
- ファイルに名前を付ける
- テキストを追加して編集する
- 太字、斜体、取り消し線など、テキストの書式を設定する
- テキストへのリンクを追加する
- ファイルをマークダウン形式で保存する
⛔ プロンプト:
ノートを取ることができるアプリを作成してください。
-
例を使用する: AIチャットで指示を出す際は、最終結果として望む例を提供する必要があります。例を作成することも、Figma Designを使用して詳細なガイダンスを提供することもできます。モデルを希望に近づけるために画像を使用することもできますが、これにはいくつか制約があります。たとえば、モデルは画像から正確な色を抽出することができません。
✅ これらの方法は、個別に使用することも、1つのプロンプトで組み合わせて使用することもできます。
記述
ログイン画面を追加してください。ログイン画面に共通の要素を含めてください。たとえば、「メール」というラベルの付いたユーザー名フィールドと、「アカウントが必要ですか?こちらからご登録ください。」というラベルの付いたアカウント作成リンクを含める必要があります。
デザイン
添付されたデザインをショッピングカートの例として利用してください。
-
機密情報を提供しない: Figma MakeはアプリやインタラクティブなUIの作成に優れていますが、APIキー、メールアドレスや住所、個人データ、ID番号、その他の機密データをチャット作成機能に入力しないでください。代わりに、APIリクエストを行うアプリが必要な場合は、構築したい安全性や機密性の高い機能についてモデルに指示してください。Figma Makeは、データを処理するためのバックエンドを追加するのに役立ちます。
✅プロンプト:
プライベートAPIにリクエストを送信したいと考えています。キーを貼り付けることができる入力ボックスを追加してください。
⛔ プロンプト:
APIリクエストにはこのキーを使用してください: 11qYAYKxCrfVS_7TyWQHOg
添付ファイルの使い方
プロンプトに画像やデザインを添付する際には、以下のベストプラクティスに従ってください。
- デザインでは可能な限りオートレイアウトを使用する: デザインやコンポーネントを添付するとき、システムはオートレイアウトを使用してコンテンツのフローを理解します。
- レイアウトの後で機能性にフォーカスする: システムに希望するレイアウトを指示し、その後のプロンプトを使用してそのレイアウトに機能を追加します。
- 段階的に作業を進める: 望む結果を細かくシステムに説明するのではなく、大まかに説明することから始めましょう。その後、作業を進める中で、より細かい情報と機能を追加し続けます。より複雑なデザインのコンポーネントや画像を添付する際には、一度にすべてを添付するのではなく、フレームごとに添付してください。
- 結果を反復する: 機能的なプロトタイプやWebアプリが複雑な場合、すべての要件を満たすには、会話の中でいくつかのステップが必要になるでしょう。システムの機能に誤りがある場合は、遠慮なくお知らせください。その際、望ましい結果の例を挙げてください。
- 最良の結果をもたらすのは共通のデザイン要素とレイアウト: たとえば、単一のプライマリフレームを使用するシンプルなギャラリーやWebアプリは、類似のデザインアプローチの中で効果的に機能します。より複雑または新しいレイアウトには、追加のプロンプトが必要になることがあります。
- デスクトップと全画面表示に適した結果にフォーカスする: モバイルでの表示の改善に取り組んでおりますが、現時点では全画面表示に適したコンテンツが最も効果的です。
1つの添付ファイル
個々の添付ファイルを操作する際には、以下のベストプラクティスに従ってください。
- 完全に1:1のビルドを指定するかスタイルとして参照する:プロンプトで、添付ファイルを完全に1対1でビルドするか、スタイルのインスピレーション/参考として使用するかをシステムに伝えます。
- ビルドの各セクションに詳細を追加する: 最も近い1:1のビルドでは、必要なものをより正確に指定できます。デザインでセクションごとに試してみてください。より詳細なプロンプトの作成をモデルに依頼することも可能です。
複数の添付ファイル
複数の添付ファイルを扱う際には、以下のベストプラクティスに従うことをお勧めします。
- 画面ごとにビルドする: 複数のデザインや画像を添付することも可能ではありますが、1対1の最良の結果を得るには、一度に添付するデザインを1つか2つに絞って構築してみてください。注: システムは添付内容を記憶しますので、最初にうまくいかなかった場合は、添付内容を再度確認して、もう一度お試してください。
- 複数の画面でスタイルを参照する: 複数のデザインや画像を添付して、好みのスタイルで構築することができます。ただし、画像をインスピレーションとして使用し、1:1で再構築しないようにシステムに指定することを忘れないでください。
問題の解決
発生した問題を修正または回避しようとする際には、以下のベストプラクティスに従うことをお勧めします。
- デザインを小さくする: デザインが忠実に再現されていない場合は、より正確なビルドに向けて添付内容を小さくしてみてください。
- 画像を減らし、コンテンツが豊富でないデザインを試す: 画像、SVG、ベクターイラストが多いデザインを添付すると、システムでの処理に時間がかかることがあります。画像の忠実度やサイズを抑えるか、コンテンツが少ない添付ファイルを使用してください。