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

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

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

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

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

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

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

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

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

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

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

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

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

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

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