Figmaはデザインツールとして欠かせない存在になってきましたが、その機能を最大限に活用するためには、ショートカットキーの使用が欠かせません。
この記事では、Figmaでよく使うショートカットキーをおすすめ順にまとめました。
※最終更新日は2023年3月22日です。
はじめに:Figmaのショートカットキー一覧は「Ctrl+Shift+/」「⌘+Shift+/」で確認可能
まずはじめに紹介するショートカットキーは、Figmaのショートカットキー一覧を表示するショートカットキーです。
- Windows:「Ctrl+Shift+/」
- Mac:「⌘+Shift+/」
作業中にパッと確認したいときに便利なので、ぜひ覚えておいてください。
ショートカットキーを覚えるコツは「必ず使うこと」
Figmaのショートカットキーを覚えるコツはただ一つ、「必ずショートカットキーを使うこと」です。
何を当たり前のことを、、と思われるかもしれませんが、ショートカットキーは数日、長くても1週間毎日使うと自然と身についてきます。
はじめは少し時間がかかってもいいので、ショートカットキーを使うようにしてください。
ショートカットキーは何から覚えるべき?
ショートカットキーを覚える順序に正解はなく、頻繁に使うものから覚えるべきです。
ただ、あえて順序をつけるとしたら、
- ツール切り替え系ショートカットキー
- 配置系ショートカットキー(前面/最前面、中央揃え/右揃えなど)
- 選択系ショートカットキー(グループ化、フレーム化、すべて選択など)
これらを覚えるだけでも、日々の作業が格段にスピードアップします。
【番外編】困ったことを解決するショートカットキー
まずは番外編ということで、作業中に困ったことを解決するショートカットキーをご紹介します。
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のデザイン作業が捗るショートカットキーをご紹介します。
これを使いこなせば、日々のデザイン作業が超スピードアップします。
内容 | Windows | Mac |
---|---|---|
プロパティのコピー | ctrl + C | option + ⌘ + C |
プロパティのペースト | alt + ctrl + V | option + ⌘ + V |
画像(PNG)としてコピー | shift + ctrl + C | shift + ⌘ + C |
画像の挿入 | shift + ctrl + K | shift + ⌘ + K |
レイヤーを最前面・最背面に移動 | 最前面:alt + ctrl + ] 最背面:alt + ctrl + [ | 最前面:option + ⌘ + ] 最背面:option + ⌘ + [ |
レイヤーを一つ上・一つ下に移動 | 一つ上:ctrl + ] 一つ下:ctrl + [ | 一つ上:⌘ + ] 一つ下:⌘ + [ |
それぞれについて簡単に紹介していきます。
便利系ショートカットキー
これを覚えるだけで作業がググっとラクになる「便利系ショートカット」を紹介します。
プロパティのコピー&ペースト
内容 | Windows | Mac |
プロパティのコピー&ペースト | コピー:alt + ctrl + C ペースト:alt + ctrl + V | option + ⌘ + C option + ⌘ + V |
レイヤーのプロパティのみコピー&ペーストできる神ショートカット。
画像の差し替えやテキストスタイルのコピーなどに使えます。
フレームをPNGとしてコピー
内容 | Windows | Mac |
PNGとしてコピー | shift + ctrl + C | shift + ⌘ + C |
フレームやレイヤーをPNG画像としてコピーできる便利なショートカットキー。
これは知らない人が結構多いショートカットですが、画像としてエクスポートせず、すぐに使いまわせます。いちいち書き出すのはもうやめましょう。
画像の挿入
内容 | Windows | Mac |
画像の挿入 | shift + ctrl + K | shift + ⌘ + K |
いちいちフォルダを開いて画像を挿入するのってめんどくさい・・・
そんなときに活躍するショートカットです。
レイヤーを最前面・最背面に移動
内容 | Windows | Mac |
フレームを最前面・最背面に移動 | 最前面:shift + ctrl + ] 最背面:shift + ctrl + [ | 最前面:shift + ⌘ + ] 最背面:shift + ⌘ + [ |
レイヤー階層のショートカット操作は必須レベル。毎回ちゃんと使って慣れていきましょう。
レイヤーを一つ上・一つ下に移動
内容 | Windows | Mac |
レイヤーを一つ上・一つ下に移動 | 一つ上:ctrl + ] 一つ下:ctrl + [ | 一つ上:⌘ + ] 一つ下:⌘ + [ |
レイヤーを一つ上、一つ下に移動するショートカット。
他のデザインツールでも共通のショートカットキーなので、しっかり覚えておきたいですね。
まとめ:Figmaの作業効率化はショートカットキーが決め手
今回は、Figmaのデザイン作業がはかどるショートカットキーを厳選してご紹介しました。
Figmaでは様々なショートカットキー、便利なプラグインがありますが、まずは一つずつ自分のものにしていくことが大切です。
便利なプラグインについても紹介している記事があるので、よければあわせてご覧くださいね。
Figmaは、UI/UXデザインをする上で必要不可欠なツールとなってきました。Figmaはそれ自体も非常に便利なツールですが、プラグインを使うことで更に効率的な作業ができるようになります。そこで今回は、毎日6~8時間ほどF[…]
Figmaのスキルアップにおすすめの方法
最後に、Figmaのスキルアップにおすすめの方法をいくつかご紹介しておきます。
方法①:まずはUdemyのオンライン講座を活用
Udemyとは、様々な分野の講座をオンラインで学べるプラットフォームです。
毎月のように割引セールが開催されるので、2000円以内で高品質な講座を受けれます。会員登録は無料で、登録後すぐにセールが開催されるため、ぜひ一度チェックしてみてくださいね。
方法②:副業、フリーランスを目指すならオンラインスクール
デザインを副業にしたい、フリーランスデザイナーになりたいという方には、オンラインスクールもおすすめです。
高いと思われがちなデザインスクールですが、オンラインスクールなど、数万円から始められるものも増えてきました。
ここでは、ジャンル別におすすめのスクールを3つだけご紹介します。
女性におすすめ:SHElikes(シーライクス)
女性だけが参加できるデザインスクール「SHElikes(シーライクス)」は、20~30代の女性におすすめ。
TwitterなどのSNSでも良い口コミが多く、スクール選びで失敗したくない方はSHElikesを選べば間違いなさそうです。
- 未経験から仕事を受けられるようになるレベルのレッスン提供
- モチベーション維持しやすいコーチングやサポート
- コミュニティが活発なので、仲間と切磋琢磨しながらスキルアップできる
- 学習以外にも外部講師やインフルエンサーを招いた特別イベントを開催
- 季節・期間限定キャンペーン随時実施中
- スキルを身につけた方には仕事紹介のサポートもある
高コスパ&完全オンラインを選ぶなら:デイトラ
次に紹介する「デイトラ」は、実は私自身も受講していたオンラインデザインスクールです。
なんといってもコスパの良さと、Figmaで全ての授業が進められる点がいいですね。
もし心配な方は無料でご相談に乗るので、お問い合わせまたはわたしのTwitterまでDMをお送りください。
- フリーランス/副業を意識したハイレベルなカリキュラム
- 受講生による好意的な口コミ
- 教室を持たないことで実現した圧倒的なコスパ
- 年間受講者数8,000人超の国内最大規模という安心感
未経験からの転職を目指す方におすすめ:ワンダフルクラス
講師陣が全員現役フリーランスエンジニアであり、教育実績も豊富な「ワンダフルクラス」では、低価格なのに就職・面接サポートがかなり充実しています。
ワンダフルクラスがIT業界への独自のパイプを持っているため、面接対策から就職サポートも可能で、未経験からの就職にはもってこいのオンラインスクールかと思います。