オートレイアウトのプロパティを調べる – Figma Learn - ヘルプセンター

この記事は旧Figma UIと新Figma UIの両方に対応しています。ページの左下にあるトグルスイッチで、現在使用しているUIを選択してください。UI3: Figmaの新デザインについて→

はじめに

この機能を使用できるユーザー

ファイルへの編集可アクセス権を持つユーザーは、フレームやオブジェクトにオートレイアウトを追加できます。

オートレイアウトのプロパティをよくご存じですか。オートレイアウトの使い方については、こちらを参照してください→

オートレイアウトはフレームとコンポーネントに追加できるプロパティです。拡大して埋めたり、縮小して調整したり、コンテンツの変更時に合わせたデザインを作成できます。デザインを変更する際に、新しいレイヤーの追加、長い文字列の入力、配置の保持が必要な場合に最適です。

オートレイアウトの使用方法はたくさんあります:

テキストラベルの編集とともに拡大/縮小するボタンを作成する
アイテムの追加、削除、非表示に合わせたリストを作成する
オートレイアウトのフレームを組み合わせてインターフェースを構築する

オートレイアウトは多くの変動要素と用途を持つ強力な機能です。この記事では、オートレイアウトのさまざまな特徴が機能する仕組みを詳しく説明します。

Figmaコミュニティでオートレイアウトのプレイグラウンドファイルを探す→

オートレイアウト機能が付いたフレームには、通常のフレームにはないさまざまなプロパティがあります。オートレイアウトを適用すると、右サイドバーの表示が少し変更されます。

オートレイアウトのフレームでは、次の操作ができません:

🚫 フレームにレイアウトグリッドを追加する
🚫 オブジェクトで絶対位置が有効になっていない場合に、オートレイアウトのフレーム内のオブジェクトに制約を適用する
🚫 フレーム内の任意のオブジェクトでスマートセレクションを使用する

レイアウトフロー

方向

方向はオートレイアウトのフレームがフローする向きを表します。

縦: オブジェクトの追加、削除、並べ替えをy軸に沿って行います。例: リスト内のオブジェクト、ニュースフィードやタイムライン内の投稿
横: オブジェクトの追加、削除、並べ替えをx軸に沿って行います。例: ボタンの行、モバイルのナビゲーションメニューのアイコン
折り返す: オフジェクトをフレーム内の複数の行と列に配置します。オブジェクトは水平方向に並べられ、次の行に折り返されます。例: フォトギャラリー、タグのセット

1つがピンク、1つが黄色、1つが緑の3つの円という同じ要素を使用した3つのデザインセット。最初の円のセットは垂直方向、2番目は水平方向に配置され、3つ目はピンクと黄色が1列目、緑が2列目にくるように折り返されている。

キャンバスでのスタックの順序

複数のレイヤーの間隔が負の場合、スタックが作成されます。デフォルトでは、スタックの最後のオブジェクト(右端または一番下のオブジェクト)が一番上になります。

キャンバスで表示されるスタックの視覚的な順序を変更できます。

オートレイアウトのフレームを選択した状態で、右パネルのをクリックしてオートレイアウト設定を開きます。[キャンバススタック]の横で、以下を選択します。

最初が上: スタックの最初のレイヤーが一番上になります
最後が上:スタックの最後のレイヤーが一番上になります

最初が上と最後が上を並べて比較した図

メモ:スタックの順序が変更されても、レイヤーパネルでのレイヤーの順序は同じままです。キャンバスのスタックは、キャンバス上で発生する視覚的な変更にすぎません。

オートレイアウトを無視

注: 「オートレイアウトを無視」は、以前「絶対位置」と呼ばれていたものです。機能の名前が変わったものの、動作はこれまでと同じです。

「オートレイアウトを無視」が有効になっていると、オブジェクトをオートレイアウトのフレームに保持したまま、オートレイアウトフローからオブジェクトを除外します。オブジェクトとその周囲の兄弟は、サイズを変更して移動しても、お互いを無視します。

CSSでの絶対位置と同様、オートレイアウトを無視するオブジェクトは、親コンテナに対して必要な場所に正確に配置できます。

オートレイアウトを無視するオブジェクトは、通常のフレーム内のオブジェクトとして扱われます。つまり、制約を適用して、親のオートレイアウトのフレームのサイズが変更されたときにどのように対応するかを決定できます。サイズ変更や高度なレイアウトオプションなど、その他のオートレイアウト設定は、これらのオブジェクトでは使用できません。

以下のいずれかを実行すると、オブジェクトがオートレイアウトのフローを無視するように設定できます。

オートレイアウトのフレームの子を選択し、右パネルでをクリックします。
⌃ Controlを押しながらオブジェクトをオートレイアウトのフレームにドラッグします。

Figmaデザインのファイルで、カーソルがコントロールキーを押しながら、Xアイコンをオートレイアウトのフレームにドラッグし、フレーム右上でXアイコンを離す画像。

スペーシング

アイテムの間隔

オートレイアウトのフレーム内のオブジェクト間の距離、すなわち配置を設定するには、アイテム間の間隔を使用します。

アイテム間の間隔には、次の2種類の設定があります。

自動: オブジェクト間の間隔ができるだけ大きな距離になるように設定します。フィールドに「自動」と入力するか、ドロップダウンメニューから選択します。
指定間隔: オブジェクトを離す距離を指定します。フィールドに値を入力するか、矢印キーを使用して値をナッジするか、カーソルを使用してフィールドをスクラブします。

この2つの設定を切り替えるには、整列ボックスをクリックしてXを押します。

Figmaデザインのファイルに表示された、ブログ記事カードを含むフレーム。中にはピンク色の四角形、タイトルテキスト、説明テキストに加え、3つのトピックタグがあり、各タグのオートレイアウトのフレーム内で折り返すように設定されている。カーソルが右パネルにあるフィールド間の左右の間隔をクリックし、「オート」と入力すると、トピックタグが親コンテナを埋めるように左右に広がる。

オートレイアウトのフレームの方向が[縦]または[横]に設定されている場合、アイテムの垂直方向または水平方向の間隔をそれぞれ設定できます。フレームの方向が[折り返し]に設定されている場合、アイテムの水平方向と垂直方向の両方の間隔を設定できます。

ヒント! ⇧ Shiftを押したまま、ハンドルをドラッグすると、大きな調整の値を使用して増減されます。

パディング

パディングはオートレイアウトのフレームの境界とフレームの子オブジェクトの間の空またはホワイトのスペースを制御します。パディングは縦横とも均一に設定することも、上下左右で異なる値に設定することもできます。

右パネルのキャンバスコントロールまたは間隔フィールドを使用して、パディングを調整します。

キャンバスコントロールにアクセスするには、オートレイアウトのフレームを選択し、そのフレームにカーソルを合わせます。スマートセレクションと同様に、ピンクのハンドルが表示されます。

ハンドルをクリックして入力フィールドを開き、数値を入力します
または、ハンドルをクリックしてドラッグし、間隔を変更します

ヒント: 反対側、上下左右などのパディングの設定に関するショートカットについては、キーボードショートカットガイド ↓を確認してください。

タイトル、説明、[続きを読む]ボタンを含む薄緑色のブログカードアセット。このアセットにはオートレイアウトが適用され、すべての側面のパディングを変更するためのキーボードショートカットがその下に表示される。カーソルがキーボードショートカットを使用して、オートレイアウトのフレーム上部のピンク色のハンドルをクリックしてドラッグしている。

右パネルのパディングコントロールは、デフォルトでは垂直(上下)パディングと水平(左右)パディングに分けられています。

個別のパディングを設定するには、をクリックして上、右、下、左のパディングフィールドを使用します。
パディングを上下左右同じに設定したり、CSS一括指定を使用したりするには、⌘ CommandまたはControlを押したまま、任意のパディングフィールドをクリックします。CSS一括指定も可能です。たとえば1,2,3,4と入力すると、上、右、下、左がそれぞれ1、2、3、4に設定されます。1,2と入力すると、上と下が 1、左と右が 2に設定されます。

ヒント:Tabキーを押すと、入力フィールド間を移動できます。

レイアウトのストローク

デフォルトでは、オブジェクトのサイズを計算するときにストロークは考慮されないため、親フレームや周囲の兄弟には影響しません。

CSSが境界線をレンダリングする方法を正確に表していないため、開発者のハンドオフ時には理想的ではない場合があります。

オートレイアウト設定に移動し、[線]の横にあるドロップダウンを使用して[レイアウトに含める]または[レイアウトから除外する]を選択して、ストロークがオートレイアウトのフレームのスペースを占めるかどうかを選択します。

配置

子オブジェクトの配置を設定する

オートレイアウトのフレーム内の子オブジェクトの配置方法を選択します。オートレイアウトのフレームの方向と配置(アイテムの間隔)によって、使用できる整列オプションが決まります。

通常のフレーム内のオブジェクトとは異なり、オブジェクトの配置を個別に制御することはできません。このため、親のオートレイアウトのフレームで子オブジェクトの配置を設定します。

右パネルにある[整列]ボックスで、フレーム内の子のレイアウトを9つのオプションから選択します。

ボックスを選択して、矢印キーで整列設定を切り替えます。
ボックスを選択し、W/A/S/Dを押して配置をフレームの端に設定します。

3つの黄色い正方形が表示された緑色のオートレイアウトのフレーム。カーソルが右パネルの[整列]ボックスでさまざまなオプションをクリックしている。

アイテムの間隔が[自動]に設定されている場合、それぞれの方向に3つのオプションがあります。

縦のオートレイアウト:左、中央、右
横のオートレイアウト:上、中央、下

3つの黄色い正方形が表示された緑色のオートレイアウトのフレーム。間隔に「オート」が適用された場合を想定して、カーソルが[整列]ボックス内のさまざまなオプションをクリックしている。

アイテムの間隔が特定の数値に設定されている場合は、それぞれの方向に同じ9個のオプションがあります。

左上
中央上
右上
左
中央
右
左下
中央下
右下

メモ: 1つ以上のサイズ変更プロパティを[コンテンツを内包]に設定すると、一部の選択範囲のレイアウトが、キャンバス上で見かけ上同じになることがあります。これは、[コンテンツを内包]により子オブジェクトの周囲の余分なスペースが削除されるためです。

テキストベースラインの配置

ベースラインとは、テキストまたはレイヤーを整列させるための目に見えない線です。タイポグラフィにおいて、ディセンダ（アルファベット小文字の下に出る部分）はこの線の下にはみ出します。

フォントサイズがバラバラなテキストレイヤーのベースラインを整列させる、アイコンをテキストレイヤーと整列させるなど、レイヤーのベースラインを整列させることでバランスが取れる場合があります。

テキストとアイコンをベースラインで整列させた場合とそうでない場合を横に並べて比較した画像

レイヤーをベースラインで整列させるには、整列させたいレイヤーを選択し、右パネルでをクリックしてオートレイアウト設定を開きます。[テキストベースラインの配置]の横にあるをクリックして、ベースラインを使用した整列を有効にします。

ヒント右パネルにある[整列]ボックスをクリックし、Bを押して、テキストベースラインの整列のオンとオフを切り替えます。

サイズ変更

オートレイアウトの最も強力な機能の1つは、オートレイアウトのフレームでオブジェクトの寸法を制御できることです。

親のオートレイアウトのフレームのサイズ変更の動作を設定して、子オブジェクトの変更にすべて適用します。サイズ変更設定は、右パネルのドロップダウンメニューを使用して、X軸とY軸で個別にオブジェクトに適用できます。

ドロップダウンから、[サイズ変更]オプションにカーソルを合わせると、キャンバスに線が表示されてデザインのバウンディングボックスのサイズがどのように変わるのかが示されます。

モバイルフレーム内のレイヤーが選択されており、右パネルのサイズ変更セクションが四角い枠で強調表示されている。

メモ: テキストレイヤーには固有のサイズ変更プロパティがあります。オートレイアウトのフレーム内で役に立つ場合があります。

オートレイアウトのフレームを完全に流動的にする場合は、固定サイズのテキストボックスを使用しないことをおすすめします。固定サイズのテキストレイヤーでは、テキストを収容するためのサイズ変更が行われません。このため、オートレイアウトのフレーム内でレイヤー間の重なりが発生する可能性があります。

テキストサイズ変更の詳細はこちら→

固定幅または固定高さ

オートレイアウトのフレームが固定幅または固定高さに設定されている場合、フレームの寸法の値はその中のコンテンツにかかわらず変更されません。フレームのサイズは、長さが変わるテキストの文字列のように、中のオブジェクトの変更に応じて変わることはありません。

最小および最大サイズ

最小または最大の幅と高さを任意のオートレイアウトのフレームおよび子に設定できます。

[幅]ドロップダウンを開くと、 [最小幅を追加]と [最大幅を追加]があります
[高さ]ドロップダウンを開くと、 [最小高さを追加]と [最大高さを追加]があります

[幅]または[高さ]ドロップダウンメニューからオプションを選択します。表示される新しいフィールドに値を入力するか、ドロップダウンで数値バリアブルを適用します。

黒い枠線と白い背景に「topic」というラベルの付いたトピックタグコンポーネントで、横方向のオートレイアウトを使用。カーソルがコンポーネントの最小幅を80ピクセルとし、ラベルを「インテリアデザイン」に変更している。コンポーネントはテキストに合わせて横に拡大する。

オブジェクトに最小または最大の設定がある場合、それぞれの幅または高さアイコンの両側にそれを示す2本の線があります。アイコンにカーソルを合わせて、キャンバス上のサイズ制限のプレビューを確認できます。

オブジェクトを選択解除して再度選択すると、最小寸法フィールドと最大寸法フィールドが右パネルに表示されなくなります。このフィールドに再度アクセスするには、幅または高さのアイコンをクリックします。

最小値または最大値の設定を削除するには、[幅]または[高さ]ドロップダウンを開き、[最小と最大を削除]を選択します。

注: レイヤーに最大高さと最大行数の両方を設定することはできません。最大高さを追加すると最大行数は[自動]に設定されます。最大行数を設定するとレイヤーの最大高さ設定が削除されます。最大行数についての詳細はこちら →

コンテンツを内包

オートレイアウトのフレームのサイズが子オブジェクトに応じて変わるようにするには、[コンテンツを内包]に設定します。フレームの寸法は、内包するコンテンツの周囲のサイズができるだけ小さくなるように設定されます。ただしパディング値は維持されます。

ヒント! オートレイアウトオブジェクトのバウンディングボックスの垂直方向または水平方向の辺をダブルクリックすると、[コンテンツを内包]に設定されます。

メモ:オートレイアウトのフレーム内の任意の子オブジェクトが[コンテナの塗り]に設定されると、親フレームは、コンテンツを内包しなくなり、軸が固定になります。

コンテナに合わせて拡大

[コンテナに合わせて拡大]に設定されたオートレイアウトのフレーム内のオブジェクトは、親フレームの幅/高さまで伸縮します。

オートレイアウトフレーム内の子オブジェクトも、親フレームの全幅まで手動でサイズ変更された場合、コンテナに合わせて拡大されます。

ヒント! ⌥ OptionまたはAltを押したまま、オートレイアウトオブジェクトのバウンディングボックスの垂直方向または水平方向の辺をダブルクリックすると、[コンテナに合わせて拡大]に設定されます。

制約に関するメモ

オートレイアウトのフレーム内では、子オブジェクトに制約を適用できません(オブジェクトで「オートレイアウトフローを無視」が有効になっていない限り)。代わりにサイズ変更プロパティを使用して、フレームまたはフレーム内のオブジェクトのサイズ変更にオブジェクトが対応する方法を設定できます。

オートレイアウトのフレームが通常のフレーム内にネストされている場合、オートレイアウトのフレームに制約を適用できます。[制約] セクションとサイズ変更オプションが表示されて、オートレイアウトのフレームおよびその中のオブジェクトのサイズ変更動作の制約を設定できます。

例: オートレイアウトを使用してタグのセットを作成した場合、さまざまな画面サイズに応じてそのセットを調整したいことがあります。制約を使用することで、親フレームのサイズの変化にナビゲーションバーを正しく対応させることができます。また、サイズ変更を使用して、ナビゲーションバー内のオブジェクトを変更にどのように対応させるかをコントロールできます。

画面下部にポップアップパネルがあるモバイルフレーム。カーソルがパネルを選択し、[制約]ボタンをクリックして、横方向の制約を「左」から「左と右」に変更している。モバイルフレームを横方向にサイズ変更するとパネルが拡大する。

制約の詳細はこちら→

キーボードショートカットガイド

基本的なショートカット

アクション	Mac	Windows
オートレイアウトを追加	`⇧ Shift A`	`⇧ Shift A`
オートレイアウトを提案	`Ctrl` `⇧ Shift A`	`Ctrl` `Alt` `⇧ Shift` `A`
オートレイアウトを削除	`⌥ Option` `⇧ Shift A`	`Alt` `⇧ Shift A`
(右パネルから)上下左右のパディングを編集する	`⌘ Command` + パディング入力フィールドをクリック	`Ctrl` + パディング入力フィールドをクリック

配置ボックスから

下表のアクションを行うには、右パネルの[整列]ボックスをクリックし、以下のキーを押します。

アクション	MacおよびWindows
配置を設定する	`↓` / `→` / `←` / `↑`
配置を端に設定する	`W` / `A` / `S` / `D`
ベースラインの配置を切り替える	`B`
間隔を切り替える	`X`

キャンバスから

以下を行うには、次のキーボードショートカットを使用しながら、キャンバス上のハンドルをドラッグします。

アクション	Mac	Windows
反対側のパディングを設定する	`⌥ Option`	`Alt`
上下左右のパディングを設定する	`⌥ Option⇧ Shift`	`Alt⇧ Shift`
大きな調整でパディングまたは間隔を設定する	`⇧ Shift`	`⇧ Shift`

下表のアクションを行うには、オートレイアウトのフレーム内の特定の領域をクリックし、以下のキーボードショートカットを使用します。

アクション	Mac	Windows
反対側のパディング値を入力する	`⌥ Option` + パディング領域をクリック	`Alt` + パディング領域をクリック
上下左右のパディング値を入力する	`⌥ Option⇧ Shift` + パディング領域をクリック	`Alt⇧ Shift` + パディング領域をクリック
「コンテンツを内包」を設定する	垂直方向または水平方向の辺をダブルクリック	垂直方向または水平方向の辺をダブルクリック
「コンテナに合わせて拡大」を設定する	`⌥ Option` + 垂直方向または水平方向の辺をダブルクリック	`Alt` + 垂直方向または水平方向の辺をダブルクリック