デザインへのオートレイアウトの追加

オートレイアウトを使用すると、レスポンシブデザインを作成し、いっぱいに拡大したり、収まるように縮小したり、コンテンツをリフローしたりできます。例:

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

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

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

オートレイアウトを追加

オートレイアウトはフレームまたは選択したオブジェクトに追加できます。これには、次が含まれます。

• 新しいフレームまたは空のフレーム
• 既存のコンテンツを含むフレーム
• コンポーネントとコンポーネントセット
• レイヤーやオブジェクトのグループまたはその他の選択範囲

選択したフレームまたはコンポーネントにオートレイアウトを追加する方法は複数あります。

• キーボードショートカット⇧ Shift Aを使用する
• 右側のサイドバーで、フレームを選択した状態でオートレイアウトの横にあるをクリックします
• フレームまたはオブジェクトで右クリックし、[オートレイアウトを追加]を選択する

オートレイアウトを使用すると、ネストされたオブジェクトは自動的に間隔を空け、コンテナを埋め、中央揃えに配置されます。オートレイアウトのさまざまなプロパティ → の詳細を見る

オートレイアウトを提案

オートレイアウトを提案すると、ボタンをクリックするだけでデザインをレスポンシブにすることができます。

[オートレイアウトを提案]使用すると、Figmaは、フレームやコンポーネント内でオートレイアウトのフレームに配置するオブジェクトを判断し、オートレイアウトのフレームを必要な数だけ追加して、デザイン全体をレスポンシブにします。こういったオートレイアウトのフレームは、デザインの配置を維持しながら一度に作成されます。

これにより、オートレイアウトをフレームごとに追加するという面倒な作業を行う必要がなくなり、時間を節約できます。

このオプションには、複数の方法でアクセスできます。

• 次のキーボードショートカットを使用します。
  • Mac: ⌃ Control ⇧ Shift A
  • Windows ⌃ Control Alt ⇧ Shift A
• フレームまたはオブジェクトを右クリックして[その他のレイアウトオプション] > [オートレイアウトを提案]に移動する
• アクションメニューで[オートレイアウトを提案]を選択する

このアクションを使用すると、作成され、ネストされたオートレイアウトのフレームは、左パネルのレイヤーセクションに青い点で表示されます。

オブジェクトの追加、編集、削除

オートレイアウトのフレームへのオブジェクトの追加

オートレイアウトのフレームには、任意のレイヤーまたはオブジェクトを追加できます。

1. オブジェクトをクリックしてオートレイアウトのフレーム上にドラッグします。
2. 青色のインジケーターを使用して、オブジェクトを配置する場所を選択します。

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

オートレイアウトのフレームは別のオートレイアウトのフレーム内にネストできます。これにより、水平レイアウトと垂直レイアウトを組み合わせて複雑なインターフェイスを作成できます。

オートレイアウトのフレームをネストすると、ネストされたフレームには親プロパティと子プロパティの両方が含まれます。

以下の例では、オートレイアウトには4つのレベルがあります。

1. ボタン: 各ボタンは水平オートレイアウトです。このため、ラベルのテキストを変更すると、ボタンが拡大したり縮小したりします。
2. ボタン行: 次に、両方のボタンを別の水平オートレイアウトに追加します。これにより、兄弟のコンテンツに変更を加えるとオブジェクトが対応します。
3. 投稿: 次に、投稿内の他のオブジェクトとともにボタンを垂直オートレイアウトに追加します。これらのオブジェクトには、説明、画像、ユーザーのプロフィールが含まれます。
4. タイムライン: 3つを垂直オートレイアウトに追加して、タイムラインを作成しました。このオートレイアウトフレームは、キャンバス上の最上位のフレームです。

オートレイアウトのフレームはいくつかの方法でネストできます。

• オートレイアウトのフレームを既存のオートレイアウトのフレームにドラッグする
• 選択したオートレイアウトのフレーム(およびその他のオブジェクト)の周囲に新しいオートレイアウトのフレームを作成する

1. オートレイアウトのフレームと、含めるその他のレイヤーを選択します。
2. キーボードショートカット: ⇧ Shift Aを使用して、オートレイアウトを追加します。
3. 選択範囲の周囲にフレームが作成され、オートレイアウトが追加されます。

オブジェクトの複製

既存のオブジェクトを複製してオートレイアウトに追加できます。複製は元のオブジェクトの右(水平)または下(垂直)に追加されます。

1. オートレイアウトのフレームで子オブジェクトを選択します。
2. 次のキーボードショートカットを使用してこれを複製します。
   • Mac: ⌘ Command D
   • Windows: Ctrl D

オブジェクトの配置または並べ替え

オートレイアウトのフレームに表示されるオブジェクトの順序を変更できます。これは、メインコンポーネント、またはコンポーネント外にあるオートレイアウトのフレームでのみサポートされています。

1. 子オブジェクトを選択します。レイヤーがネストされている場合は、次の修飾キーを使用して子を選択する必要があります。
   • Mac: ⌘ Command
   • Windows: Ctrl
2. オブジェクトを並び替える方法にはいくつかあります。
   • キーボードの矢印キーを使用して、オブジェクトを新しい位置に移動する
   • オブジェクトをクリックして新しい位置にドラッグする

オブジェクトの削除

メインコンポーネントまたはオートレイアウトのフレームからオブジェクトを削除するには、次の手順に従います。

• オブジェクトをオートレイアウトのフレームの外にドラッグします。
• をクリックして、レイヤーの表示/非表示を切り替えます
• オブジェクトを選択し、DeleteキーまたはBackspaceキーを押します。

インスタンスからレイヤーまたはオブジェクトを削除することはできません。削除しようとすると、レイヤーは削除されず、レイヤーの表示/非表示が切り替えられるだけです。

オートレイアウトの削除

オートレイアウトを削除すると、フレームの通常のプロパティにアクセスできるようになります。

オートレイアウトを削除する方法にはいくつかあります。

• フレームを右クリックし、[オートレイアウトの削除]を選択する
• 右側のサイドバーで、オートレイアウトの横にあるをクリックします
• 次のキーボードショートカットを使用する:
  • Mac: ⌥ Option⇧ ShiftA
  • Windows: Alt⇧ ShiftA

その他の考慮事項

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

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

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

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

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

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

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