figmaの使い方にはかなり慣れてきたよ！
ショートカットを使って作業時間を短縮したい！
今日は作業効率がグンっと上がるfigmaのショートカットを紹介するよ！
MacとWindowsどちらも記載するから安心してね！
今回はfigmaで使える便利なショートカットをご紹介します。
ショートカットを覚えると効率的に作業を進めることができます。
最初は覚えるのは大変かもしれませんが、使っている内に体が覚えてきますので是非マスターしていってください。
▼この記事のポイント
最初に覚えるべきfigmaのショートカットを紹介
まずはfigmaの全ショートカットを見てみよう
実はfigmaではアプリ内で全ショートカットを見ることができます。
ショートカット参照のためのショートカットキーがこちらです。
- Win &Mac：Ctrl + Shift + ? ショートカット一覧表表示
入力すると下記のようなチートシート画面が出てきます。
一度でも使ったことがあるショートカットは水色になっており、使ったことがないショートカットは黒塗りになっていますので、これまでショートカットをたくさん使ってきた方はここの黒色のみ見ていただくと新しい発見があるかもしれません。
この後の章では上記のショートカットの中でもよく使うショートカットに絞ってご紹介してゆきます。
figmaのUI操作系ショートカット
サイドメニューの表示/非表示を切り替える
- Win：Ctrl + \(バックスラッシュ） Mac：⌘コマンド + \
エディタ画面左右にあるプロパティ画面の表示/非表示を切り替えることができます。
プロパティ画面は作業スペースの確保したい時に時に邪魔になることがあります。
そんな時にショートカットで素早く切り替えができて便利です。
アートボード全体を見渡したい
- Win &Mac：Shift + 1 全体を見渡す倍率にする
- Win &Mac：Shift + 2 選択したフレームを見渡す倍率にする
- Win &Mac：Shift + N フレームを順に見渡す倍率にする
続いてはアートボードで全体を俯瞰したい時に使うショートカットです。
デザインをしているとオブジェクトに集中してデザインしているかと思いますが、全体を俯瞰することも重要です。倍率を変えていくのも１つの時間がかかってしまいます。
ショートカットを使えば一発で画面いっぱいに全体が見えるような倍率にしてくれます。
ズームをする
- Win：Ctrl + +/– Mac : ⌘コマンド + +/– 拡大縮小
- Win &Mac : z + ドラッグ 選択部分をズームする
他にも一般的な方法としてCtrl(Macは⌘)を押しながらマウスホイールを回転させることでも可能です。
選択部分のズームではドラッグで選択した範囲を画面いっぱいに表示することができます。
Shift+1で全体を見渡してz+ドラッグでズーム、編集が終わったらShift+1で全体を見る。という流れをよく使います。
クイックアクションでプラグイン呼び出し
- Win：Ctrl + / Mac：⌘コマンド + / クイックアクション呼び出し
クイックアクションとはmacのspotlightのような機能であり、figma内の様々な機能を検索して実行できます。
呼び出した後に例えばプラグイン名を入力すると呼び出すことができます。
プラグインの他にもコピーやペーストといった機能自体の呼び出しもすることができます。
ショートカットを忘れてしまったり、ショートカットが設定されていない機能を呼び出す場合に非常に有効な機能です。
プロパティ操作系ショートカット
書式だけをコピペする
- Win : Ctrl + Alt + C/V Mac：⌘コマンド + Option + C/V スタイルコピー/ペースト
スタイルコピーという機能は文字色やフォントサイズ等のスタイルのみをコピーして貼り付けることができます。
スタイルコピーについては下記の記事でも解説していますので興味のある方は覗いてみてください。
https://www.kentosjpn.com/web/6/
カラーピッカーで色コードを調べる
- Win：i Mac：Ctrl + c カラーピッカー(スポイトツール）
写真の色コードを抽出したい時に便利なスポイトツールです。
オブジェクトを画像としてコピペする
- Win：Ctrl + Shift + C Mac：⌘コマンド + Shift + C 選択したオブジェクトをpngでコピーする
例えば他のエクセルシートにフレームの画像を貼り付けたいといった場合に、いちいち画像でエクスポートしてからインポートするのは手間です。
そんな時にはpngとしてコピーして直接貼り付けましょう。
レイアウトで便利なショートカット
グリッドを表示/非表示
- Win：Ctrl + Shift + 4 Mac：Ctrl + G グリッド線の表示非表示を切り替える。
グリッド線とはレイアウトをする際の指標となる分割線のことを言います。
詳しくは下記の記事で紹介していますのでご確認ください。
https://www.kentosjpn.com/web/5/
アウトライン表示に切り替える
- Win：Ctrl + Shift + 3 Mac：Ctrl + Y アウトライン表示の切替/切戻
アウトライン表示は図形の輪郭だけを切り抜いた状態を見ることができます。
文字色や写真は一旦置いておき単純なレイアウトの観点に集中したい時には便利な機能ですね。
オブジェクトのレイヤを移動する
- Win: Ctrl + [/] Mac：⌘コマンド + [/] オブジェクトのレイヤーを１段ずつ下/上に移動する。
オブジェクトの構成が複雑になってくると新しく配置した図形が下のレイヤーに行ってしまって見えないことがあります。そんな時にはショートカットでレイヤーを操作してみてください。
グループ・コンポーネント系ショートカット
コンポーネントを作る・解除する
- Win：Ctrl + Alt + K/B Mac：⌘コマンド + オプション + K/B コンポーネントを作る/解除する
選択したオブジェクトをコンポーネント化します。
コンポーネントを挿入する
- Win &Mac：Shift + i コンポーネントを検索して挿入する。
作成したコンポーネントは通常ウィンドウ左にあるメニューのAssetsタブから挿入することができますが、このショートカットを使うと一発で検索から挿入まで可能です。
グループ化・解除する
- Win：Ctrl + G (+ Shift) Mac：⌘コマンド + G (+ Shift) グループ化(解除）
まとめ
本日はfigmaで使える便利なショートカットをご紹介しました。
数あるショートカットの中でも特によく使うものに絞っていますのでまずはこれらのショートカットからマスターしてみてください！
覚えるまでは逆に時間がかかってしまうかもしれませんがマスターすれば必ず作業効率化につながるかと思います。
