【Figma config 2022】進化したAuto Layout機能でより自由なデザインを！｜使い方を徹底解説
原文：https://help.figma.com/hc/en-us/articles/360040451373
チュートリアル：https://www.figma.com/community/file/784448220678228461
YouTube：https://www.youtube.com/watch?v=floQKLsWAy4&t=322s
本記事は2022年5月10日に公開されたFigma config 2022に関する情報を和訳したものです。
英文を翻訳したものであるため、詳細や正しい表現は英文の原文を参照ください。
よりわかりやすく、柔軟にデザインできるように改善されたAuto Layoutに
Auto Layoutとは、フレームやコンポーネントに追加できるプロパティのことです。
テキストサイズの変化に応じてサイズが変わるボタンやカード、他のインターフェイス要素などを作ることができます。
また、これらのレイアウトコンポーネントを組み合わせることで、様々なデザインに応用できるデザインを作成できます。
今回はFigma config 2022で進化したAuto Layoutの機能と、より柔軟なデザインを作成する方法をご紹介します。任意の方向への伸縮、個別パディングの制御、オブジェクトの均等な配置などが、より使いやすいUIで実現されています。
今回改善された項目
Layer order（レイヤーの順番）
Negative Spacing
Canvas stacking order（重ね順の変更）
Text baseline alignment（ベースラインを整える）
Resizing options（サイズ調整に関する変更）
Padding（Canvas control）
Padding （右サイドバーからの変更）
Absolute positioning（絶対位置）
Strokes occupy space（ストロークのスペースの取り方）
1. Layer order（レイヤーの順番）
これまで、オートレイアウトフレーム内のレイヤーは、キャンバス上に表示されているものとは逆の順序で配置されていました。レイヤーの並び順をキャンバス上と同じにすることで、整理、ナビゲーションをしやすくなりました。
左：アップデート前 右：アップデート後
2. Negative Spacing
次に、新機能のNegative Spacingを紹介します。
Negative Spacingとは、Auto Layout内の要素を重ねることができる機能です。
例えば上の写真のように横並びになっている投稿者の写真を
このように重ねることができ、デザインの表現の幅を広げることができます。
Negative Spacingは、右サイドバーの入力ボックスでスペースを探し、マイナスの値を入力することで使用することができます。
3. Canvas stacking order（重ね順の変更）
Negative SpacingでAuto Layout内の要素を重ねることができるようになりましたが、そのデザインをより柔軟にしてくれるのがCanvas stacking orderです。Canvas stacking orderは要素の積み重ねる順番を指定することができる機能です。
左が一番上に重なっている状態から
右が一番上に来るようにすることができます。
Canvas stacking orderの使い方：Auto Layoutフレームを選択した状態で、右側のサイドバーから詳細なレイアウト設定を開きます。キャンバスのスタッキングの横で、次の項目を選択します。
first on top：スタックの最初のレイヤーが上になります
last on top：スタックの最後のレイヤーが上になります
注：スタックの順序が変更されても、レイヤーパネルのレイヤーの順序は同じままであることに注意してください。キャンバスのスタッキングは、キャンバス上での視覚的な変更にすぎません。
4. Text baseline alignment（ベースラインを整える）
異なるサイズのテキストレイヤーや、アイコン付きボタンのようなオブジェクトを含むテキストの場合は、高さがバラバラで揃っていないように見えることがあります。これは、Auto Layoutのデフォルトで垂直方向の中心から整列するようになっているからです。そのため、ベースラインを揃える必要がある場合があります。そこで、次の新機能としてテキストのベースラインを揃える機能を紹介します。
レイヤーのベースラインを揃えるには、揃えたいレイヤーを選択し、右側のサイドバーから詳細なレイアウト設定を開きます。テキストのベースライン揃えの横にある☑︎をクリックし、baseline alignmentを有効にします。
💡ヒント💡 右側のサイドバーのAlignment boxをクリックし、「B」を押してテキストベースラインの配置のオンとオフを切り替えます。
5. Resizing options（サイズ調整に関する変更）
サイズ調整のプロパティが「Resizing」ではなく、右側サイドバーパネルの上部にある幅と高さの入力のすぐ下に変更になりました。
左：アップデート前 右：アップデート後
今回のアップデートで、オブジェクトは「Fixed」「Hug contents」「Fill container」を設定できるようになりました。
プルダウンだけでなく、図形UIからも操作可能です
【Fixed】
Auto Layoutフレームが「Fixed」に設定されている場合、フレームの寸法の値は、その中のコンテンツに関係なく同じままです。フレームのサイズは、文字列の長さが変わるように、その中のオブジェクトが変化しても反応しません。
【Hug contents】
「Hug content」は、親オブジェクトを子オブジェクトのサイズに合わせます。
Auto LayoutフレームをHug contentに設定して、子オブジェクトに応じてサイズを変更します。フレームは、パディングの値を尊重しながら、フレーム内のオブジェクトを囲むために可能な限り小さな寸法を維持します。
注：自動レイアウトフレーム内の子オブジェクトがFill containerに設定されている場合、親フレームはコンテンツを囲まなくなり、軸に対して固定になります。
【Fill container】
「Fill container」は、オブジェクトをコンテナに合わせて伸縮させます。
コンテナを塗りつぶすように設定されたAuto Layoutフレーム内のオブジェクトは、親フレームの幅や高さまで伸びます。
6. Padding（Canvas control）
Canvas controlは、 Auto LayoutのPadding（パディング）とSpacing（スペース）を変更するために新しく出たコントロール機能です。
Canvas controlを使用するには、Auto Rayoutフレームを選択し、キャンバス上でそのフレームにカーソルを合わせます。スマートセレクションと同様に、ピンクのハンドルが表示されます。使い方は以下の二通りです。
ハンドルをクリックして入力フィールドを開き、数値を入力する
または、ハンドルをクリックしてドラッグし、間隔を変更する
▷ハンドルをドラッグするときに ⇧ Shift を押しながら行うと、大きなナッジ値を使って増やしたり減らしたりすることができます。
▷ハンドルをドラッグしながら ⌥ Option を押すと、反対側のパディングを変更できます。
▷ハンドルをドラッグしながら ⇧ Shiftと⌥ Option を押すと、パディングをすべての側面で均一に変更できます（ Windowsは⇧ ShiftとAlt）
7. Padding （右サイドバーからの変更）
右サイドバーからPadding（パディング）とSpacing（スペース）を変更したい場合は、引き続き可能です。今回のアップデートで、より素早く簡単に使えるようになりました。
右サイドバーでは、デフォルトでパディングコントロールが垂直パディングと水平パディングに分けられています。垂直パディングには上下のパディングが、水平パディングには左右のパディングが含まれます。均一なパディングや独立したパディングを設定することも引き続き可能です。
右サイドバーをクリックします。上、右、下、左のパディングのための4つのフィールドが表示されます。
Macの場合は⌘コマンド、Windowsの場合はControlキーを押しながら、いずれかのパディングボックスをクリックします。単一のパディングフィールドが表示されます。任意の値を入力すると、すべての側面で均一なパディングが設定されます。また、CSSの省略形を使用して、個々の値を設定することもできます。例えば、「1,2,3,4」と入力すると、値がそれぞれ上：1、右：2、下：3、左：4と設定されます。また、「1,2」と入力すると、上下：1、左右：2に設定されます。
💡ヒント💡 キーを押して、Tab入力フィールド間を移動します。
8. Absolute positioning（絶対位置）
次に、画期的な新機能であるAbsolute positioningを紹介します。
Absolute position（絶対位置）によって、オブジェクトをオートレイアウトフレーム内に保持したまま、オートレイアウトフローから除外することができます。オブジェクトとその周囲に付随するものは、サイズが変更されたり移動したりしても、互いに無視されます。
CSSの絶対位置と同様に、Absolute position（絶対位置）が有効になっているオブジェクトは、親コンテナを基準にして、オブジェクトを好きな場所に配置することができます。
Absolute position（絶対位置）を持つオブジェクトは、通常のフレーム内のオブジェクトとして扱われます。つまり、親フレームのAuto Layoutフレームのサイズが変更されたときに、オブジェクトがどのように反応するかを決定する制約を適用することができます（右サイドバーのConstraintsより）。これらのオブジェクトには、サイズ調整や高度なレイアウトオプションなど、その他のオートレイアウトの設定は適用されません。
Absolute positionを有効にするには、Auto Layoutフレームの子を選択し、右側のサイドバーにある「＋」をクリックします。
9. Strokes occupy space（ストロークのスペースの取り方）
この写真を見ると、投稿者が親のバウンディングボックスを越えてはみ出しています。
これは、オブジェクトのサイズを計算するときに、外側のストロークが考慮されていないためで、開発者のハンドオフプロセスで問題が発生する可能性があります。
そのため、ストロークのスペースの取り方を変える必要があります。
積み重なっている要素（スタック）を選択し、レイアウトの詳細設定に進みます。Storokesの隣にあるドロップダウンを開き、「Included in layouts（レイアウトに含める）」を選択します。
下記の画像を見ると、積み重なっている要素（スタック）がレイアウトの中に含まれたのがわかります。
しかし、フレームがリサイズされ、Stroke間のスペースが外側のエッジから測定されるようになったため、積み重なっている要素（スタック）の間が広がってしまっています。
space betweenの値を更新して、スタックの間隔を調整しましょう。
レイアウトにStrokeが含まれるようになったことで、CSSが境界線をどのようにレンダリングするかをより正確に表現できるようになりました。これにより、デザイン→コードのプロセスにおいて、視覚的な平行性が確保されます。
まとめ
今回はFigma Config 2022によって改善された Auto Layout の主な変更点をまとめました。他にも、発展的な詳しい使い方が紹介されていますので、興味のある方はこちらを参考にしてください。