Figmaで部品を拡大・縮小するときは、スケールツール(Kキー)で文字や線の太さも比率どおりに変える
普通にリサイズすると文字サイズや線の太さはそのまま残るが、Kキーのスケールツールなら中身すべてが同じ比率で変わる。
どんな問題を解決するか / いつ使うか
アイコンやボタン、カードなどをひと回り大きく(小さく)したいとき、通常のリサイズでは枠だけが伸びて、文字サイズ・線の太さ・角丸などがずれる。バナーのサイズ違いを作るときや、部品をサムネイル用に縮小するときに使う。
やり方
- 対象のフレームやグループを選ぶ。
Kキーでスケールツールに切り替える。- ハンドルをドラッグするか、右側のパネルで倍率や幅を入力する。文字サイズ・線の太さ・効果なども一緒に変わる。
- 終わったら
Vキーで通常の移動ツールに戻る。
注意点
- 文字サイズが 13.5px のような半端な値になることがある。デザインシステムの文字サイズに合わせたい場合は、あとで値を整える。
- オートレイアウトの余白も一緒に倍率がかかるので、トークンの値から外れていないか確認する。
出典
- @wokobo_net post