Figmaで記事一覧を整列するに時に使える便利な機能

Figmaを使い始めた時、画像や図形を並べるときに1つずつ上下左右の余白を調整して配置していました。みなさんも同じような経験ありませんか？以前、会社の先輩にオートレイアウトという機能を教えていただきましたので、みなさんにも紹介させていただきます。

このオートレイアウトという機能を使えば、もっと効率よく作業できるようになります。
まずはサンプルとして、ブログの最新数件を表示するよくあるデザインを作っていきます。
サムネイル画像と日付とブログタイトルがセットになった要素を整列して並べます。

­

1. オートレイアウトを適応する方法

オートレイアウトのサンプルで用意したものをコピー＆ペーストで2つにし、画面右側のオートレイアウトの＋ボタンを押します。これで、オートレイアウトが適用されました。

­­

2. オートレイアウトの機能

オートレイアウトにすると、要素ごとの幅の調整や、配置などが簡単にできるようになります。それぞれのオートレイアウトの機能について説明していきます。

要素間の余白の調整

オートレイアウト機能を使用することで、要素間の余白を調整できるようになります。
オートレイアウトの上から2段目の左端の ]|[ にある数字が要素間の余白です。今回は、左右の余白を24pxに設定しました。

折り返し機能

折り返し機能を使うことで、青枠のエリア幅に合わせて自動で折り返すことができます。
青線のエリア幅を縮めても崩れることなく、エリア幅をはみ出す場合は自動で折り返してくれます。今回は要素を6つに増やし、3つ以上になると折り返すようにしました。

並び替え

順番を入れ替えるなどの修正作業があった場合も簡単にできます。わかりやすいように、上のメニューバーにある画像/動画を配置で他の画像に入れ替えました。

2つ目の要素を1つ目に持っていきたい場合、それをドラッグすることによって要素を入れ替えることができます。

まとめ

以上、オートレイアウトの設定の仕方でした。みなさんもこの機能をぜひ使ってみてください。
今後もFigmaの便利な機能などご紹介していきます。