オートレイアウトのプロパティを調べる
オートレイアウトのプロパティをよくご存じですか。オートレイアウトの使い方については、こちらを参照してください→
オートレイアウトはフレームとコンポーネントに追加できるプロパティです。拡大して埋めたり、縮小して調整したり、コンテンツの変更時に合わせたデザインを作成できます。デザインを変更する際に、新しいレイヤーの追加、長い文字列の入力、配置の保持が必要な場合に最適です。
オートレイアウトの使用方法はたくさんあります:
- テキストラベルの編集とともに拡大/縮小するボタンを作成します。
- アイテムの追加、削除、非表示に合わせたリストを作成します。
- オートレイアウトのフレームを組み合わせてインターフェースを構築します。
オートレイアウトは多くの可動パーツと用途がある強力な機能です。この記事では、各プロパティの機能について説明します。
オートレイアウトがあるフレームには、通常のフレームにはないさまざまなプロパティがあります。オートレイアウトを適用すると、右サイドバーの表示がいくつか変更されます。
オートレイアウトのフレームでは、次の操作ができません:
- 🚫 フレームにレイアウトグリッドを追加する
- 🚫 オブジェクトで絶対位置が有効になっていない限り、オートレイアウトのフレーム内のオブジェクトに制約を適用する
- 🚫 フレーム内の任意のオブジェクトでスマートセレクションを使用する
方向
方向はオートレイアウトのフレームがフローする向きを表します。
- y軸に沿ってオブジェクトの追加、削除、並べ替えをするには、縦を選択します。たとえば、リスト内のオブジェクト、ニュースフィードやタイムライン内の投稿などです。
- x軸に沿ってオブジェクトの追加、削除、並べ替えをするには、横を選択します。たとえば、ボタンの行、モバイルのナビゲーションメニューのアイコンなどです。
現在Figmaは、横または縦の一方向だけをサポートします。両方向を使用するデザインを作成するには、オートレイアウトのフレームを組み合わせるか、ネストする必要があります。
以下の例では、縦のオートレイアウトのフレーム内に横のオートレイアウトのフレームをネストして、タイトル、説明、表示時間を含むカードを作成しています。
アイテム間の間隔
右サイドバーのキャンバスコントロールまたは間隔フィールドを使用して、 アイテム間の間隔を調整します。
キャンバスコントロール
キャンバスコントロールを使用するには、オートレイアウトのフレームを選択してカーソルを合わせます。スマートセレクションと同様に、ピンクのハンドルが表示されます。
- ハンドルをクリックして入力フィールドを開き、数値を入力します
- または、ハンドルをクリックしてドラッグし、間隔を変更します。
ヒント⇧ Shiftを押しながらハンドルをドラッグして、大きなナッジ値を使用して増減します。
右サイドバー
右サイドバーの[オートレイアウト]セクションの間隔フィールドを使用するには、次を行います。
- 横の間のスペース
- 縦の間のスペース
フィールドに数字を入力したり、矢印キーを使用して値を調整したり、カーソルを動かして設定したりします。
パディング
パディングはオートレイアウトのフレームの境界とフレームの子オブジェクトの間の空またはホワイトのスペースを制御します。パディングは縦横とも均一に設定することも、上下左右で異なる値に設定することもできます。
右サイドバーのキャンバスコントロールまたは間隔フィールドを使用して、パディングを調整します。
キャンバスコントロール
キャンバスコントロールを使用するには、オートレイアウトのフレームを選択し、キャンバス上でそのフレームにカーソルを合わせます。スマートセレクションと同様に、ピンクのハンドルが表示されます。
- ハンドルをクリックして入力フィールドを開き、数値を入力します
- または、ハンドルをクリックしてドラッグし、間隔を変更します。
- ⇧ Shiftを押しながらハンドルをドラッグして、大きなナッジ値を使用して増減します。
- ⌥ Optionを押しながらハンドルをドラッグして、反対側のパディングを変更します。
- ⇧ Shift⌥ Optionを押しながらハンドルをドラッグして、すべての側面でパディングを均一に変更します。
右サイドバー
右サイドバーでは、パディングコントロールはデフォルトで垂直と水平のパディングに分けられています。ここで、垂直には上下のパディングが含まれ、水平には左右が含まれます。均一なパディングまたは独立したパディングは引き続き設定できます。
- 右サイドバーでをクリックします。 上、右、下、左のパディング用に4つのフィールドが表示されます
- ⌘ Command(Macの場合)またはCtrl(Windowsの場合)を押したまま、任意のパディングボックスをクリックします。単一のパディングフィールドが表示されます。1つの値を入力して上下左右に同じパディングを設定するか、CSS一括指定を使用して個別の値を設定します。
たとえば1,2,3,4と入力した場合、設定される値は、それぞれ上: 1、右: 2、下: 3、左: 4です。または、1,2と入力すると、設定される値は、上/下: 1、左/右: 2です。
ヒントTabキーを押すと、入力フィールド間を移動できます。
配置
オートレイアウトのフレーム内で子オブジェクトを配置する方法を選択します。オートレイアウトのフレームの方向と配分によって、使用できる配置オプションが決まります。
通常のフレーム内のオブジェクトとは異なり、オブジェクトの配置を個別に制御することはできません。このため、親のオートレイアウトのフレームで子オブジェクトの配置を設定します。
インタラクティブグリッドを使用して、フレーム内の子のレイアウトを9つのオプションから選択します。
配分を[間隔]に設定している場合、方向ごとに次の3つのオプションがあります:
- 縦のオートレイアウト:左、中央、右
- 横のオートレイアウト:上、中央、下
配分を[詰めて配置]に設定している場合、方向ごとに同じ9つのオプションがあります:
- 左上
- 中央上
- 右上
- 左
- 中央
- 右
- 左下
- 中央下
- 右下
メモ: 1つ以上のサイズ変更プロパティを[コンテンツを内包]に設定すると、一部の選択範囲のレイアウトが、キャンバス上で見かけ上同じになることがあります。これは、[コンテンツを内包]により子オブジェクトの周囲の余分なスペースが削除されるためです。
配分
フレーム内の子オブジェクトに配置ルールを設定してから、それらのオブジェクトのフレーム内での配分方法を選択します。
をクリックして、詳細レイアウト設定を開きます。[スペーシングモード]の横で、ドロップダウンを使用して次を選択します。
- 詰めて配置: フレーム内のオブジェクトが一緒にグループ化されます。このオプションは、フレーム内のオブジェクトをできるだけ近くに配置するために使用します。
- 間隔: フレーム内のオブジェクト間に、フレームに設定された方向と配置に沿って等しくスペースが設定されます。このオプションは、フレーム全体のオブジェクトを伸縮させる場合に使用します。
ヒント位置合わせボックスをクリックし、[X]を押して、[間隔]と[パッケージ化]の間で切り替えます。
サイズ変更
オートレイアウトの最も強力な機能の1つは、オートレイアウトのフレームでオブジェクトの寸法を制御できることです。
親のオートレイアウトのフレームのサイズ変更の動作を設定して、子オブジェクトの変更にすべて適用します。サイズ変更設定は、右サイドバーのドロップダウンメニューを使用して、X軸とY軸で個別にオブジェクトに適用できます。
メモ: テキストレイヤーには固有のサイズ変更プロパティがあります。オートレイアウトのフレーム内で役に立つ場合があります。
オートレイアウトのフレームを完全に流動的にする場合は、固定サイズのテキストボックスを使用しないことをおすすめします。固定サイズのテキストレイヤーでは、テキストを収容するためのサイズ変更が行われません。このため、オートレイアウトのフレーム内でレイヤー間の重なりが発生する可能性があります。
固定幅または固定高さ
オートレイアウトのフレームが固定幅または固定高さに設定されている場合、フレームの寸法の値はその中のコンテンツにかかわらず変更されません。フレームのサイズは、長さが変わるテキストの文字列のように、中のオブジェクトの変更に応じて変わることはありません。
コンテンツを内包
オートレイアウトのフレームのサイズが子オブジェクトに応じて変わるようにするには、[コンテンツを内包]に設定します。フレームの寸法は、内包するコンテンツの周囲のサイズができるだけ小さくなるように設定されます。ただしパディング値は維持されます。
メモ:オートレイアウトのフレーム内の任意の子オブジェクトが[コンテナーの塗り]に設定されると、親フレームは、コンテンツを内包しなくなり、軸が固定になります。
コンテナーに合わせて拡大
[コンテナーに合わせて拡大]に設定されたオートレイアウトのフレーム内のオブジェクトは、親フレームの幅/高さまで伸縮します。
制約とサイズ変更
オートレイアウトのフレーム内では、子オブジェクトに制約を適用できません (オブジェクトで絶対位置↓が有効になっていない限り)。代わりにサイズ変更プロパティを使用して、フレームまたはフレーム内のオブジェクトのサイズ変更にオブジェクトが対応する方法を設定できます。
オートレイアウトのフレームが通常のフレーム内にネストされている場合、オートレイアウトのフレームに制約を適用できます。[制約] セクションとサイズ変更オプションが表示されて、オートレイアウトのフレームおよびその中のオブジェクトのサイズ変更動作の制約を設定できます。
例: オートレイアウトを使用してナビゲーションバーを作成すると、さまざまな画面サイズに合わせて調整できます。制約を使用して、親フレームのサイズ変更時にナビゲーションバーを正しく対応させることができます。またサイズ変更により、ナビゲーションバー内のオブジェクトが、それらの変更にどのように対応するかを制御できます。
絶対位置
絶対位置は、オブジェクトをオートレイアウトのフレームに保持したまま、オートレイアウトフローからオブジェクトを除外します。オブジェクトとその周囲の兄弟は、サイズを変更して移動しても、お互いを無視します。
CSSでの絶対位置同様に、絶対位置が有効になっているオブジェクトは、親コンテナーに対して必要な場所に正確に配置できます。
絶対位置を持つオブジェクト は、通常のフレーム内のオブジェクトとして扱われます。つまり、制約を適用して、親のオートレイアウトのフレームのサイズが変更されたときにどのように応答するかを決定できます。サイズ変更や高度なレイアウトオプションなど、その他のオートレイアウト設定は、これらのオブジェクトでは使用できません。
絶対位置を有効にするには、オートレイアウトのフレームの子を選択し、右サイドバーのをクリックします。
キャンバスでのスタックの順序
複数のレイヤーの間隔が負の場合、スタックが作成されます。デフォルトでは、スタックの最後のオブジェクト(右端または一番下のオブジェクト)が一番上になります。
キャンバスで表示されるスタックの視覚的な順序を変更できます。
オートレイアウトのフレームを選択した状態で、右サイドバーのをクリックして詳細なレイアウト設定を開きます。[キャンバススタック]の横で、次を選択します。
- 最初が上: スタックの最初のレイヤーが一番上になります
- 最後が上:スタックの最後のレイヤーが一番上になります
メモ:スタックの順序が変更されても、レイヤーパネルでのレイヤーの順序は同じままです。キャンバスのスタックは、キャンバス上で発生する視覚的な変更にすぎません。
テキストベースラインの配置
さまざまな高さのレイヤーが、水平方向のオートレイアウトに配置されたときに垂直方向の中央に配置される場合。 ただし、サイズの異なるテキストレイヤーや、アイコン付きのボタンなどのオブジェクトを含むテキストの場合は、代わりにベースラインを揃える必要があります。
レイヤーをベースラインで整列させるには、整列するレイヤーを選択し、右サイドバーからをクリックして詳細なレイアウト設定を開きます。テキストベースラインの配置の横にあるをクリックして、ベースラインの配置を有効にします。
ヒント右サイドバーにある配置ボックスをクリックし、Bを押して、テキストベースラインの配置のオンとオフを切り替えます。
レイアウトのストローク
デフォルトでは、オブジェクトのサイズを計算するときにストロークは考慮されないため、親フレームや周囲の兄弟には影響しません。
CSSが境界線をレンダリングする方法を正確に表していないため、開発者のハンドオフ時には理想的ではない場合があります。
詳細レイアウト設定に移動し、[線]の横にあるドロップダウンを使用して[レイアウトに含める]または[レイアウトから除外する]を選択して、ストロークがオートレイアウトのフレームのスペースを占めるかどうかを選択します。
