【Figma爆速化】作業効率を劇的に変える！神ショートカットキー50選

2024年8月2日 2024年8月2日

wfl

Figmaは、WebデザインやUIデザインの現場で必須ツールになりつつあります。その直感的な操作性は魅力的ですが、作業効率を最大限に引き出すには、ショートカットキーの活用が不可欠です。

ショートカットキーをマスターすれば、マウス操作の煩わしさから解放され、デザイン作業が飛躍的にスピードアップ！よりクリエイティブな仕事に集中できる環境が手に入ります。

この記事では、Figma初心者から上級者まで、作業効率を爆上げする神ショートカットキー50選を厳選してご紹介します。基本操作から、知っていると差がつくマニアックなショートカットまで網羅しました。

あなたのデザインワークフローを劇的に改善し、Figmaマスターへの道を切り開く、決定版ショートカットキーガイドです。ぜひ最後までご覧ください！

なぜFigmaのショートカットキーを覚えるべきなのか？

ショートカットキーを覚えるメリットは、作業時間の短縮だけではありません。

作業効率の向上: 繰り返し行う作業を瞬時に行えるようになり、作業全体のスピードアップに繋がります。
集中力の維持: マウス操作の煩わしさから解放され、デザイン作業に集中することができます。
プロフェッショナルな印象: ショートカットキーを使いこなす姿は、クライアントや同僚からの信頼度アップにも繋がります。

Figmaを使い始めたばかりの頃は、ショートカットキーを覚えるのが面倒に感じるかもしれません。しかし、一度覚えてしまえば、作業効率が格段に向上します。最初はよく使うショートカットキーから少しずつ覚えていくのがおすすめです。

ショートカットキーを使いこなすための3つのステップ

よく使うショートカットキーを覚える: まずは、自分が頻繁に使う操作のショートカットキーから覚えましょう。
ショートカットキー一覧表を活用する: Figmaには、ショートカットキーの一覧表が用意されています。定期的に確認し、新しいショートカットキーを習得しましょう。
実際に手を動かして練習する: 実際にFigmaを使いながら、ショートカットキーを試してみましょう。繰り返し使うことで、自然と体に染み込みます。

私も最初はショートカットキーを覚えるのが苦手でした。しかし、毎日少しずつ練習することで、今ではほとんどの操作をショートカットキーで行えるようになりました。最初は大変かもしれませんが、諦めずに続けてみてください。

それでは、早速、Figmaの神ショートカットキーをご紹介していきます。

【基本操作編】Figmaを使い始める上で必須のショートカットキー

ショートカット	Mac	Windows	機能
選択・移動
選択ツール	`V`	`V`	選択ツールに切り替え
オブジェクトを複製	`⌘` + `D`	`Ctrl` + `D`	選択中のオブジェクトを複製
複製して移動	`⌥` + ドラッグ	`Alt` + ドラッグ	選択中のオブジェクトを複製しながら移動
グループ化	`⌘` + `G`	`Ctrl` + `G`	選択中のオブジェクトをグループ化
グループ解除	`⌘` + `⇧` + `G`	`Ctrl` + `⇧` + `G`	選択中のオブジェクトをグループ解除
前の操作に戻る	`⌘` + `Z`	`Ctrl` + `Z`	操作を一つ戻る
次の操作に進む	`⌘` + `⇧` + `Z`	`Ctrl` + `⇧` + `Z`	操作を一つ進む
全てを選択	`⌘` + `A`	`Ctrl` + `A`	全てのオブジェクトを選択
編集
コピー	`⌘` + `C`	`Ctrl` + `C`	選択中のオブジェクトをコピー
ペースト	`⌘` + `V`	`Ctrl` + `V`	選択中のオブジェクトをペースト
切り取り	`⌘` + `X`	`Ctrl` + `X`	選択中のオブジェクトを切り取り
置き換えペースト	`⌘` + `⇧` + `V`	`Ctrl` + `⇧` + `V`	最後にコピーしたオブジェクトをペーストして置き換え
削除	`Delete`	`Delete`	選択中のオブジェクトを削除
テキスト
テキストツール	`T`	`T`	テキストツールに切り替え
太字	`⌘` + `B`	`Ctrl` + `B`	選択中のテキストを太字にする
イタリック	`⌘` + `I`	`Ctrl` + `I`	選択中のテキストをイタリックにする
下線	`⌘` + `U`	`Ctrl` + `U`	選択中のテキストに下線を引く

これらのショートカットキーは、Figmaの基本操作の中でも特に使用頻度が高いものです。まずはこれらのショートカットキーを覚え、マウス操作から卒業しましょう。

【編集操作編】オブジェクトの編集を効率化するショートカットキー

ショートカット	Mac	Windows	機能
水平均等配置	`⌘` + `⌥` + `T`	`Ctrl` + `Alt` + `T`	選択中のオブジェクトを水平方向に均等配置
垂直均等配置	`⌘` + `⌥` + `B`	`Ctrl` + `Alt` + `B`	選択中のオブジェクトを垂直方向に均等配置
オブジェクトを前面へ	`⌘` + `⌥` + `]`	`Ctrl` + `Shift` + `]`	選択中のオブジェクトを前面に移動
オブジェクトを背面へ	`⌘` + `⌥` + `[`	`Ctrl` + `Shift` + `[`	選択中のオブジェクトを背面に移動
左右反転	`⇧` + `H`	`Shift` + `H`	選択中のオブジェクトを左右反転
上下反転	`⇧` + `V`	`Shift` + `V`	選択中のオブジェクトを上下反転
90度回転(右)	`⇧` + `⌘` + `R`	`Shift` + `Ctrl` + `R`	選択中のオブジェクトを90度右回転
90度回転(左)	`⇧` + `⌘` + `L`	`Shift` + `Ctrl` + `L`	選択中のオブジェクトを90度左回転

これらのショートカットキーは、オブジェクトの編集作業を効率化するために非常に役立ちます。特に、均等配置や反転、回転のショートカットキーは、デザインの微調整を行う際に重宝するでしょう。

【表示設定編】Figmaの表示をカスタマイズするショートカットキー

ショートカット	Mac	Windows	機能
グリッド	`⌘` + `\`	`Ctrl` + `\`	グリッドの表示/非表示
ルーラー	`⇧` + `R`	`Shift` + `R`	ルーラーの表示/非表示
アウトライン	`⌘` + `Y`	`Ctrl` + `Y`	アウトライン表示の切り替え
ピクセルプレビュー	`⌘` + `⌥` + `P`	`Ctrl` + `Alt` + `P`	ピクセルプレビューの切り替え
ズームイン	`⌘` + `+`	`Ctrl` + `+`	ズームイン
ズームアウト	`⌘` + `-`	`Ctrl` + `-`	ズームアウト
実際のサイズ	`⌘` + `0`	`Ctrl` + `0`	実際のサイズで表示
画面に合わせる	`⇧` + `⌘` + `0`	`Shift` + `Ctrl` + `0`	画面に収まるように表示

ズームイン/アウトのショートカットキーは、デザインの細部を確認したり、全体像を把握したりする際に頻繁に使うことになるでしょう。指が自然と動くようになるまで、繰り返し練習することをおすすめします。

筆者の失敗談: 以前、ズームイン/アウトのショートカットキーを知らなかった頃は、毎回マウスで操作していました。その結果、作業効率が低下し、無駄な時間を費やしてしまっていました。ショートカットキーを覚えたことで、作業がスムーズに進み、時間の節約にも繋がりました。

【応用編】作業効率をさらに高める、覚えておくと便利なショートカットキー

ショートカット	Mac	Windows	機能
プロトタイププレビュー	`⌘` + `Enter`	`Ctrl` + `Enter`	プロトタイププレビュー開始
クイックアクション	`/`	`/`	クイックアクション検索
プラグイン	`⌘` + `P`	`Ctrl` + `P`	プラグイン検索
コメント	`⌘` + `/`	`Ctrl` + `/`	コメント挿入
チームライブラリ公開	`⌘` + `⇧` + `P`	`Ctrl` + `⇧` + `P`	チームライブラリ公開
ライブラリ追加	`⌘` + `⌥` + `P`	`Ctrl` + `Alt` + `P`	チームライブラリをプロジェクト

ポイント: / (クイックアクション検索) は、Figmaのあらゆる機能に素早くアクセスできる便利なショートカットです。例えば、「/text」と入力するとテキストツールに切り替わったり、「/frame」と入力するとフレームを作成できたりします。

【レイヤー操作編】レイヤー管理をスムーズにするショートカットキー

ショートカット	Mac	Windows	機能
レイヤーパネル表示	`⌥` + `2`	`Alt` + `2`	レイヤーパネルの表示/非表示
親レイヤーを選択	`⌥` + `⇧` + `⌘` + `↑`	`Alt` + `⇧` + `Ctrl` + `↑`	親レイヤーを選択
子レイヤーを選択	`⌥` + `⇧` + `⌘` + `↓`	`Alt` + `⇧` + `Ctrl` + `↓`	子レイヤーを選択
レイヤーをロック	`⌘` + `⇧` + `L`	`Ctrl` + `Shift` + `L`	選択中のレイヤーをロック/ロック解除
レイヤーを隠す	`⇧` + `⌘` + `H`	`Shift` + `Ctrl` + `H`	選択中のレイヤーを隠す/表示する
レイヤーを複製	`⌘` + `⌥` + `D`	`Ctrl` + `Alt` + `D`	選択中のレイヤーを複製

使い方のコツ: レイヤーパネルを表示した状態で、これらのショートカットキーを使うと、より効率的にレイヤーを操作できます。

【コンポーネント編】コンポーネントを使いこなすためのショートカットキー

ショートカット	Mac	Windows	機能
メインコンポーネントを作成	`⌥` + `⌘` + `K`	`Alt` + `Ctrl` + `K`	選択中のオブジェクトをメインコンポーネントに変換
インスタンスを作成	`⌥` + `⌘` + `D`	`Alt` + `Ctrl` + `D`	選択中のコンポーネントからインスタンスを作成
インスタンスを切り離し	`⌘` + `⌥` + `B`	`Ctrl` + `Alt` + `B`	選択中のインスタンスをメインコンポーネントから切り離し
コンポーネントをリセット	`⌥` + `⌘` + `R`	`Alt` + `Ctrl` + `R`	選択中のインスタンスをメインコンポーネントの状態にリセット

注意点: コンポーネントのショートカットキーは、Figmaのデザインシステムを構築する上で非常に重要です。これらのショートカットキーをマスターすることで、効率的にコンポーネントを作成・管理できます。

【プロトタイプ編】プロトタイプ作成を効率化するショートカットキー

ショートカット	Mac	Windows	機能
コネクションを作成	`C`	`C`	選択中のオブジェクトからコネクションを作成
インタラクションを追加	`I`	`I`	選択中のコネクションにインタラクションを追加
プロトタイププレビュー	`⌘` + `Enter`	`Ctrl` + `Enter`	プロトタイププレビュー開始

使い方のコツ: プロトタイプ作成中にこれらのショートカットキーを活用することで、スムーズにインタラクティブなデザインを作成できます。特に、コネクション作成 (C) とインタラクション追加 (I) は頻繁に使うことになるでしょう。

【その他】覚えておくと便利なショートカットキー

ショートカット	Mac	Windows	機能
検索	`⌘` + `F`	`Ctrl` + `F`	検索バーを開く
ヘルプ	`⌘` + `⇧` + `?`	`Ctrl` + `Shift` + `?`	ショートカットキー一覧を表示
コメント	`⌘` + `/`	`Ctrl` + `/`	コメントを入力
チームライブラリ公開	`⌘` + `⇧` + `P`	`Ctrl` + `⇧` + `P`	チームライブラリを公開
ライブラリ追加	`⌘` + `⌥` + `P`	`Ctrl` + `Alt` + `P`	チームライブラリをプロジェクトに追加

【番外編】Figmaを使いこなすためのTips

ショートカットキーをカスタマイズする: Figmaでは、ショートカットキーを自分の好みに合わせてカスタマイズすることができます。
プラグインを活用する: Figmaには、様々なプラグインが用意されています。プラグインを活用することで、さらに作業効率を上げることができます。
Figmaのコミュニティに参加する: Figmaのコミュニティには、世界中のデザイナーが集まっています。コミュニティに参加することで、最新のTipsやテクニックを学ぶことができます。