Figmaでの作業に時間がかかる・・・
もっと効率よく作業できるようになりたいです！
こんなお悩みを解決します。
Figmaは機能が多くて便利ですが、いまいち使いこなせてる気がしないですんよね。
筆者は現役プロデザイナーとして、Webデザイン・グラフィックデザイン作業に「Figma」を２年ほど使用しています。Figmaのショートカットキーを使いこなせるようになるまでは、自分の作業の遅さにイライラしたものです。
ですが、今回ご紹介するショートカットキーを使うようになってから作業効率は何倍・何十倍にもなりました。
今回の記事では、そんなわたしがオススメするFigmaのショートカットキーを、使用頻度が多い順にご紹介していきます。この記事をメモ帳代わりにして、ぜひFigmaの作業効率をぐんぐんUPさせてくださいね。
【おすすめ度★★★★★】Figmaの必ず覚えておきたいショートカットキー
さっそくプロデザイナーの筆者がFigmaで本当によく使うショートカットキーを紹介していきます。
まずは「おすすめ度★★★★★」の必ず覚えておきたいショートカットキーをまとめました。
| 内容 | Windows | Mac |
|---|---|---|
| プロパティのコピー＆ペースト | コピー：alt + ctrl + C ペースト：alt + ctrl + V | option + ⌘ + C option + ⌘ + V |
| フレームをPNGとしてコピー | shift + ctrl + C | shift + ⌘ + C |
| 画像の挿入 | shift + ctrl + K | shift + ⌘ + K |
| レイヤーを最前面・最背面に移動 | 最前面：alt + ctrl + ] 最背面：alt + ctrl + [ | 最前面：option + ⌘ + ] 最背面：option + ⌘ + [ |
| レイヤーを一つ上・一つ下に移動 | 一つ上：ctrl + ] 一つ下：ctrl + [ | 一つ上：⌘ + ] 一つ下：⌘ + [ |
| オブジェクトの整列 （左揃え） （右揃え） （上揃え） （下揃え） | alt + A alt + D alt + W alt + S | option + A option + D option + W option + S |
| オブジェクトの整列（水平揃え） | alt + H | option + H |
| オブジェクトの整列（垂直揃え） | alt + V | option + V |
| フレームツール | F | F |
| 長方形ツール | R | R |
| 円ツール | O | O |
| 直線ツール | L | L |
| ペンツール | P | P |
便利系ショートカットキー
これを覚えるだけで作業がググっとラクになる「便利系ショートカット」を紹介します。
プロパティのコピー＆ペースト
| 内容 | 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 |
| フレームをPNGとしてコピー | shift + ctrl + C | shift + ⌘ + C |
レイヤー階層のショートカット操作は必須レベル。
毎回ちゃんと使って慣れていきましょう。
レイヤーを一つ上・一つ下に移動
| 内容 | Windows | Mac |
| レイヤーを一つ上・一つ下に移動 | 一つ上：ctrl + ] 一つ下：ctrl + [ | 一つ上：⌘ + ] 一つ下：⌘ + [ |
レイヤーを一つ上、一つ下に移動するショートカット。
Adobeなど他のデザインツールでも共通なので、しっかり覚えておきたいですね。
オブジェクト系のショートカットキー
つづいてご紹介するのは「オブジェクトの整理」に関するショートカット。
本当によく使う機能なので、がんばって使いこなしましょう！
オブジェクトの整列（上下左右揃え）
| 内容 | Windows | Mac |
| 左揃え 右揃え 上揃え 下揃え | alt + A alt + D alt + W alt + S | option + A option + D option + W option + S |
作業効率化に直結するショートカットの筆頭です。
ゲームキャラを動かすときと同じ配置なので、ゲーム好きの方は覚えやすいですね。
オブジェクトの整列（水平・垂直揃え）
| 内容 | Windows | Mac |
| オブジェクトの整列（水平揃え） オブジェクトの整列（垂直揃え） | alt + H alt + V | option + H option + V |
左右方向、上下方向を中央に揃えるショートカット。
水平（Horizon）のH、垂直（Vertical）のVと覚えましょう。
ツール操作系のショートカットキー
つづいて紹介するのは、ツールを切り替えるショートカットキー。
いちいちツールバーをクリックせずとも、図形ツール・ペンツールは呼び出せるようになりましょう。
フレームツールに切り替え
| 内容 | Windows | Mac |
| フレームツールに切り替え | F | F |
フレームツールを呼び出すときは必ず「F」キーを押しましょう。
長方形ツールに切り替え
| 内容 | Windows | Mac |
| 長方形ツールに切り替え | R | R |
長方形（Rectangle）ツールに切り替えるショートカット。
shiftを押しながらドラッグすれば「正方形」がつくれます。
円ツールに切り替え
| 内容 | Windows | Mac |
| 円ツールに切り替え | O | O |
丸い円ツールを呼び出すから「O」キーです。
shiftを押しながらドラッグすれば「正円」がつくれます。
直線ツールに切り替え
| 内容 | Windows | Mac |
| 直線ツールに切り替え | L | L |
直線（Line）ツールを呼び出すショートカット。
shiftを押しながらドラッグすれば「45°単位」で線を引けます。
ペンツールに切り替え
| 内容 | Windows | Mac |
| ペンツールに切り替え | P | P |
ペン（Pen）ツールに切り替え。
イラレを普段使わない人には少し使いづらいツールかもしれません。
でもペンツールが使えるデザインソフトって案外少ないんです。
Figmaで必ず覚えておきたい便利ショートカットキーまとめ
毎日Figmaでデザイン作業をするなら、今回ご紹介したショートカットキーを使いこなせるだけで作業効率がググっと上がります。
わたしはデザインで生きていくと決めたとき、オンライン講座『デイトラ Webデザインコース 』を受講してFigmaで仕事をする方法を短期集中で学びました。
Figmaが短期間で学べる『デイトラ webデザインコース』
- バナーやWebサイトのデザインだけでなく、UI・UXデザインについても学べる
- 講師もFigmaを使ってるので、授業がすべてFigmaベースで進む
- 24時間いつでもチャットで無制限に質問できる
- フリーランス仲間・仕事仲間に出会える
Figmaを使って学べるデザイン講座はおそらく『デイトラ』くらいなんですよね。
今なら無料体験もできるようなので、気になる方はリンク先をチェックしてみてください。
⇒デイトラ Webデザインコースを無料で体験するそれではFigmaを使いこなして、さらに楽しいデザインライフを送りましょう！
デザインの勉強法に関するご質問やお仕事の依頼については、Twitter DMまたはお問い合わせフォームよりどうぞ。