日本一簡単なフィグマのオートレイアウト解説

オートレイアウトとは2019年に新たに追加されたフィグマの便利機能です。ボタンの中の文字サイズに合わせてボタンサイズを変えるだけでなく応用するととっても便利な機能です。Figma公式では英語チュートリアルしかないので、このブログがどなたかのお役に立てたら嬉しいです。

オートレイアウト(Auto Layout）機能を使えるユーザー

オートレイアウトは、フレームに追加できます。オブジェクトにオートレイアウトを追加すると、自動で一回り大きいフレームが作成されます。

「右のコントロールパネルからのオートレイアウトの＋」または「ショートカット」で追加します。

絶対使いこなしたいショートカット
新規フレーム作成：AまたはF＋マウスで四角をドラッグ
既存の四角をフレームに入れる：オプション+コマンド＋G
オートレイアウトを追加：シフト＋A

文字やアイコンの長さに応じてボタンのサイズが自動的に変更されます。ボタン基本設定である隙間の幅や高さは右のコントロールパネルから変更できます。アイコンと文字の順番を変えることもドラッグだけで可能です。

一つ一つの要素を適切な場所に移動する代わりに、単純なドラッグアンドドロップでオブジェクトを並べ替えられます。

実稼働環境の場合と同じように、コンテンツを簡単に編集したり、自動レイアウトフレームの内外に移動したりできます。