Figmaのオートレイアウトで使える便利なテクニック集

今回は、Figmaでオートレイアウト（Auto layout）機能を使う時に、知っていると便利なテクニックを紹介します。知っているかどうかで生産性やアウトプットのスピードが大きく変わるものばかりですので、ぜひ試してみだください。

この記事のターゲット

• Figmaのオートレイアウトを応用した使い方が知りたい方

• Figmaのオートレイアウトの便利なTipsが知りたい方

オートレイアウトの基本

オートレイアウトの基本的な使い方は以下の記事で紹介しています。

Figmaのオートレイアウトの基本的な使い方

今回は、Figmaを代表する機能のひとつである「オートレイアウト（Auto layout）」の基本的な使い方を、シンプルな画面レイアウトを実際に作りながら紹介します。また、この記事内で作成した画面レイアウトのサンプルファイルを公開・配布していますので、自由にご利用ください。 ... 続きを読む

オートレイアウトの便利なテクニック

オートレイアウトで使えるテクニックやTipsです。

Wrap（折り返す）

オートレイアウトの幅に応じて要素の折り返しを設定する方法です。

Figmaのオートレイアウトで折り返しできる「Wrap」の使い方

今回はFigmaのオートレイアウト（Auto layout）の機能のひとつである折り返し（Wrap）の使い方を紹介します。これにより、アプリケーションなどの画面レイアウトで横幅が成り行きで決まる場合に自動で折り返しされるようになるため、レスポンシブ対応などで便利です。 ... 続きを読む

Absolute position（絶対位置）

オートレイアウトの自動整列を無視して要素を配置する方法です。

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

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

Canvas Stacking（キャンバススタッキング）

オートレイアウト内の要素の重なりを入れ替える方法です。

Figmaでオートレイアウト上の要素の重なり順を逆転する方法

今回は、Figmaのオートレイアウトで、要素の重なり順を指定できる機能「キャンバススタッキング」の紹介です。プルダウンボタンなど、フレームから飛び出ている要素を配置する場合に、オートレイアウト上の他の要素の下に潜ってしまうケースなどで、意図した重なり順に指定できるようになります。 ... 続きを読む

Nudge amount（ナッジ）

オートレイアウトに適用される初期値を設定する方法です。

FigmaのPaddingやカーソル移動のデフォルト値を設定する方法

今回はFigmaでオブジェクトをカーソル移動するときや、Auto layout使用時にPaddingに設定される値（10px）などの初期値を変更する方法を紹介します。デザインシステムなどを利用していて4や8の倍数を基準にしたい場合などにおすすめです。 ... 続きを読む

その他画面レイアウトに関するTips

Figmaの基本的なレイアウトに関する機能を使ったテクニックの紹介です。

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

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