Figmaで記事のレイアウトに使える便利な機能

以前、オートレイアウトを使って、あらかじめ用意した記事の配置や間隔を自動で調整する方法を紹介しました。オートレイアウトを使うと、フレーム内の要素の配置やサイズも柔軟に設定できます。

1. オートレイアウト内を設定

まずはフレームの中に、日付・タイトル・本文・投稿者名・ボタンの各要素を追加し、オートレイアウトを適用します。（今回は縦並び、間隔10px、上揃え［左揃え］に設定しています。）

フレーム内で横並びにしたい箇所がある場合は、その要素を選択した状態でオートレイアウトを追加します。

「サイズを変更」設定で「コンテンツを内包」を選ぶと、親フレームが中のテキストなどのコンテンツのサイズに応じて、事前に設定した間隔やパディングを保ちながら、自動的にサイズを調整してくれます。

新しいコンテンツを追加しても、自動でサイズが調整されるので便利です。試しに、文章とボタンの間に製作者名を追加してみました。

制作会社名とボタンを横並びにしたい場合は、それらをオートレイアウトでまとめ、「方向：横方向」「配置：中央揃え（横の中央）」に設定します。これにより、2つの要素が横方向の中央に揃います。

制作会社名とボタンを横に並べたい場合は、それらをオートレイアウトにし、「フローを横方向」「配置を中央揃え」「間隔を自動」に設定します。すると、要素同士の間隔が自動で調整され、左右の端にきれいに配置されます。

2. フレームの要素を幅に合わせて設定する方法

要素もフレームに合わせて幅が変わるように設定できます。
フレームに合わせて調整したい要素をすべて選択し、「コンテナに合わせて拡大」を選ぶと、要素の幅がフレームに応じて自動的に調整されるようになります。

まとめ

以上、オートレイアウトを使って記事内の要素を効率よく配置する方法をご紹介しました。

オートレイアウトは一度覚えてしまえば、作業の手間がぐっと減り、見た目も整いやすくなるとても便利な機能です。Figmaでのデザイン作業に慣れていない方でも、今回の手順を参考にすればスムーズに扱えると思いますので、ぜひ実際に使ってみてください。

今後も、Figmaの機能やデザインのちょっとしたコツなど、日々の制作に役立つ情報を紹介していきます。

ぜひチェックしてみてくださいね。