はじめに

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

すべてのチームまたはプランのユーザー。

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

サイズ変更、方向、絶対位置などのプロパティの詳細を参照し、オートレイアウトがどのように機能するかをご確認ください。

オートレイアウトの追加

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

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

次のいくつかの方法で、オートレイアウトを選択したフレーム、コンポーネント、またはコンポーネントセットに追加できます。

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

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

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

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

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

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

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

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

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

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

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

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

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

オブジェクトの複製

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

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

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

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

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

オブジェクトの削除

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

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

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

オートレイアウトの削除

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

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

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

その他の考慮事項

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

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

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

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

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

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

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

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