【2023最新版】Figmaのデザイン作業が捗るショートカットキーまとめ【おすすめ順・カテゴリー別】

Figmaはデザインツールとして欠かせない存在になってきましたが、その機能を最大限に活用するためには、ショートカットキーの使用が欠かせません。

この記事では、Figmaでよく使うショートカットキーをおすすめ順にまとめました。

※最終更新日は2023年3月22日です。

はじめに:Figmaのショートカットキー一覧は「Ctrl+Shift+/」「⌘+Shift+/」で確認可能

まずはじめに紹介するショートカットキーは、Figmaのショートカットキー一覧を表示するショートカットキーです。

  • Windows:「Ctrl+Shift+/」
  • Mac:「⌘+Shift+/」

作業中にパッと確認したいときに便利なので、ぜひ覚えておいてください。

ショートカットキーを覚えるコツは「必ず使うこと」

Figmaのショートカットキーを覚えるコツはただ一つ、「必ずショートカットキーを使うこと」です。

何を当たり前のことを、、と思われるかもしれませんが、ショートカットキーは数日、長くても1週間毎日使うと自然と身についてきます。

はじめは少し時間がかかってもいいので、ショートカットキーを使うようにしてください。

ショートカットキーは何から覚えるべき?

ショートカットキーを覚える順序に正解はなく、頻繁に使うものから覚えるべきです。

ただ、あえて順序をつけるとしたら、

  1. ツール切り替え系ショートカットキー
  2. 配置系ショートカットキー(前面/最前面、中央揃え/右揃えなど)
  3. 選択系ショートカットキー(グループ化、フレーム化、すべて選択など)

これらを覚えるだけでも、日々の作業が格段にスピードアップします。

【番外編】困ったことを解決するショートカットキー

まずは番外編ということで、作業中に困ったことを解決するショートカットキーをご紹介します。

UIパネルの表示/非表示を切り替えるショートカットキー

わたしがしょっちゅう困るのが「UIパネルがいつのまにか消えた」問題です。

そんなときは「Ctrl(⌘)+\ 」または「Ctrl+¥」のショートカットキーで表示/非表示を切り替えられます。

【必ず覚えよう】必須レベルのショートカットキー

続いてご紹介するのは、デザイン作業を進めるうえで必須レベルのショートカットキーです。

カテゴリー別に紹介していきます。

「ツール切り替え」系ショートカットキー

長方形ツールや円形ツール、テキストツールなど、ツール切り替え系ショートカットキーは必ず使えるようになりましょう。

移動ツールV
フレームツールF
テキストツールT
長方形ツールR
楕円ツールO
線ツールL
色の選択I
コメントの追加C

「選択」系ショートカットキー

すべて選択Ctrl(⌘)+A
選択を解除Esc
ネスト選択(複数選択)Ctrl(⌘)+クリック
子の選択Enter
親の選択\
次の兄弟の選択Tab
前の兄弟を選択Shift+Tab
選択範囲のグループ化Ctrl(⌘)+G
選択範囲のグループ解除Ctrl(⌘)+バックスペースキー
選択範囲のフレーム化Ctrl(⌘)+Alt(Option)+G

「配置」系ショートカットキー

オブジェクトの整列
(左揃え)
(右揃え)
(上揃え)
(下揃え)

alt(option)+ A
alt(option) + D
alt(option) + W
alt(option) + S
オブジェクトの整列(水平揃え)alt(option) + H
オブジェクトの整列(垂直揃え)alt(option) + V

【おすすめ度★★★★★】Figmaのデザイン作業がはかどるショートカットキー

続いて、「おすすめ度★★★★★」Figmaのデザイン作業が捗るショートカットキーをご紹介します。

これを使いこなせば、日々のデザイン作業が超スピードアップします。

内容WindowsMac
プロパティのコピー ctrl + Coption + ⌘ + C
プロパティのペーストalt + ctrl + Voption + ⌘ + V
画像(PNG)としてコピーshift + ctrl + Cshift + ⌘ + C
画像の挿入shift + ctrl + Kshift + ⌘ + K
レイヤーを最前面・最背面に移動最前面:alt + ctrl + ]
最背面:alt + ctrl + [
最前面:option + ⌘ + ]
最背面:option + ⌘ + [
レイヤーを一つ上・一つ下に移動一つ上:ctrl + ]
一つ下:ctrl + [
一つ上:⌘ + ]
一つ下:⌘ + [

それぞれについて簡単に紹介していきます。

便利系ショートカットキー

これを覚えるだけで作業がググっとラクになる「便利系ショートカット」を紹介します。

プロパティのコピー&ペースト

内容WindowsMac
プロパティのコピー&ペーストコピー:alt + ctrl + C
ペースト:alt + ctrl + V
option + ⌘ + C
option + ⌘ + V

レイヤーのプロパティのみコピー&ペーストできる神ショートカット。

画像の差し替えやテキストスタイルのコピーなどに使えます。

フレームをPNGとしてコピー

内容WindowsMac
PNGとしてコピーshift + ctrl + Cshift + ⌘ + C

フレームやレイヤーをPNG画像としてコピーできる便利なショートカットキー。

これは知らない人が結構多いショートカットですが、画像としてエクスポートせず、すぐに使いまわせます。いちいち書き出すのはもうやめましょう。

画像の挿入

内容WindowsMac
画像の挿入shift + ctrl + Kshift + ⌘ + K

いちいちフォルダを開いて画像を挿入するのってめんどくさい・・・
そんなときに活躍するショートカットです。

レイヤーを最前面・最背面に移動

内容WindowsMac
フレームを最前面・最背面に移動最前面:shift + ctrl + ]
最背面:shift + ctrl + [
最前面:shift + ⌘ + ]
最背面:shift + ⌘ + [

レイヤー階層のショートカット操作は必須レベル。毎回ちゃんと使って慣れていきましょう。

レイヤーを一つ上・一つ下に移動

内容WindowsMac
レイヤーを一つ上・一つ下に移動一つ上:ctrl + ]
一つ下:ctrl + [
一つ上:⌘ + ]
一つ下:⌘ + [

レイヤーを一つ上、一つ下に移動するショートカット。
他のデザインツールでも共通のショートカットキーなので、しっかり覚えておきたいですね。

まとめ:Figmaの作業効率化はショートカットキーが決め手

今回は、Figmaのデザイン作業がはかどるショートカットキーを厳選してご紹介しました。

Figmaでは様々なショートカットキー、便利なプラグインがありますが、まずは一つずつ自分のものにしていくことが大切です。

便利なプラグインについても紹介している記事があるので、よければあわせてご覧くださいね。

関連記事

Figmaは、UI/UXデザインをする上で必要不可欠なツールとなってきました。Figmaはそれ自体も非常に便利なツールですが、プラグインを使うことで更に効率的な作業ができるようになります。そこで今回は、毎日6~8時間ほどF[…]

Figmaのスキルアップにおすすめの方法

最後に、Figmaのスキルアップにおすすめの方法をいくつかご紹介しておきます。

方法①:まずはUdemyのオンライン講座を活用

デザインの人気オンラインコース

Udemyとは、様々な分野の講座をオンラインで学べるプラットフォームです。

毎月のように割引セールが開催されるので、2000円以内で高品質な講座を受けれます。会員登録は無料で、登録後すぐにセールが開催されるため、ぜひ一度チェックしてみてくださいね。

Udemyホームページ

方法②:副業、フリーランスを目指すならオンラインスクール

デザインを副業にしたい、フリーランスデザイナーになりたいという方には、オンラインスクールもおすすめです。

高いと思われがちなデザインスクールですが、オンラインスクールなど、数万円から始められるものも増えてきました。

ここでは、ジャンル別におすすめのスクールを3つだけご紹介します。

女性におすすめ:SHElikes(シーライクス)

女性だけが参加できるデザインスクール「SHElikes(シーライクス)」は、20~30代の女性におすすめ。

TwitterなどのSNSでも良い口コミが多く、スクール選びで失敗したくない方はSHElikesを選べば間違いなさそうです。

  • 未経験から仕事を受けられるようになるレベルのレッスン提供
  • モチベーション維持しやすいコーチングやサポート
  • コミュニティが活発なので、仲間と切磋琢磨しながらスキルアップできる
  • 学習以外にも外部講師やインフルエンサーを招いた特別イベントを開催
  • 季節・期間限定キャンペーン随時実施中
  • スキルを身につけた方には仕事紹介のサポートもある

>> SHElikesを無料体験してみる

高コスパ&完全オンラインを選ぶなら:デイトラ

次に紹介する「デイトラ」は、実は私自身も受講していたオンラインデザインスクールです。

なんといってもコスパの良さと、Figmaで全ての授業が進められる点がいいですね。

もし心配な方は無料でご相談に乗るので、お問い合わせまたはわたしのTwitterまでDMをお送りください。

  • フリーランス/副業を意識したハイレベルなカリキュラム
  • 受講生による好意的な口コミ
  • 教室を持たないことで実現した圧倒的なコスパ
  • 年間受講者数8,000人超の国内最大規模という安心感

>> デイトラについてもっと見る

未経験からの転職を目指す方におすすめ:ワンダフルクラス

講師陣が全員現役フリーランスエンジニアであり、教育実績も豊富な「ワンダフルクラス」では、低価格なのに就職・面接サポートがかなり充実しています。

ワンダフルクラスがIT業界への独自のパイプを持っているため、面接対策から就職サポートも可能で、未経験からの就職にはもってこいのオンラインスクールかと思います。

>> ワンダフルクラスについてもっと見る