Figma AIでのFirst Draftの使用

はじめに

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

Figmaデザインでご利用いただけます。

有料プランでご利用いただけます。

編集可ファイルアクセス権が必要です。

FigmaのAI機能にアクセスできるユーザーについて詳しくはこちらをご覧ください。

First Draftを使用すると、わずか数分でアイデアを編集可能なワイヤーフレームやデザインに変換できます。幅広いデザインの可能性を素早く試すことができるため、最初に白紙状態で試行錯誤する労力を省くことができます。

仕組み

Figma AIは、デザイン生成の基盤として、Figmaで構築されたワイヤーフレームライブラリとデザインライブラリを使用します。

各ライブラリには、入力された説明に基づいてデザインをまとめるために使用される一連のビルディングブロック(またはコンポーネントのスタック)があります。

ライブラリは、Webサイトやモバイルアプリの一般的なデザインパターンと一致するデザインの生成に優れています。しかし、これらのデザインフレームワークの外部からコンセプトを生成すると、問題が発生する可能性があります。

通常、次のプロンプトは優れた結果を生み出します。

• BBQを販売する店舗の決済ページ
• ペットフードのフードデリバリーアプリ
• コンテンツ戦略コンサルタント向けのマーケティングWebサイト

Figma AIは、Webサイトやモバイルアプリにおいて一般的なデザインパターンを使用していないため、次のプロンプトでは対応が難しい場合があります。

• 小説のレイアウト
• 誕生会の招待状
• 魚の形をしたチラシ

デザインを生成したら、別のプロンプトまたはスタイルのコレクションを使用してデザインを変更できます。

最初のドラフトの作成

1. ツールバーの[アクション]をクリックします。
2. [First Draft]を選択します。
3. 必要に応じて[ライブラリ]をクリックし、Webサイトやモバイルアプリのワイヤーフレームを作成したり、基本デザインを作成したりできます。ライブラリを選択しない場合、Figma AIはプロンプトに最適なものを選択します。
4. 「デベロッパーツールの起動時に表示される料金ページ」のようなプロンプトを入力するか、表示される提案のいずれかをクリックします。
5. [作成]をクリックします。
6. プロンプトの下のサムネイルをクリックして、さまざまなテーマをプレビューします。
7. デザインに問題がなければ、アクションメニューを閉じます。さらに絞り込みたい場合は、[変更を適用]をクリックしてください。

デザインの変更

[変更を適用]をクリックすると、次の2つのオプションでデザインを変更できます。

• プロンプトを使用して変更内容を説明する
• スタイルコントロールを使用して、色、タイポグラフィ、間隔、およびボーダーの半径をカスタマイズする

単一のデザインに変更を加えながら、各オプションを切り替えることができます。

プロンプトを使用したデザインのカスタマイズ

プロンプトを使用すると、デザインのテーマ、コンテンツ、または構造を変更できます。変更例は以下のとおりです。

テーマ

• スイカのテーマを使用する
• さまざまな配色を試す
• もっと鮮やかにする

コンテンツ

• 設定アイコンを歯車に変更する
• ポッドキャストではなくオーディオブックにしよう
• お客様の声セクションのお客様の名前を変更する

構造

• [ランキング上位]の下に[ドイツのトレンド]という別のセクションを追加する
• [注目]セクションをナビゲーションバーの下に移動する

スタイルコントロールを使用したテーマのカスタマイズ

スタイルコントロールを使用してテーマを調整すると、デザインの色、ボーダー半径、間隔、およびタイポグラフィをコントロールできます。

色

またはをクリックして、ライトモードとダークモードを切り替えます。プリセット色の1つを選択するか、カラーホイールをクリックして独自の色を選択することで、テーマに新しい色を適用することもできます。

ボーダー半径

スライダーをドラッグして、対象のオブジェクトのボーダー半径を増減します。

間隔

スライダーをドラッグして、アイテム間の間隔を拡大または縮小します。

文字のスタイル

[タイトル]、[本文]、または[ラベル]をクリックして、変更するテキストエレメントのグループを選択し、新しいフォントをクリックして、デザインでプレビューします。