グループまたは選択した要素のグループにAuto Layout（オートレイアウト）プロパティを追加することができます。これにより、デザインのサイズを自動的に変更、フィット、塗りつぶしを行うことができます。例えば、要素のサイズを自動的に変更したり、テキストラベルに合わせてボックスが調整されるため、ボタンを作成する場合などに非常に便利です。

オートレイアウトを使えば、グループ内の要素の位置を入れ替えるだけで、適切なギャップ、配置、分布などを設定することができます！

使い方

  1. キャンバスに要素を追加します。
  2. オートレイアウトを追加したい要素を選択します。
  3. 右側にあるオートレイアウトの項目を選択して、機能を使い始めることができます。

https://uxpincommunity.cdn.prismic.io/uxpincommunity/5c890701-80b1-4195-933b-195cd7a1bc1b_auto_layout_01_ChooseAL.mp4

オートレイアウト機能の使い方は以下をご参照ください。

<aside> 🖇️ 備考

現在、クロップされた(cropped) グループとキャンバスの自動レイアウトはまだサポートされていません。

</aside>

方向 (Direction)

オートレイアウトフレームを縦に並べるか横に並べるかを設定します。

https://uxpincommunity.cdn.prismic.io/uxpincommunity/8039b897-9412-4c48-ae1f-721a0d9a4c43_auto_layout_02_Direction.mp4

配置 (Distribute)

要素の分布を変えて、交差軸に沿った配置を設定する。

https://uxpincommunity.cdn.prismic.io/uxpincommunity/708d1b64-067e-41a8-96bf-f9cf051af8df_auto_layout_03_Distribute.mp4