プロンプトにデザインと画像を添付する

はじめに

この機能を使用できるユーザー

Figma Makeは有料プランのフルシートでご利用いただけます。

他のシートやプランでもFigma Makeをお試しいただけます。

Figma Makeを使用して機能的なプロトタイプ、Webアプリ、インタラクティブなUIを作成する際、プロンプトにデザインや画像を添付することで、満足のいく結果を得られるよう、AIを支援できます。

1つのプロンプトに添付できるファイルは3つまでですが、ファイル内でデザインと画像を自由に組み合わせることができます。

デザインを添付する

会話のプロンプトにデザインを添付すると、Figma Makeで使用されるAIモデルがデザインを解釈し、レイヤーとコンテンツを機能的なコードに変換することができます。結果では、テキストや画像を含めたデザインをできる限り忠実に再現し、お客様の指示やその他の添付ファイルも尊重します。

Figmaデザインをプロンプトに添付する方法は2つあります。

• プロンプトボックスで、[+]をクリックし、[Figmaからのインポート]を選択して、添付したいデザイン、コンポーネント、またはコミュニティファイルを検索します。

• Figmaデザインファイルからデザインをコピーして、プロンプトボックスに貼り付けます。

デザインを検索する

Makeを作成または編集し、[Figmaからのインポート]をクリックすると、[デザインの添付]モーダルが表示されます。[デザインの添付]モーダルでは、チームや組織のプロジェクト内のコンポーネントやフレームを検索することができます。

デザインやコミュニティコンテンツを見つけるには、検索ボックスに入力してください。

[デザインの添付]モーダルの検索ボックスは、ビジュアル検索もサポートしています。ビジュアル検索を使用するには、検索ボックス内の[ビジュアル検索]をクリックし、ガイドとして使用する画像を選択してください。

検索語に合うコンポーネントやその他のデザインを参照するには、[さらに表示]をクリックします。

コンポーネントを選択した場合は、以下をクリックできます。

• [挿入]: プロンプトボックスを直接追加します。
• [メインコンポーネントに移動]: 元のデザインファイルを新しいタブで開きます。

[その他のデザイン]でデザインを選択すると、以下をクリックできます。

• [デザインを添付]: デザインをプロンプトボックスに追加します。
• [ファイルを開く]: 元のデザインファイルを新しいタブで開きます。
• [プレビュー]: デザインのプレビュー(大)を表示します。

組織に所属している場合、リソースとして承認され、デフォルトで有効になっているライブラリが検索に表示されます。

また、[コミュニティ]をクリックして、検索語に一致するFigmaコミュニティのデザインを閲覧することもできます。

組織内の[他のデザイン]と同様、コミュニティデザインを選択すると、以下のいずれかをクリックできます。

• [デザインを添付]: デザインをプロンプトボックスに追加します。
• [コミュニティで開く]: 新しいタブでコミュニティのリストを開きます。
• [プレビュー]: デザインのプレビュー(大)を表示します。

画像を添付する

機能的なプロトタイプやWebアプリを生成する際に、画像を提供してモデルをガイドすることができます。モデルはあなたの画像を正確に再現することはできません。モデルが進む方向性の提案とお考えください。モデルは画像内のテキスト、色、要素の位置をできる限り再現しようとしますが、結果が画像と異なることがあります。

プロンプトに画像を添付する方法は2つあります。

• プロンプトボックスで、[+] をクリックし、[画像をアップロード]をクリックして、システムのファイルブラウザから画像を選択します。

• 画像をプロンプトボックスにコピーして貼り付けます。

添付ファイルを活用するためのベストプラクティス

プロンプトに画像やデザインを添付する際には、以下のベストプラクティスに従ってください。

一般的なベストプラクティス

• デザインでは可能な限りオートレイアウトを使用する: デザインやコンポーネントを添付するとき、システムはオートレイアウトを使用してコンテンツのフローを理解します。
• レイアウトの後で機能性にフォーカスする: システムに希望するレイアウトを指示し、その後のプロンプトを使用してそのレイアウトに機能を追加します。
• 段階的に作業を進める: 望む結果を細かくシステムに説明するのではなく、大まかに説明することから始めましょう。その後、作業を進める中で、より細かい情報と機能を追加し続けます。より複雑なデザインのコンポーネントや画像を添付する際には、一度にすべてを添付するのではなく、フレームごとに添付してください。
• 結果を反復する: 機能的なプロトタイプやWebアプリが複雑な場合、すべての要件を満たすには、会話の中でいくつかのステップが必要になるでしょう。システムの機能に誤りがある場合は、遠慮なくお知らせください。その際、望ましい結果の例を挙げてください。
• 最良の結果をもたらすのは共通のデザイン要素とレイアウト: たとえば、単一のプライマリフレームを使用するシンプルなギャラリーやWebアプリは、類似のデザインアプローチの中で効果的に機能します。より複雑または新しいレイアウトには、追加のプロンプトが必要になることがあります。
• デスクトップと全画面表示に適した結果にフォーカスする: モバイルでの表示の改善に取り組んでおりますが、現時点では全画面表示に適したコンテンツが最も効果的です。

1つの添付ファイル

個々の添付ファイルを操作する際には、以下のベストプラクティスに従ってください。

• 完全に1:1のビルドを指定するかスタイルとして参照する: プロンプトで、添付ファイルを完全に1対1でビルドするか、スタイルのインスピレーション/参考として使用するかをシステムに伝えます。
• ビルドの各セクションに詳細を追加する: 最も近い1:1のビルドでは、必要なものをより正確に指定できます。デザインでセクションごとに試してみてください。より詳細なプロンプトの作成をモデルに依頼することも可能です。

複数の添付ファイル

複数の添付ファイルを扱う際には、以下のベストプラクティスに従うことをお勧めします。

• 画面ごとにビルドする: 複数のデザインや画像を添付することも可能ではありますが、1対1の最良の結果を得るには、一度に添付するデザインを1つか2つに絞って構築してみてください。注: システムは添付内容を記憶しますので、最初にうまくいかなかった場合は、添付内容を再度確認して、もう一度お試してください。
• 複数の画面でスタイルを参照する: 複数のデザインや画像を添付して、好みのスタイルで構築することができます。ただし、画像をインスピレーションとして使用し、1:1で再構築しないようにシステムに指定することを忘れないでください。

問題の解決

発生した問題を修正または回避しようとする際には、以下のベストプラクティスに従うことをお勧めします。

• デザインを小さくする: デザインが忠実に再現されていない場合は、より正確なビルドに向けて添付内容を小さくしてみてください。
• 画像を減らし、コンテンツが豊富でないデザインを試す: 多くの画像、SVG、またはベクターイラストを含むデザインを添付する場合、システムが正常に動作しないことがあります。画像の忠実度やサイズを抑えるか、コンテンツが少ない添付ファイルを使用してください。