オートレイアウトのガイド

はじめに

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

すべてのプランで利用可能

FigmaデザインとFigma Sitesで利用可能です。また、Figma SlidesとFigma Buzzのデザインモードからオートレイアウトにアクセスすることも可能です。

ファイルへの編集アクセス権を持つユーザーは、オートレイアウトを使用できます

オートレイアウトはフレームに使用でき、デザインはコンテンツの変更に動的に応答するため、時間を節約できるだけでなく、応答性と適応性のあるデザインを作成できるようになります。

オートレイアウトフレームの要素は、方向、間隔、パディング、整列、その他のオートレイアウトプロパティに基づいて自動的に配置されます。コンテンツが変更されたり、要素が追加、削除、サイズ変更された場合でも、レイアウトは手動で再配置する必要なく調整されます。

オートレイアウトを使用すると、以下のような応答性のあるデザインを作成できます。

• テキストラベルの編集に合わせて拡大/縮小するボタン
• アイテムの追加、削除、または非表示に合わせて調整されるリスト
• Bentoボックスとダッシュボード
• さまざまな画面サイズに適応するウェブページ

オートレイアウトを追加

デザインでオートレイアウトを使用するには、1つ以上のレイヤーを選択し、⇧ Shift Aを押すか、右サイドバーの [オートレイアウトを追加] をクリックします。Figmaは、ユーザーがどのオートレイアウトフロー（垂直、水平、グリッド）を使用したいかを判断しようとします。いつでも別のフローに切り替えることができます。

デザインでのオートレイアウトの切り替えの詳細はこちらをご覧ください。

オートレイアウトフローを選択

オートレイアウトがフレームで使用されている場合、フレームのオブジェクトのフローと配置を決定するために、以下の3つのオプションから選択できます。

• 垂直
• 水平
• グリッド

水平方向と垂直方向

垂直オプションは、フレームのオブジェクトをY軸に沿って配置します。追加、削除、並べ替えたオブジェクトはすべてY軸に沿って配置されます。例: やることリストの複数のリスト項目や、ニュースフィードまたはタイムライン内の投稿など。

水平オプションは、フレームのオブジェクトをX軸に沿って配置します。追加、削除、並べ替えたオブジェクトはすべてX軸に沿って配置されます。例: モバイルナビゲーションメニューのボタンの列またはアイコン。

水平を選択すると、折り返しが利用可能になります。折り返しは、フレームで溢れたオブジェクトを次の行にプッシュします。

水平および垂直のオートレイアウトオプションには、サイズ変更、間隔、整列などの追加のプロパティがあります。

水平および垂直のオートレイアウトフローの詳細はこちらをご覧ください。

グリッド オープンベータ版

グリッドオプションは、オブジェクトを列と行に配置し、ユーザーはさまざまなフレームサイズに応じてサイズを調整するギャラリー、Bentoボックス、ダッシュボードレイアウトを作成できます。

水平および垂直フローの折り返し設定とは異なり、グリッドのオブジェクトは次の行に折り返されません。代わりに、「グリッド」に配置され、複数の行または列にまたがることができます。

グリッドのオートレイアウトのフレームには、列と行のサイズ変更、スパンなどの追加プロパティがあります。

グリッドオートレイアウトフローの使用方法の詳細はこちらをご覧ください。

間隔プロパティを調整

オートレイアウトのフレームで使用可能なプロパティの種類は、使用するオートレイアウトフローによって決定されます。ただし、すべてのフローは、いくつかの重要な間隔プロパティを共有しています。

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

間隔とは、オートレイアウトのフレームのオブジェクト間の距離または配置です。数値を使用して、オブジェクト間の距離を正確に指定します。または、垂直および水平のオートレイアウトのフレームでは、アイテム間の間隔を自動に設定して、オブジェクト間の距離を最大に設定するオプションも使用できます。

サイズ変更で応答性を調整する

オートレイアウトの最も強力な機能の1つは、サイズ変更プロパティを使用して、オブジェクトが設定や周囲のオブジェクトに合わせて寸法を調整できる機能です。親オートレイアウトのフレームでサイズ変更の動作を設定すると、そのコンテンツに行った変更に基づいてサイズ変更の動作を決定できます。その逆も行えます。

サイズ変更の設定は、右パネルの幅と高さのドロップダウンメニューを使用して、X軸とY軸の両方に適用できます。

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

サイズ変更プロパティ	以下に適用可能	サイズの動作
コンテンツを内包	オートレイアウトフレーム	オブジェクトはその子オブジェクトに基づいてサイズを変更
コンテナに合わせて拡大	オートレイアウトのフレームの子オブジェクト	オブジェクトが利用可能なすべてのスペースを埋める
固定幅 / 高さ	両方	オブジェクトは固定されたまま
最小幅 / 高さ	両方	オブジェクトは最小値以上
最大幅 / 高さ	両方	オブジェクトは最大値以下

コンテンツを内包

オートレイアウトのフレームにコンテンツを内包を使用すると、子オブジェクトの周囲のサイズを可能な限り小さく保ちながら、間隔値を尊重します。

例えば、オートレイアウトを使用するフレームに幅が40pxのテキストレイヤーがあるとします。フレームのパディングは左右10pxに設定されています。サイズ変更が「コンテンツを内包」に設定されているため、フレームの幅は60pxです。テキストレイヤーが更新されて幅が50pxになると、フレームの幅は70pxに変更されます。

「コンテンツを内包」はオートレイアウトのフレームにのみ適用できます。

コンテナに合わせて拡大

[コンテンツに合わせて拡大] に設定されたレイヤーは、親フレームのすべての利用可能なスペースを占めるように引き伸ばされますが、間隔値は尊重されます。

「コンテンツに合わせて拡大」はオートレイアウトのフレームの子オブジェクトにのみ適用でき、上位フレームには使用できません。

オートレイアウトフレームの子オブジェクトは、親フレームの利用可能なスペース全体に合わせて手動でサイズ変更された場合、コンテナに合わせて拡大されるようにも設定されます。

固定幅または固定高さ

レイヤーに固定の幅または高さを設定すると、周囲の間隔値や子、親、または兄弟オブジェクトが変更されても、そのサイズは固定され、変更されません。

固定は、任意のオートレイアウトのフレームとその子に適用できます。

レイヤーを手動でサイズ変更するか、固定された幅または高さに値を指定する場合、サイズ変更プロパティはそれぞれの軸で固定に設定されます。

たとえば、オートレイアウトを使用するボタンコンポーネントがあり、その幅が「コンテンツを内包」に設定されているとします。幅フィールドに 125 のような値を入力すると、サイズ変更プロパティは 固定幅に変更されます。

最小および最大サイズ

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

• [幅]ドロップダウンを開いて、[最小幅を追加]と[最大幅を追加]を見つけます
• [高さ]ドロップダウンを開いて、[最小高さを追加]と[最大高さを追加]を見つけます

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

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

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

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

オートレイアウトを無視

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

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

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

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

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

オートレイアウトのフレームのネスト

オートレイアウトの応答性の真の力は、ネストされたオートレイアウトのフレーム全体でサイズ変更の動作を組み合わせるときに現れます。

ネスティングとは、レイヤーを別のレイヤーの内側に配置する動作を指します。たとえば、コンポーネント内にボタンを配置したり、フレーム内にシェイプを配置することです。

オートレイアウトのフレームを別のオートレイアウトのフレーム内にネストすることで、水平、垂直、グリッドのオートレイアウトオプションを組み合わせて複雑なインターフェースを作成できます。ネストされたフレームは親プロパティと子プロパティの両方を持ち、各フレームには独自のパディングとギャップの値が設定されているので、異なる方向や配置で要素がフローする多次元レイアウトを実現できます。

多次元オートレイアウトフローの作成方法の詳細はこちらをご覧ください。

他の機能に関する考慮事項

制約

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

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

たとえば、習慣を記録するアプリがあり、各習慣に対して、習慣完了のカレンダー履歴を含むアナリティクス画面と、任意の日のメモを記録するためのパネルが装備されているとします。この画面はオートレイアウトを使用していますが、メモパネルはオートレイアウトフローを無視します。この場合、親フレームがサイズ変更された場合にメモパネルが正常に応答するように、下と左右の制約設定を使用できます。

制約の詳細についてはこちらをご覧ください。

コンポーネントとインスタンス

コンポーネントはフレームであるため、オートレイアウトを追加できます。オートレイアウトは各コンポーネントに個別に追加する必要があります。現在、オートレイアウトを一括で追加する方法はありません。

アクション	メインコンポーネント	インスタンス
垂直方向と水平方向のパディングを調整	✓	✓
間隔の調整	✓	✓
レイヤーを並べ替え	✓	✕
新しいレイヤーを追加	✓	✕
レイヤーを消去または削除	✓	(レイヤーを非表示にするのみ)

オートレイアウトを使用したプロトタイプ

オートレイアウトを使用したプロトタイプを作成する場合は、いくつか注意すべき点があります。

スマートアニメートの切り替えでは、フレームの背景は考慮されません。スマートアニメートでスライドインまたはムーブインの切り替えを使用するには、背景を追加する必要があります。通常のフレーム内に長方形を作成し、その中にオートレイアウトのフレームを配置できます。スライドインとムーブインの切り替えの詳細についてはこちらをご覧ください。

スクロールオーバーフローをフレームに適用するには、フレームの境界を超えてコンテンツを拡張する必要があります。

オートレイアウトの親の寸法はコンテンツによって決まるため、オブジェクトに合わせてサイズが変更されます。スクロールのオーバーフローを複製するには、オートレイアウトを通常のフレーム内に配置する必要があります。

テキストレイヤー、最大高さ、最大行数

テキストレイヤーに、最大高さと最大行数の両方を設定することはできません。最大高さを追加すると、最大行数が自動に設定されます。最大行数を数値に設定すると、レイヤーの最大高さ設定が解除されます。

最大行数の詳細についてはこちらをご覧ください。

テキストのサイズ変更

テキストレイヤーには独自のサイズ変更プロパティもあります。これは、オートレイアウトのフレーム内で有益な結果を出す可能性があります。

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

テキストのサイズ変更の詳細についてはこちらをご覧ください。

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

基本的なショートカット

アクション	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 + 垂直方向または水平方向の辺をダブルクリック

リソース

記事

• 記事: デザインでオートレイアウトを切り替える
  オートレイアウトを使用する準備はできましたか？フレームとレイヤーにオートレイアウトを使用して、レスポンシブなデザインを作成する方法を学びましょう。
• 記事: オートレイアウトで水平フローまたは垂直フローを使用する
  オートレイアウトの水平フローと垂直フローで利用可能なプロパティについて学びましょう。
• 記事: オートレイアウトフローでグリッドを使用する
  グリッドレイアウトフローで列、行、セルを操作する方法を学びましょう。
• 記事: 多次元オートレイアウトフローを作成する
  複数のオートレイアウトフローを組み合わせて、完全にレスポンシブなコンポーネントと画面を構築しましょう。

プロジェクトと実践的な学習

• Figmaチュートリアルプレイリスト: 柔軟なデザインとコンポーネントの作成を学ぶ
  このプレイリストには、オートレイアウトの基本、オートレイアウトをデザインに適用する方法、練習用の実践的なチュートリアルに関するビデオチュートリアルが含まれています。
• コミュニティファイル: オートレイアウトプレイグラウンド
  オートレイアウトプレイグラウンドファイルのコピーを入手して、学習しながら練習しましょう。
• コミュニティファイル: グリッドプレイグラウンド
  グリッド オートレイアウトプレイグラウンドファイルのコピーを入手して、学習しながら練習しましょう。
• プロジェクト: オートレイアウトと制約でレスポンシブカードを作成する
  このプロジェクトでは、オートレイアウト、制約、コンポーネント、シェイプツールを使用して、ポッドキャストアプリ用のレスポンシブカードをデザインする方法を学びます。