グリッドオートレイアウトフローを使用する
🚧 オートレイアウトのグリッドフローは現在オープンベータ版です。一部の機能や設定は、まだグリッドで利用できない場合があります。この機能はベータ期間中に変更される可能性があり、バグやパフォーマンスの問題が発生する場合があります。
グリッドは、フレームに適用できる3つのオートレイアウトフローの1つです。レイヤーやアセットを配置できる行と列に編成された「セル」で構成されています。オブジェクトは複数のセルにまたがることができ、グリッドを使用するフレームのサイズが変更されると、これらのセルのオブジェクトはそれに応じて反応します。
グリッドオートレイアウトフローは、Bentoボックス、ダッシュボード、編集レイアウトなどのデザインを作成するのに理想的です。
この記事では、オートレイアウトの作業における1つの側面のみ説明しています。Figmaデザインでオートレイアウトを操作する方法について詳しくは、他の記事を参照してください。
- オートレイアウトガイド: オートレイアウトの概要、仕組み、主要なプロパティ、およびオートレイアウトリソースのコレクションを参照してください。
- デザインのオートレイアウトを切り替える: フレームとレイヤーにオートレイアウトを追加して、レスポンシブなデザインを作成する方法を学びましょう。
- オートレイアウトで水平フローまたは垂直フローを使用する: オートレイアウトの水平フローと垂直フローで利用可能なプロパティについて学びましょう。
- 多次元オートレイアウトフローを作成する: 複数のオートレイアウトフローを組み合わせて、完全にレスポンシブなコンポーネントと画面を構築しましょう。
用語
- セル: グリッドの列と行の交差点
- セルレイヤー、またはセルオブジェクト: セル内に存在するレイヤーまたはオブジェクト。これらはグリッド内に存在する子と見なされます。
- 子レイヤー: コンテナ内に存在するレイヤー
- コンテナ: 他のレイヤーを保持できる構造（セルなど）またはレイヤー（フレームやコンポーネントなど）。
- ネスト: コンテナ内に存在するレイヤーを説明します。
- 親: 他のレイヤーを含むレイヤー (フレーム、コンポーネント、グループ、セクション)
- スパン: セルオブジェクトが複数のセルを同時に占有する機能
- 最上位レベル: キャンバスに直接配置され、親を持たないレイヤーを説明します。
- トラック: 個々の行または列
列と行
グリッドオートレイアウトフローは、行と列という2次元のレイアウト制御をデザインに導入します。フレームでグリッドを有効にした後、右サイドバーのグリッドピッカーをクリックすると、希望する行数と列数を選択できます。列数フィールドと行数フィールドに値を入力するか、インタラクティブセレクターを使用します。
注: グリッドの行または列の数を減らす場合、まずその行または列が空であることを確認する必要があります。
列と行のサイズ変更
各列と行のサイズは「自動」に設定され、他の間隔値と列または行のサイズを考慮した後の残りのスペース量に基づいて計算されます。
トラック（列または行）のサイズ変更を行うには、
- フレームを選択します。
- フレームの上部または左側にカーソルを合わせます。目的のトラックにカーソルを合わせるか、目的のトラックからアイテムを選択すると、青色の点が表示されます。
- 青色の点の上にポインターを合わせ、表示されるトラックサイズを示すラベルをクリックします。
- そこから、以下の方法でトラックのサイズを変更できます。
- 自動サイズ変更: 空きスペースに基づいてトラックを自動的にサイズ変更するには、自動 または A と入力し、Enter または Return を押します。
- 特定のサイズ: トラックの辺をクリックしてドラッグし、特定の値にサイズ変更します
間隔
間隔
間隔は列と行の間の距離を設定します。これは、グリッドオートレイアウトのフレームが選択されているときに、右側のサイドバーの行間の間隔と列間の間隔フィールドを使用して行います。フィールドに数値を入力するか、矢印キーを使用して値を調整するか、カーソルを使用してフィールドをスクラブします。
パディング
パディングは、オートレイアウトのフレームの境界とフレームのセルとの間の空白またはホワイトスペースを制御します。パディングを均一、垂直と水平に設定することも、上、右、下、左のパディングに異なる値を設定することもできます。
- デフォルト: パディングコントロールは、デフォルトで垂直（上下）と水平（左右）に分かれています。
- 個別のパディング: をクリックして、上、右、下、左のパディングフィールドを使用します。
-
パディングの統一またはCSSのショートハンド: ⌘ CommandまたはCtrlを押しながら、任意のパディングフィールドをクリックします。CSSのショートハンドを入力することもできます。
- 例: 1,2,3,4を入力すると、上: 1px、右: 2px、下: 3px、左: 4pxに設定されます
- 例: 1,2と入力すると、上下: 1px、左右: 2pxに設定されます。
ヒント: Tabキーを押すと、入力フィールド間を移動できます。
サイズ変更
注: サイズ変更プロパティについては、オートレイアウトのガイドの記事で詳しく説明しています。このセクションでは、グリッドオートレイアウトフローに特有の詳細を取り上げています。これらの詳細は、グリッドのベータ期間中に機能が開発されるとともんい変更される可能性があります。
サイズ変更オプションは、ネストされたグリッドオートレイアウトのフレームを含む、グリッドオートレイアウトのフレームのすべての子レイヤーで利用可能です。サイズ変更オプションは、グリッドを使用した上位レベルのオートレイアウトのフレームではご利用いただけません。オートレイアウトのフレームのネストの詳細についてはこちらをご覧ください。
次のサイズ変更プロパティが利用可能です。
- 固定幅または高さ: セルオブジェクトまたはネストされたグリッドのオートレイアウトのフレームの寸法は、親セルまたは親フレームのサイズにかかわらず、同じままです。
- コンテナに合わせて拡大: セルオブジェクトまたはネストされたグリッドフレームは、セルの幅または高さ、あるいは親フレームに合わせて拡大されます
グリッドセルのオブジェクトの作業
グリッドのオブジェクトの追加および移動
- シェイプ、フレーム、テキストレイヤーを作成: これらの要素をセルに直接作成します
- オブジェクトをグリッドに移動: 1つまたは複数のレイヤーをドラッグして、空のセルまたは2つのセルの間にドロップします
- 子オブジェクトの再配置: 1つまたは複数の子オブジェクトをドラッグして、空のセルまたは2つのセルの間にドロップします
- 既存のオブジェクトを複製: 1つまたは複数の子オブジェクトを選択し、キーボードショートカット（Macでは⌘ Command D、WindowsではCtrl D）を使用します。
オブジェクトは左から右、上から下の順に配置されます。空のセルが不足している場合、Figmaは妨げとなるオブジェクトを利用可能なセルに再配置するか、配置するために新しい行または列を作成します。
オブジェクトを複数のセルにスパンする
子オブジェクトをグリッドの複数のセルにスパンすると、親オブジェクトのサイズが変更された際に子オブジェクトもサイズ変更できます。
子オブジェクトをスパンするには、その子オブジェクトを選択してキャンバスでサイズ変更します。サイズ変更中に、オブジェクトがセルの辺にスナップすると、そのオートレイアウトサイズ変更プロパティは、調整されたサイズ（幅または高さ）のコンテナに合わせて拡大されます。
オブジェクトをセルに合わせて配置する
グリッドオートレイアウトのフレーム内では、子オブジェクトをセルに合わせて配置できます。
子オブジェクトを選択し、右サイドバーの[位置]セクションにある整列ボタンを使用します。
- 左揃え
- 水平方向の中央揃え
- 右揃え
- 上揃え
- 垂直方向の中央揃え
複数の子オブジェクトを選択した場合、各オブジェクトはそれぞれのセルに整列されます。
使ってみる
グリッドコミュニティファイルのコピーを入手して、実際に練習してみましょう。