箇条書きリストと番号付きリストの作成
リストは、関連情報を整理して強調するための優れた方法です。Figmaのリスト項目は、番号付きリストで順序付けて表示することも、箇条書きリストで順序不同で表示することもできます。
現在、最大5レベルのインデントがサポートされています。
箇条書きリスト
箇条書きは、順序不同で情報セットを表示するために使用できます。Figmaの箇条書きリストでは、すべてのレベルのインデントで同じスタイルが維持されます。現時点では、箇条書きをカスタマイズすることはできません。
箇条書きリストの作成
- ツールバーで (テキストツール)を選択するか、Tキーを押します。
- テキストレイヤーで箇条書きリストを開始するには、いくつかの方法があります。
- MacまたはWindowsで、-または*を1つ入力し、続けてスペースを1つ入力します。
- 次のキーボードショートカットを入力します。
- Mac: ⌥ Option8
- Windows: Alt+0+1+4+9
- 右側のサイドバーにある[テキスト]のプロパティセクションで、をクリックして[タイプ設定]パネルを開きます。 [リストスタイル]プロパティから、 (箇条書きリスト)を選択します。
ヒント: ⌘ CommandShift8を使用すると、個々のテキスト選択範囲または複数のテキストレイヤーを箇条書きリストに変換できます。
番号付きリスト
番号付きリストは、順序付けされた情報または連続した情報のグループを表示するために使用できます。Figmaの番号付きリストでは、カウンターがインデントごとに数字、アルファベット、ローマ数字の間で切り替わります。
番号付きリストの作成
- ツールバーで (テキストツール)を選択するか、Tキーを押します。
- テキストレイヤー内から番号付きリストを開始するには、いくつかの方法があります。
- 以下の作成文字のいずれかを入力し、その後に
スペース
を1つ入力します。- 1.
- 1)
- 右側のサイドバーにある[テキスト]セクションでをクリックし、 (番号付きリスト)を選択します。
- 以下の作成文字のいずれかを入力し、その後に
ヒント: ⌘ CommandShift7を使用すると、個々のテキスト選択範囲または複数のテキストレイヤーを番号付きリストに変換できます。
リスト項目の書式設定
キーボードショートカットを使用すると、リストの自動スタイル設定が有効になることに注意してください。
リストのショートカットの直後に⌘ CommandZを使用すると、デフォルトのスタイルが削除されます。
インデント
Figmaの箇条書きリストと番号付きリストでは現在、5レベルのインデントがサポートされています。リスト項目のインデントを変更するには、次の手順に従います。
インデントを増やす
- Tab⌘ Command]またはControl + ]を使用して、行のインデントを増やします。
- Tabを押すと、インデントが再び増加します。
インデントを減らす
- カウンターを削除して同じレベルのインデントを維持するには、リスト項目の先頭でBackspaceまたはDeleteを使用します。
- 各行のインデントは個別に減らすことができます。
- インデントを減らすには、空のリスト項目でReturnまたはEnterを使用します。
間隔
リスト
リスト間隔を使用すると、箇条書きまたは番号付きリスト内の各項目間の間隔を制御できます。デフォルトでは、新しいリストの作成時および既存のテキストスタイルのリスト間隔は0
に設定されます。リスト間隔はピクセル(px)で表されます。
リスト項目の間隔を調整するには、次の手順に従います。
- リスト内のテキスト、またはリストテキストのみを含むテキストレイヤーを選択します。
- フィールドを使用して、リスト間隔フィールドにpx値を入力します。または、アイコンにカーソルを合わせ、ドラッグして値を減少(左)または増加(右)させます。
右側のサイドバーにある[テキスト]セクションでをクリックして、[タイプ設定]パネルからリスト間隔を調整することもできます。
段落
段落間隔を使用すると、段落間の間隔を制御できます。これにより、デザイン内のテキスト周囲の空白を増減させることができます。空白は、区別のしやすさと可読性を高めるだけでなく、閲覧者の注意を集中させるのにも役立ちます。
段落はピクセル(px)で表されます。段落間隔フィールドにpx値を入力します。または、アイコンにカーソルを合わせ、ドラッグして値を減少(左)または増加(右)させます。
注: EnterキーまたはReturnキーを使用すると、新しい段落が作成されます。テキストのサイズ変更が幅の自動調整に設定されている場合は注意してください。
引用符のぶら下げ
引用符のぶら下げを切り替えて、バウンディングボックスの外側にテキストレイヤーの引用符の開始記号をぶら下げます。
リストのぶら下げ
リストのぶら下げを切り替えて、バウンディングボックスの外側に各リスト項目のリストマーカーまたは数字ををぶら下げます。これにより、テキストコンテンツとバウンディングボックスの位置が揃います。
リストのスタイル設定
テキストの色
- リストの最初の項目の最初の文字によって、リスト内の箇条書きの色が決まります。
- 後に続く項目は、前の項目の色を引き継ぎます。
線
- 線のプロパティは、選択したテキストレイヤー全体に適用されます。
- テキストの太さへの変更は、それに関連付けられた箇条書きに適用されます。
エフェクト
- エフェクトは、選択したテキストレイヤー全体に適用されます。これには箇条書きリストやカウンターも含まれます。
ヒント: [タイプ]パネルから (リストなし)プロパティを選択すると、テキスト選択から現在のリストのスタイル設定が削除されます。