修正に負けないデータ作り

魔法のゴム箱「オートレイアウト」

例えば「ボタン」を作る時。
普通に四角形の上に文字を置いただけだと、文字数が増えた時、四角形はそのままなので文字がはみ出してしまいます。
毎回、手作業で四角形を伸ばすのは面倒ですよね？

そこで使うのが「オートレイアウト (Auto Layout)」です。
これは、中身に合わせて勝手に伸び縮みする「ゴムの箱」のようなものです。

箱の中の「空気」を操る

オートレイアウトにした時、右パネルに見慣れない項目が出てきます。
この2つを覚えるだけで、レイアウトが自由自在になります。

• パディング (Padding)： 箱のフチと中身の間の「クッション材」
• ギャップ (Gap)： 中身同士の「隙間」

伸縮自在の「ハグとフィル」

ここがFigma最大の難関であり、最も便利な機能です。
オートレイアウトの中身がどういうサイズになるか、2つの性格を選べます。

• ハグ (Hug)： 中身（文字）に合わせて、自分サイズを縮める「抱きしめタイプ」。
• フィル (Fill)： 親の箱に合わせて、自分が目一杯広がる「空気読みタイプ」。

分身の術「コンポーネント」

Webサイトには、同じデザインのボタンやカードが何十個も出てきます。
それらをコピー＆ペースト（コピペ）で作ってしまうと、後で「やっぱり赤色に変えて」と言われた時に、全部ひとつずつ直すことになります。

それを防ぐのが「コンポーネント（部品化）」です。
オリジナル（親）をひとつ作って、残りはその分身（子）にしておけば、親を変えるだけで全員変身できます。