FigmaのAuto Layoutで楽々サイズ可変コンポーネント

はじめに

Game8のサイトは、いわゆるレスポンシブな挙動を採用しておらず、フレキシブルな画面サイズの変化に対応しない形になっています。しかし、私がFigma上でデザイン制作を行う場合には、コンポーネントの幅を可変しやすい構成で制作を行います。そのために大いに役立つ機能がオートレイアウトです。

オートレイアウトが最高な理由

ビューサイズの差分の制作が楽

Game8.jpを例とすると、Game8ではSPビューのターゲットデバイスのサイズを幅375pxとしています。日本での主要なデバイス幅は375px,390px,414pxが上位を占めており、その中でも小さな幅をターゲットとして文字数超過による崩れを避けられるようにするためです。
しかしPCビューで記事が表示されるメインカラムの幅は440px、サイドカラムの幅はそれぞれ220、300pxといずれのデバイス幅とも異なります。
これをFigma上で再現する場合に、Figma上でコンポーネントをサイズ可変が容易にできる状態で作成しておくと、それぞれのビューの制作時間を短縮することができます。

サイズや余白の調整や統一が楽

オートレイアウトでサイズを指定する場合には、最小要素（主にテキストや画像）のサイズを決めた後は、マージンを数値で指定して最終的なサイズが決まります。このため2,4,8の倍数ルールを徹底しやすく、統一されたコンポーネントを制作することができます。当然、コンポーネント間の余白にも適応することができるため、ページ全体のレイアウトもバランスを取りやすくなります。

構成のポイント

ここに今は昔のTwitterコンポーネントがあります。こんな感じで幅を広げても崩れないコンポーネントにしましょう。

全てのフレームをオートレイアウト化する

全てのフレームをオートレイアウトで構成します。GroupになっているものはShift+Aでオートレイアウト化します。Groupになっていない複数の要素を選択した状態でShift+Aしても勝手にまとまってくれます。

要素とフレームの幅指定を適切に

オートレイアウト化したフレームの幅指定は、ほぼ全て拡大に指定しています。画像やアイコンなど、縦横比を固定したいものを除き、テキスト領域やラッパーとなるフレームは「拡大／FillContainer」を指定します。最も親要素となるフレームの幅のみが固定値となる事が理想です。高さは全て内包にして、マージンや要素間の余白の数値で調整をしています。

構成のテクニック

要素が重なる場合は絶対指定

要素を重ねたい場合には、位置を絶対指定します。右のコントロールパネルの右上に、切り替えボタンがあります。この場合も親要素が拡縮した際の制約を調整することで、サイズの可変に対応することができます。

折返しでリキッドレイアウトを再現

折返しの指定をすると、カードをタイル上並べる際に自動で折り返し、リキッドレイアウトのように列数を調整してくれます。この場合は、カードのサイズを固定する必要があります。以前は1行ごとにフレーム化していましたねえ。

おわりに

昨今のデバイスサイズの多様化、モバイルフレンドリーの流れから、Webサイトはレスポンシブ対応がほぼ必要不可欠となります。Game8ではPC/SPでのみの切り替わりとなりますが、ブレイクポイントを多く設定するサイトの場合、1つのページで5パターンのサンプルを作る必要があります。そんな時に、コンポーネントをサイズ可変に耐えうるよう制作すれば、制作効率は格段と上がるでしょう。