FigmaでUI/UXデザイン作業をする際、ショートカットキーを使いこなすことで作業効率が劇的に向上します。マウス操作だけでは時間がかかる作業も、キーボード操作を組み合わせることで数秒で完了できます。
この記事では、Figmaでよく使うショートカットキーを、Windows・Mac両対応で分かりやすく表形式にまとめました。初心者の方からプロのUI/UXデザイナーまで、今日から使える実用的なショートカットを厳選してご紹介します。
※Figmaは「Ctrl/Command + Shift + ?」でショートカット一覧を画面に表示でき、実際に使ったショートカットがハイライトされる便利な機能があります。
よく使う基本操作のショートカットキー
デザイン作業で最も頻繁に使う基本的なショートカットキーです。
これらを覚えるだけで作業効率が大幅にアップします。
| 操作内容 | Windows | Mac |
|---|---|---|
| コピー | Ctrl + C | Command + C |
| カット | Ctrl + X | Command + X |
| ペースト | Ctrl + V | Command + V |
| 同じ位置にペースト | Ctrl + Shift + V | Command + Shift + V |
| 元に戻す | Ctrl + Z | Command + Z |
| やり直し | Ctrl + Shift + Z | Command + Shift + Z |
| 複製 | Ctrl + D | Command + D |
| すべて選択 | Ctrl + A | Command + A |
| 選択を解除 | Esc | Esc |
| コピーして同じ位置にペースト | Ctrl + Alt + ドラッグ | Command + Option + ドラッグ |
| プロパティをコピー | Ctrl + Alt + C | Command + Option + C |
| プロパティをペースト | Ctrl + Alt + V | Command + Option + V |
| 名前を変更 | Ctrl + R | Command + R |
ツール選択のショートカットキー
各種ツールを素早く切り替えるショートカットです。
UI/UXデザイン作業の基礎となる重要な操作です。
| 操作内容 | Windows | Mac |
|---|---|---|
| 移動ツール | V | V |
| フレームツール | F | F |
| 長方形ツール | R | R |
| 楕円形ツール | O | O |
| 線ツール | L | L |
| 矢印ツール | Shift + L | Shift + L |
| ペンツール | P | P |
| 鉛筆ツール | Shift + P | Shift + P |
| テキストツール | T | T |
| 手のひらツール | スペース（押しながら） | スペース（押しながら） |
| コメントツール | C | C |
| スポイト（カラー抽出） | I | I |
| スライスツール | S | S |
オブジェクト操作のショートカットキー
オブジェクトの選択・移動・変形に関するショートカットです。
| 操作内容 | Windows | Mac |
|---|---|---|
| グループ化 | Ctrl + G | Command + G |
| グループ解除 | Ctrl + Shift + G | Command + Shift + G |
| フレーム化（選択範囲をフレームに） | Ctrl + Alt + G | Command + Option + G |
| ロック／ロック解除 | Ctrl + Shift + L | Command + Shift + L |
| 表示／非表示 | Ctrl + Shift + H | Command + Shift + H |
| 1pxずつ移動 | 矢印キー | 矢印キー |
| 大きく移動（既定10px） | Shift + 矢印キー | Shift + 矢印キー |
| 最前面へ | Ctrl + Shift + ] | Command + Shift + ] |
| 前面へ | Ctrl + ] | Command + ] |
| 背面へ | Ctrl + [ | Command + [ |
| 最背面へ | Ctrl + Shift + [ | Command + Shift + [ |
| 縦横比を保って拡大縮小 | Shift + ドラッグ | Shift + ドラッグ |
| 中心から拡大縮小 | Alt + ドラッグ | Option + ドラッグ |
| 複製してドラッグ | Alt + ドラッグ | Option + ドラッグ |
オートレイアウトのショートカットキー
Figmaの強力な機能であるオートレイアウトに関するショートカットです。
レスポンシブなUIデザインに欠かせない操作です。
| 操作内容 | Windows | Mac |
|---|---|---|
| オートレイアウトを追加 | Shift + A | Shift + A |
| オートレイアウトを削除 | Alt + Shift + A | Option + Shift + A |
| パディングを編集（選択時） | プロパティパネルで調整 | プロパティパネルで調整 |
| アイテム間隔を調整 | プロパティパネルで調整 | プロパティパネルで調整 |
コンポーネント操作のショートカットキー
コンポーネントの作成や管理に関するショートカットです。
デザインシステム構築の核となる機能です。
| 操作内容 | Windows | Mac |
|---|---|---|
| コンポーネントを作成 | Ctrl + Alt + K | Command + Option + K |
| インスタンスの切り離し | Ctrl + Alt + B | Command + Option + B |
| メインコンポーネントへ移動 | なし（右クリック） | なし（右クリック） |
| インスタンスを入れ替え | なし（プロパティパネル） | なし（プロパティパネル） |
表示・ズーム操作のショートカットキー
キャンバスの表示倍率やビューを調整するショートカットです。
作業効率に直結する重要な操作です。
| 操作内容 | Windows | Mac |
|---|---|---|
| ズームイン | Ctrl + + | Command + + |
| ズームアウト | Ctrl + – | Command + – |
| 100%表示 | Shift + 0 | Shift + 0 |
| 画面に合わせる | Shift + 1 | Shift + 1 |
| 選択範囲にズーム | Shift + 2 | Shift + 2 |
| 前の表示倍率に戻る | Shift + 9 | Shift + 9 |
| ピクセルグリッドを表示 | Ctrl + ‘ | Command + ‘ |
| レイアウトグリッドを表示 | Ctrl + Shift + 4 | Control + G |
| 定規を表示／非表示 | Shift + R | Shift + R |
| UIを隠す（プレゼン表示） | Ctrl + \ | Command + \ |
| アウトライン表示 | Ctrl + Shift + 3 | Command + Shift + 3 |
テキスト編集のショートカットキー
テキスト編集時に頻繁に使用するショートカットです。
| 操作内容 | Windows | Mac |
|---|---|---|
| 太字 | Ctrl + B | Command + B |
| 斜体 | Ctrl + I | Command + I |
| 下線 | Ctrl + U | Command + U |
| 取り消し線 | Ctrl + Shift + X | Command + Shift + X |
| 左揃え | Ctrl + Alt + L | Command + Option + L |
| 中央揃え | Ctrl + Alt + T | Command + Option + T |
| 右揃え | Ctrl + Alt + R | Command + Option + R |
| 両端揃え | Ctrl + Alt + J | Command + Option + J |
| フォントサイズを大きく | Ctrl + Shift + > | Command + Shift + > |
| フォントサイズを小さく | Ctrl + Shift + < | Command + Shift + < |
| 行間を広げる | Alt + Shift + ↓ | Option + Shift + ↓ |
| 行間を狭める | Alt + Shift + ↑ | Option + Shift + ↑ |
| 文字間隔を広げる | Alt + Shift + → | Option + Shift + → |
| 文字間隔を狭める | Alt + Shift + ← | Option + Shift + ← |
プロトタイプ・プレビューのショートカットキー
プロトタイピングとプレビュー機能に関するショートカットです。
| 操作内容 | Windows | Mac |
|---|---|---|
| プレゼンテーション（プレビュー）を表示 | Ctrl + Alt + Enter | Command + Option + Enter |
| デザイン／プロトタイプタブを切り替え | なし（右パネルタブ） | なし（右パネルタブ） |
| インタラクションを追加 | なし（ノードをドラッグ） | なし（ノードをドラッグ） |
ショートカットキーを覚えるコツ
1. ショートカット一覧パネルを活用する
Figmaには「Ctrl/Command + Shift + ?」で開けるショートカット一覧パネルがあります。
実際に使ったショートカットがハイライトされるので、未習得のものを視覚的に把握しながら覚えられます。
2. ツール選択キー（V・F・R・T）から覚える
移動（V）・フレーム（F）・長方形（R）・テキスト（T）は、UI制作で最も多用するツールです。
この4つを覚えるだけで、デザイン作業のテンポが大きく変わります。
3. オートレイアウトを使いこなす
オートレイアウトの追加（Shift + A）は、Figmaならではの最重要ショートカットです。
レスポンシブなコンポーネントを効率よく作れるため、最初に習得したい機能です。
4. 実際の作業で使いながら覚える
頭で覚えるよりも、実際のUI/UXデザイン作業で繰り返し使うことで自然と身につきます。
最初は遅くても、意識的にショートカットを使うようにしましょう。
5. XDやIllustratorとの違いを意識する
Figmaは多くの基本ショートカットがAdobe製品と共通ですが、オートレイアウトやコンポーネントなどFigma独自のものもあります。
すでに知っている操作を起点に、Figma特有の機能を少しずつ追加していくと効率的に覚えられます。
まとめ
Figmaのショートカットキーは、UI/UXデザインの作業効率を向上させる最も手軽な方法です。最初はすべてを覚える必要はなく、よく使う操作から少しずつマスターしていくことをおすすめします。
この記事で紹介したショートカットを活用することで、マウス操作の時間が大幅に削減され、より創造的なデザイン作業に集中できるようになります。特にツール選択、オートレイアウト、コンポーネント操作のショートカットは、Figmaの真価を発揮するための必須スキルです。
ぜひ今日から実践して、快適なUI/UXデザイン環境を構築してください。
