Figmaでオートレイアウトを無視して要素を自由に配置する方法

今回は、オートレイアウトのフレーム内で、自動整列を無視してオブジェクトを絶対座標で配置する機能「絶対位置（absolute position）」の紹介です。表示エリアの都合上、同じフレーム内に要素を配置したい場合にオートレイアウトを解除しなくても良くなります。

この記事のターゲット

• Figmaのオートレイアウトのフレーム内で要素を自由に配置したい方

• Figmaで余計なフレームを使わずに効率的に配置する方法が知りたい方

絶対位置（Absolute potision）の使い方

オートレイアウトが設定されたフレームに、自動配置を無視して要素を配置してみたいと思います。

今回はデモとして、要素が縦に自動配置されるようオートレイアウトを設定したカード形式でのUIの右上にボタンを配置してみようと思います。

以下は普通に配置を試している様子です。右上に配置したくても、フレーム内に入れると必ずオートレイアウトのルールに従って配置されてしまいます。

では、絶対位置で配置してみようと思います。やり方は以下の通りです。

1. フレーム内に一旦絶対位置で配置したいオブジェクトを入れる

2. 絶対位置に配置したいオブジェクトを選択した状態で、右ペインのY座標の右にある括弧で囲われたプラスのようなアイコンをクリック

3. フレーム内で好きな場所に配置

実際に操作している様子は以下の通りです。

すると、オートレイアウトを無視してフレーム内の自由な位置に配置できるようになります。座標をマイナスにすると、フレームの枠を超えた位置にも配置できます。

おまけ：フレームのサイズ変更に合わせて要素を追従する

「絶対位置」で要素をそのまま配置した場合、デフォルトでは左上を基準に位置が固定されているため、フレームの幅や高さが可変しても同じ位置にとどまり続けます。

今回のカード形式のUIの場合、カードのサイズ変更に伴ってボタンの位置も追従するのが期待する挙動だと思います。

今回の場合は、ボタンを選択している状態で右ペインの「制約」の「左」が選択されている部分を「右」に変更することで、カードの右上を基準に位置が固定され、結果的に追従するようになります。

この記事を読んだ方におすすめの記事

Figmaの画面レイアウトや配置に関する機能のまとめ

FigmaでUIや画面のレイアウトを設計する際に便利な機能やテクニックのまとめです。 ... 続きを読む

Figmaでテキストを使った便利なテクニック集

今回はFigmaでテキストを扱い際に便利なテクニックやプラグインを紹介します。デザイナーだけでなく、エンジニアやUXライターやマーケターなど、Figmaでコラボレーションする際にテキストを編集する際にご活用ください。 ... 続きを読む

Figmaでクリックするとメニューが開くプルダウンボタン

今回はFigmaのプロトタイプ（Prototype）機能を利用して、クリックするとメニューが開くアニメーションを適用したボタンの作り方とサンプルファイルの紹介です。 ... 続きを読む