Figma Scaleツールとrem/emを活用した、レスポンシブデザインの効率化

Arganoの麻生です。
Figmaの拡大縮小とframeの作成時に単位（rem,em）を意識するとレスポンシブデザインが効率的に行えるのでそちらの紹介をします。

基本操作：Scaleツール

Mac / Windows 共通: K キーを押す

項目	Scaleツール（K）の特徴	注意点
挙動	余白（padding）、角丸、線の太さなども比率を保ったまま一括で変わる	特定の要素だけを固定して拡大縮小することができない
テキスト	フォントサイズも比率通りにスケールされる	倍率によっては、意図しない小数点が発生しやすい
用途	コンポーネントやアイコンの拡大・縮小に最適	枠だけを広げたい場合には不向き（その場合はVキー）

通常の拡大縮小では「枠のサイズ」しか変わりませんが、K キーによる拡大縮小はフォントサイズ、余白（padding）、角丸、線の太さすべてを比率通りに変更することが可能です。

これは、実装で言うところのすべての数値を em で指定し、font-size だけを変更して全体を制御するという挙動そのものです。

display: inline-flex;
padding: 14px 24px;
align-items: flex-start;
border-radius: 8px;
background: #1F57B1;
color: #FFF;
font-size: 16px;

例えば、ベースフォントを 16px から 14px に落として、UI全体をスマホ向けに縮小したい場合、Figmaの倍率入力欄（Scale）に計算式を直接入力します。

scale

入力する計算式: 14/16

display: inline-flex;
padding: 12.25px 21px;
align-items: flex-start;
border-radius: 7px;
background: #1F57B1;
color: #FFF;
font-size: 14px;

これを入力して確定すると、そのFrame内のすべての数値（文字サイズ、余白、コンポーネントサイズ）が自動的に 0.875倍になります。デザインのバランス（比率）を完全に保ったまま、一瞬でサイズ展開が完了します。

エンジニアに「実装に易しい」と思ってもらうためには、デザインデータを作る段階で rem や em の概念を取り入れておくのが理想的です。

デザイン時に em（あるいは em 的な比率）を意識する最大の理由は、文字サイズを基準にパーツ全体を連動させられるからです。

em とは: その要素のフォントサイズに対する相対サイズ。

例えば、padding: 1.5em; と指定されたボタンを実装する場合：文字が 16px なら、余白は 24px。文字を 14px に変えれば、余白も自動で 21px に縮小。

Figmaで K キーを使って調整した時の「心地よい比率」を、そのままコードに落とし込めるのが em の魅力です。

display: inline-flex;
padding: 0.875em 1.5em;
align-items: flex-start;
border-radius: 0.5em;
background: #1F57B1;
color: #FFF;
font-size: 1em;

rem (root em): ルート（通常は16px）に対する相対サイズ。全体の文字サイズの基準に。 em: その要素に対する相対サイズ。コンポーネント内の余白やアイコンサイズに。

16pxをベースとした場合、よく使うフォントサイズが何 em になるのかを知っておくと、Figma上での数値管理もスムーズになります。

※補足: CSSの letter-spacing は em で指定することが一般的です。Figmaの「1%」は CSSの「0.01em」に相当します。

Figmaの便利な機能を使いつつ、その裏側にあるCSSの単位（rem/em）を意識することで、「見た目が美しい」だけでなく「作りやすい」デザインを作成できます。

・全体の拡大縮小は Kキーを活用
・倍率は 14/16 などの計算式で指定する（変えたいフォントサイズ ÷ 要素のベースのフォントサイズ）
・文字サイズを変えれば、パーツ全体が綺麗に拡大縮小される構造（em）を意識する

これらを意識して、デザイン作業をより効率化していきましょう。