Layout(オートレイアウト)は、近年Webデザインやスマホアプリのデザインでは当たり前のように取り入れられるようになったレスポンシブデザインへの柔軟な対応や、要素の増減にともなっておきるサイズ変更などを、Figma上で再現することができる機能です。HTML/CSSやSwiftUIでの優れたレイアウトの実行環境に近い形で、Figma上でデザイン作成を行うことができます。Layout機能とは、テキストに合わせてボタンのサイズを自動で調整してくれたり、リストを作成した際に要素の入れ替え操作を簡単にしてくれる機能です。こちらをご覧ください。これまでであれば、テキストの長さによって何種類かのボタンを用意しなければなりませんでした。リストにおいては、項目が1つ増えたり減ったりすれば、その分枠全体の調整が必要でした。具体的にどんなことができるのか、見ていきましょう。ボタンテキストの長さによって、ボタンサイズを自動で調整してくれます。Layoutがあります。Layout機能を加えることができます。リストリスト構造になっている要素の位置変更、要素を削除したい、ときに自動で調整してくれます。Layout」を選択して下さい。Layout機能が追加されます。」のマークが表示れます。このパネルで左右に移動できます。このような縦方向のリストもオートレイアウトで自動調整可能です。3.パディングの設定オートレイアウトではパディングの調整をすることもできます。Items」は要素の間隔調整このようにボタンや要素に対してpaddingの調整をすることができます。4.向きの設定オートレイアウトでは向きの方向を変えることもでます。設定方法パネルに「Horizontal」「Vertical」の項目があります。Horizontalは横Verticalは縦に変更することができます。5.要素を追加する続いて要素の追加についてです。このように、ボタンにアイコンを追加したいときに使えそうです。こちらも設定は簡単で、アイコンクリック後、「Cmd」を押しながらボタンにアイコンを追加してください。6.応用ボタンとボタンの移動このようにボタン間での移動もオートレイアウトを使うと自動調整してくれます。この作業をオートレイアウトなしで行うと、ボタンとボタンを移動して調整して、またバランスを整えて、という作業が発生します。→この移動だけで簡単に行ってくれます。フレームの調整このようにボックスの中のテキストも自動で調整してくれます。この場合は、1のFrameと2のButtonの2つにオートレイアウトをかける必要があります。することで、Frame内の要素とButton内の要素は自由にテキストを変更することができます。画像を追加しても自動調整してくれます。ボタン、テキストは左、中央、右揃えにすることもできます。レイヤーの不透明度を0%にするオートレイアウトでは1つの要素を削除すると、下の画像のようにそれに合わせて親要素は余白を自動調整してしまいます。場合によっては、余白を維持したままでデザインの調整がしたい場合があるかもしれません。その時は、レイヤーの不透明度を0%にすることで、余白を維持したままデザイン調整することが可能となります。コンポーネント化オートレイアウトはコーポネン化した要素でも使用することができます。コンポーネント化されているパーツにもオートレイアウトを加えることで、デザイン調整が更に便利に簡単にできるようになります。Layout機能の説明でした。実際にデザイン作成する際やUIパーツを作る際に、ここのテキストをもっと増やしたい、減らしたい、ボタンを増やしたい、アイコンを変更したいといった要望は、業務で必ず発生すると思います。これまでであれば、そんな調整が入る度デザインを調整し、他要素とのバランスを見ながら調整を行っていました。Layoutを使用することで無駄なコンポーネンを増やさず、管理のしやすく、スマートな作業効率を目指していきましょう。