今回は、今注目のデザインツールFigmaのショートカットを紹介していきます。ショートカットを覚えることで、Figmaでの作業スピードを格段に上げることができます。全てを網羅するよりも、実践でよく使うものや知っていると作業を効率化できるショートカットに絞って紹介していますので、ぜひ参考にしてみてください。

※今回は、Macの仕様に合わせて紹介していきます。Windowsの方は、下記の変換に従って置き換えて考えてください。

• control(mac)→alt(windows)

• command(mac)→control(windows)

Figmaのショートカット一覧を確認する方法

control+shift+?を押すとショートカットキーの一覧を確認することができます。かなりの数のショートカットキーが存在しますね。水色になっているショートカットキーは、利用したことのあるショートカットキーです。

まだ使ったことのないショートカットキーで、便利なものを見つけることができるかもしれませんので、ぜひ確認してみてください。

【初級者むけ】絶対に覚えてほしい利用頻度の高いFigmaの基本ショートカット

Figma以外でも利用できるショートカットキー

コピー・ペーストなど、Figma以外のツールでも利用している、一般的なショートカットキーについてもここで触れておきます。これは、Figmaだけなく、他のツールでも共通して利用することができるので、もし知らないものがあれば必ず覚えましょう。

ツール

ツールのショートカットキーで、ツールを切り替えることで、マウスの機能を切り替えることができます。たとえば、「T」を押すと、テキストを新規追加する状態になります。

この中でも特に利用頻度の高いショートカットを表にしました。こちらの表に挙げたものは必ず覚えておきたいショートカットキーです。これらは頻繁に使用する機能のため、ショートカットキーを活用することで作業時間を大幅に短縮できます。

これらのショートカットキーは、利用するツールを英語名にした時の頭文字をとっていることが多いので、覚えやすいです。例えば、長方形ツールはRectangleなので、「R」で呼び出すことができます。

グループ化・解除

オブジェクト同士をグループ化する際は、⌘+Gを使い、解除するときは⌘+⇧+Gまたは⌘+delete使います。

コンポーネントの作成・解除(インスタンスの切り離し)

コンポーネントとは、ボタンやアイコンなどデザインを制作する中で、一貫して同じデザインを利用したいときに便利な機能です。大きなプロジェクトになるほど、コンポーネントの作成は重要になってきます。

コンポーネントの作成は、⌥+⌘+Kです。メインコンポーネントのコンポーネントを解除することはできませんが、インスタンスのコンポーネント化を解除することはできます。ショートカットキーは、⌥+⌘+Bです。

複製

Figmaでオブジェクトを複製する方法は、2つあります。

⌘+Dまたは、⌥＋ドラッグです。⌘+Dの場合は、複製したいオブジェクトを選択した状態でショートカットキーを押します。⌥＋ドラッグは、複製したいオブジェクトを選択しながら、⌥を押して、複製物を置きたい場所までドラッグします。

定規・レイアウトグリッドの表示/非表示

定規やレイアウトグリッドを出して、余白を均一にしたり、整ったデザインを作成することができます。常に定規やグリッド線があるとデザインを正確に判断できない場合もあります。表示・非表示切り替えをすぐにできるようにして作業を効率化させましょう。

定規の表示・非表示の切り替えは、⇧+Rでできます。レイアウトグリッドの表示・非表示の切り替えは、⇧+Gでできます。

画像を配置する

画像を挿入したいとき、⇧＋⌘＋KでファインダーをFigma上で呼び出し画像や動画(有料プランのみ)を挿入することができるショートカットです。

これを知らないと、わざわざ、長方形を出す→長方形の塗りを画像に変更→Finderを開くという手順が必要になり、とても時間がかかります。

レイヤーの順番を変える

Figmaのデザインエディタの左のパネルでは、オブジェクトのレイヤーの順番を管理することができます。ここで、レイヤーの順番を変更することもできますが、レイヤーの階層が離れていると、簡単に順番を変更することができません。

オートレイアウトの追加・削除

オートレイアウトとは、オブジェクト同士を整列させ、余白を均等に保つ機能です。オートレイアウトは、デザイン作成においてかかせない機能なので、ショートカットを使って効率化させましょう。

オートレイアウトを適用させたい複数のオブジェクトを選択しながら、⇧＋Aを押します。解除したいときは、⌥＋⇧＋Aですが、オートレイアウトは複数オブジェクトをグループ化した上で、整列する機能なので、グループ化⌘+⇧+Gを解除すれば、オートレイアウトも解除することができます。

最後に使ったプラグインを呼び出す

Figmaでのデザイン制作において、プラグインは必須の機能だと思います。特に、何度も同じプラグインを利用するときに、わざわざプラグインを探すのは時間がかかります。最後に使ったプラグインを⌥＋⇧＋Pで呼び出すことで、連続したプラグインの利用で作業時間を短縮することができます。

初級者むけショートカットまとめ

今までのショートカットを表にしました。

【中級者むけ】作業をさらに効率化にするFigmaのショートカット6選

水平・垂直反転

オブジェクトを水平または垂直に反転したいことはよくあると思います。水平にしたいときは⇧＋H、垂直にしたいときは、⇧＋V　を使用します。

子要素を選択

このように、何層にもグループ化されている場合、オブジェクトに辿り着くまでに、何度もクリックを繰り返さなければいけません。しかしEnterを押していくことで、選択している階層をどんどん子階層へと下げていくことができます。

貼り付けて置換する

ペーストするときに、元々のオブジェクトをペーストするオブジェクトに置き換えたい時がありますね。そんなときはこのショートカットがおすすめです。⇧＋⌘＋Rで、置き換えてペーストすることができます。

PNGとしてコピー

制作したデザインを、画像として扱いたいときに使用するショートカットです。⇧＋⌘＋Cで制作したオブジェクトをPNGとしてコピーできます。

プロパティのコピー・貼り付け

プロパティーのコピー・貼り付けをするときは、⌥＋⌘＋C、⌥＋⌘＋Vのショートカットを使います。塗り・エフェクト・線などのプロパティをコピーして貼り付けることができます。シェイプは違うが、同じデザインを適用したい時などにとても便利です。

不透明度の調節

オブジェクトを選択しながら、「1」を押すとそのオブジェクトの不透明度が10%に、「5」を押すとオブジェクトの不透明度が50%になります。二桁でも機能しますので、「65」と押せば不透明度が65%になります。

中級者むけショートカットまとめ

今まで紹介してきた中級者むけショートカットを表にまとめました。

【 困ったとき編 】  何が起きたかわからない現象はこれで解決

Figmaの使いたてで、よくある現象が、いつの間にかショートカットキーを押していて、何が起きたのかわからないという現象です。よくある現象をまとめましたので、困ったらこちらを参考にしてください。

UIの表示・非表示 (左右のパネルが消えてしまった)

いつの間にか左右のパネルが消えてしまっているときは、UIの表示・非表示を切り替えるショートカットである@を知らぬ間に押してしまったときです。そんなときは、もう一度＠を押せば治ります。

アウトラインの表示・非表示 (白黒の線になってしまった)

すべてのオブジェクトが、白黒の線になってしまったときは、アウトラインの表示を発動してしまっているときです。⇧＋Oをもう一度押して非表示にしましょう。

まとめ

Figmaのショートカットについて紹介しました。ショートカットを活用することで、Figmaでの作業スピードを大きく上げることができます。ショートカットを使えるようになるには、どんどん実務で使っていくことが大事です。

ぜひ、いつもの作業の中で活用できるものから使っていってくださいね。