Figma でデザインしていると、ツールを選んだり、レイヤーをまとめたりするために、何度もマウスを動かすことになります。よく使う操作をショートカットで行えるようになると、作業の流れが途切れにくくなります。
この記事では、Figma でよく使うショートカットを、目的別に Mac と Windows のキーで一覧にしました。
ショートカットの一覧を Figma の中で開く
Figma には、ショートカットの一覧を画面に表示する機能があります。 Figma のヘルプによると、Mac では Control + Shift + ?、Windows では Ctrl + Shift + ? を押すと、画面の下にショートカットのパネルが開きます。画面右下のメニューから「ヘルプとリソース」→「キーボードショートカット」を選んでも開けます。
パネルは開いたまま作業でき、使ったことのあるショートカットは色分けして表示されます。この記事に載っていないショートカットを探すときにも便利です。Figma のヘルプでは、今のところ自分でショートカットを作ることはできないとも案内されています。
ツールを切り替える
ツールの切り替えは、Mac も Windows も同じキー1つで行えます。 まず覚えたいのがこのグループです。
| キー | ツール |
|---|---|
| V | 移動（選択） |
| F または A | フレーム |
| R | 長方形 |
| O | 楕円 |
| L | 線 |
| P | ペン |
| T | テキスト |
| K | 拡大縮小 |
| I | スポイト（色を拾う） |
| H | 手のひら（画面を動かす） |
| C | コメント |
スペースキーを押している間は、一時的に手のひらツールになり、ドラッグで画面を動かせます。
基本の編集
| 操作 | Mac | Windows |
|---|---|---|
| 元に戻す | Command + Z | Ctrl + Z |
| やり直す | Command + Shift + Z | Ctrl + Shift + Z |
| 複製 | Command + D | Ctrl + D |
| ドラッグしながら複製 | Option を押しながらドラッグ | Alt を押しながらドラッグ |
| 名前を変える | Command + R | Ctrl + R |
| プロパティをコピー | Option + Command + C | Ctrl + Alt + C |
| プロパティを貼り付け | Option + Command + V | Ctrl + Alt + V |
プロパティのコピーと貼り付けを使うと、塗りや線、効果などの見た目を、別のレイヤーにそのまま移せます。
レイヤーを整理する
| 操作 | Mac | Windows |
|---|---|---|
| グループ化 | Command + G | Ctrl + G |
| グループ解除 | Command + Shift + G | Ctrl + Shift + G |
| 選択したものをフレームで囲む | Option + Command + G | Ctrl + Alt + G |
| 表示・非表示 | Command + Shift + H | Ctrl + Shift + H |
| ロック・ロック解除 | Command + Shift + L | Ctrl + Shift + L |
| 1つ前面へ | Command + ] | Ctrl + ] |
| 1つ背面へ | Command + [ | Ctrl + [ |
選択したものをフレームで囲むショートカットは、Figma のヘルプのフレームの記事でも案内されています。グループよりフレームのほうが、あとからオートレイアウトをつけたり、中身をはみ出さないようにしたりしやすいので、よく使います。
オートレイアウトとコンポーネント
オートレイアウトとコンポーネントは、Figma で効率よくデザインするための中心になる機能です。
| 操作 | Mac | Windows |
|---|---|---|
| オートレイアウトを追加 | Shift + A | Shift + A |
| コンポーネントを作成 | Option + Command + K | Ctrl + Alt + K |
Figma のヘルプでは、レイヤーを1つ以上選んで Shift + A を押すと、オートレイアウトを追加できると説明されています。ボタンやリストのように、中身の量に合わせて大きさが変わる部品を作るときに使います。
表示の拡大・縮小
| 操作 | キー |
|---|---|
| すべてが収まるように表示 | Shift + 1 |
| 選択したものに合わせて表示 | Shift + 2 |
| 100% で表示 | Shift + 0 |
| 拡大 / 縮小 | + / -（Command・Ctrl を押しながらのスクロールでも可） |
Shift + 2 で選択したものに合わせて表示し、作業が終わったら Shift + 1 で全体に戻る、という使い方をすると、画面の移動が速くなります。
知っておくと便利な操作
- 距離を測る：レイヤーを選んだ状態で Option（Windows は Alt）を押しながら別のレイヤーにカーソルを合わせると、間の距離が表示される
- 重なったレイヤーを選ぶ：Command（Windows は Ctrl）を押しながらクリックすると、グループやフレームの中のレイヤーを直接選べる
- 比率を保って変形する：Shift を押しながら大きさを変えると、縦横の比率を保てる
ショートカットを覚えるコツ
全部を一度に覚える必要はありません。 まずはツールの切り替え（V・F・R・T）と、Shift + A、Shift + 1・2 の3つのグループから始めると、作業の速さの違いを実感しやすくなります。
覚えるときは、マウスに手を伸ばす前に「この操作のショートカットは何だったか」を思い出す習慣をつけると、自然に身につきます。Figma のショートカットを、ゲーム感覚で繰り返し練習できるサイトもあります。
ショートカットを覚えるコツはショートカットキーの覚え方、Windows・Mac・Excel・VS Code のショートカットはショートカットキー一覧で紹介しています。
まとめ
- ショートカットの一覧は、Mac は Control + Shift + ?、Windows は Ctrl + Shift + ? で開ける
- ツールはキー1つで切り替えられる（V：移動、F：フレーム、R：長方形、T：テキスト など）
- Shift + A でオートレイアウト、Option + Command + K（Ctrl + Alt + K）でコンポーネント
- Shift + 1 で全体、Shift + 2 で選択したものに合わせて表示
Figma のショートカットは、UI の更新などで変わることがあります。迷ったときは、Figma の中でショートカットのパネルを開いて確かめてください。
