オートレイアウトとは2019年に新たに追加されたフィグマの便利機能です。ボタンの中の文字サイズに合わせてボタンサイズを変えるだけでなく応用するととっても便利な機能です。Figma公式では英語チュートリアルしかないので、このブログがどなたかのお役に立てたら嬉しいです。
目次
オートレイアウト(Auto Layout）機能を使えるユーザー
- 全てのプランの人
- 編集可能なユーザー権限の人
追加の仕方
オートレイアウトは、フレームに追加できます。オブジェクトにオートレイアウトを追加すると、自動で一回り大きいフレームが作成されます。
「右のコントロールパネルからのオートレイアウトの＋」または「ショートカット」で追加します。
オートレイアウトの３大出来ること
１、ボタンのサイズを変更
文字やアイコンの長さに応じてボタンのサイズが自動的に変更されます。ボタン基本設定である隙間の幅や高さは右のコントロールパネルから変更できます。アイコンと文字の順番を変えることもドラッグだけで可能です。
２、オブジェクトの並び替え
一つ一つの要素を適切な場所に移動する代わりに、単純なドラッグアンドドロップでオブジェクトを並べ替えられます。
３、コンテンツサイズの変更
実稼働環境の場合と同じように、コンテンツを簡単に編集したり、自動レイアウトフレームの内外に移動したりできます。
機能
Direction（並べる方向）
Padding (ボタン内の余白)
Constraints (レスポンシブ)
コメント