プロパティパネルの上部には、並べ替えボタンと配置ボタンがあります。 その下には、デザインで要素の位置とサイズを直接操作する機能があり、幅、高さ、回転を変更したり、X軸とY軸の位置を変更することができます。

https://images.prismic.io/uxpincommunity/de0d7c6bd5a8ae464692dec5cc3404197159141e_positionsanddimensions_1_alignpanelx2.jpg?auto=compress,format

プロパティパネルの上部にある並べ替えボタンと配置ボタンを使用してみましょう。

位置の固定

要素の固定位置は、レイヤーを定義された位置に設定することができます。これにより、UXPin上でズームが100%に設定されている場合、プレビューでページをスクロールした場合もヘッダー、フッター、メニューなどが規定の位置に固定されます。要素を固定位置に設定するには、要素を選択し、プロパティパネルでピンアイコンをクリックします。(下の画像参照)

https://images.prismic.io/uxpincommunity/da397978-77e2-4bb3-aa03-82d044b0a34d_pinned.png?auto=compress,format&rect=0,0,1504,660&w=1504&h=660

アンカーポイント

サイズ変更や移動などの要素の操作は、アンカーポイントという点に基づいて行われます。

デフォルトでは、この点は要素の左上隅にありますが、プロパティパネルのサイズ値の横にあるアンカーポイントロケータを使って、別の場所に移動させることができます。各四角は、バウンディングボックス上の点を示します。例えば、バウンディングボックスの左下隅に移動するには、アンカーポイントロケータで左下の四角をクリックします。

<aside> 🖇️ 備考

アンカーポイントに関連する要素のサイズ変更は、inputのサイズを手動で変更したとき、inputをドラッグまたはサイズ操作で要素のサイズを変更したときに機能します。

</aside>

https://uxpincommunity.cdn.prismic.io/uxpincommunity/da4201cf-0717-4c20-a4ea-b6295cd0681d_anchor-point.mp4

整列と配置

整列とは、共通の縦軸または横軸に沿って要素を配置することです。整列と分配の機能は、プロパティパネルの上部にあります。一つのレイヤーを選択した状態で、キャンバスに対して整列されます。例えば、要素を左に揃える場合、一番左の要素に合わせて全てが移動します。