こんにちは！WEBデザイナーの冨田です。
「Figmaをもっと速く扱いたい」「マウス操作ばかりで作業が進まない」そんな方へ。
今回は、Webデザイン実務で本当に使えるショートカットキーを、Macユーザー向けに18個厳選して紹介します。
少しずつ使い始めるだけで、作業スピードが確実に変わります！
コピペ系ショートカット
1. 貼り付けて置換 ⇧ + ⌘ + R
既に配置した要素を、別の要素や画像に一瞬で置き換え。
2. PNGとしてコピー ⇧ + ⌘ + C
選択したフレームをラスター画像としてコピー。
3.プロパティをコピー／ペースト ⌥ + ⌘ + C／V
塗り・線・影などのスタイル情報だけを複製。
4.塗りと線を入れ替え ⇧ + X
塗りと線を瞬時に反転。
レイアウト・構成系ショートカット
5.オートレイアウトを追加 ⇧ + A
オートレイアウトを設定する、定番操作です。
6. オートレイアウトを削除 ⌥ + ⇧ + A
設定したオートレイアウトを一瞬で解除。
7.選択要素のフレーム化 ⌥ + ⌘ + G
選択した要素をフレーム化します。
8.コンポーネントを作成 ⌥ + ⌘ + K
繰り返し使うパーツをコンポーネント化します。
9.インスタンスの切り離し ⌥ + ⌘ + B
コンポーネントとのリンクを解除。
個別編集したい時に使用します。
10.レイヤーをまとめてたたむ ⌥ + L
開きすぎたレイヤーを一瞬で閉じてスッキリ。
確認系ショートカット
11. UIの表示／非表示 ⌘ + >
左右のパネルを非表示にして、作業画面を広く確保。
※USキーボードでは「⌘ + \」、JISキーボードでは「⌘ + _」または「⌘ + >」の場合もあり。
12.カンバス全体を表示 ⇧ + 1
アートボード全体を俯瞰表示。
13. 選択アートボードを表示 ⇧ + 2
選択したフレームを中央に表示。
14.グリッドの表示／非表示 ⇧ + G
グリッドを瞬時にON／OFF。
操作・微調整系ショートカット
15.ネスト選択 ⌘ + クリック
複数グループを重ねた中でも、下層の要素を直接クリック選択。
16.大きな調整 ⇧ + ▲／▼
Shiftを押しながら矢印キーで、10px（初期設定時）の移動が可能。
17.要素の表示／非表示 ⇧ + ⌘ + H
選択要素を一時的に隠します。
18.リネーム ⌘ + R
レイヤー名を一括変更。
複数選択状態で使うと共通部分の置換も可能です。
例：「div」を「ul」にまとめて変更など、整理が一瞬で完了。
まとめ
ショートカットは「覚える」より「慣れる」もの。
何度も使ううちに、自然と手が覚えます！
Figmaは奥が深いツールですが、ショートカットを味方につけるとデザインスピードも整頓力も劇的にアップします。
今日からぜひお試しください！
