ニーズや期待に合った機能的なプロトタイプやWebアプリをFigma Makeが作成できるよう、Guidelines.mdファイルにガイドラインを提供することができます。これには、コーディングやパーソナリティの観点からFigma Makeをどのように動作させたいか、およびスタイルコンテキストを使用する方法に関する説明が含まれます。
ガイドラインを追加する
ガイドラインファイルを開くには:
- Figma Makeの上部で[コード]をクリックします。
- コードエディタの左側にあるファイルエクスプローラーで、guidelines、Guidelines.mdの順にクリックします。
ガイドラインファイルの使用方法に関する指示、ベストプラクティス、および例は、ファイル自体に含まれています。便宜上、ファイルのコンテンツは以下のセクションで利用できます。
Guidelines.mdファイルのコンテンツ
システムガイドライン
このファイルを使用して、AIに従わせたいルールとガイドラインを提供してください。このテンプレートは、追加可能な項目の例をいくつか示しています。独自のセクションを追加し、ニーズに合わせてフォーマットすることができます。
ヒント: コンテキストが多いほど良いとは限りません。LLMを混乱させる可能性があります。あなたが必要としている最も重要なルールを追加してみてください。
# 一般的なガイドライン
AIに従わせたい一般的なルールを記載してください。
これには、以下のような例が考えられます。
* 絶対位置の指定は必要な場合にのみ使用してください。デフォルトでフレックスボックスとグリッドを使用する、レスポンシブで構造化されたレイアウトを選択してください。
* コードをきれいに保つために、コードをリファクタリングしてください。
* ファイルサイズを小さくし、ヘルパー関数とコンポーネントをそれぞれ独自のファイルに入れてください。
--------------
# デザインシステムのガイドライン
AIが生成物を貴社のデザインシステムに似せるためのルール
さらに、プロンプトボックスで使用するデザインシステムを選択すると、
デザインシステムのコンポーネント、トークン、バリアブルを参照できます。
これには、以下のような例が考えられます。
* ベースフォントサイズは14pxを使用してください。
* 日付は常に「6月10日」の形式にしてください。
* 下部のツールバーに表示する項目は4つまでにしてください。
* 下部のツールバーでフローティングアクションボタンを使用しないでください。
* チップは常に3つ以上のセットにしてください。
* 選択肢が2つ以下の場合はドロップダウンを使用しないでください。
サブセクションを作成し、より具体的な詳細を追加することもできます。
これには、以下のような例が考えられます。
## Button
The Button component is a fundamental interactive element in our design system, designed to trigger actions or navigate
users through the application. It provides visual feedback and clear affordances to enhance user experience.
### 使用状況
ボタンは、フォームの送信、選択の確認、またはプロセスの開始など、ユーザーが行う必要のある重要な
アクションに使用してください。インタラクティブ性が伝わる、明確でアクション指向のラベルを付ける必要があります。
### バリアント
* プライマリボタン
* 目的: セクションまたはページでの主要なアクションに使用されます。
* ビジュアルスタイル: 太字で、主要なブランドカラーで塗りつぶされています。
* 使用状況: セクションごとに1つのプライマリボタンを配置し、ユーザーを最も重要なアクションに導きます。
* セカンダリボタン
* 目的: 代替または補助的なアクションに使用されます。
* ビジュアルスタイル: 主要な色でアウトラインされ、背景は透明です。
* 使用状況: プライマリボタンの横に表示することで、重要度の低いアクションを示すことができます。
* ターシャリボタン
* 目的: 最も重要度の低いアクションに使用されます。
* ビジュアルスタイル: 境界線のないテキストのみで、プライマリカラーを使用します。
* 使用状況: 利用可能だが強調したくないアクションに使用します。