見出し画像

覚えると便利!よく使うFigmaショートカット(総集編)

こんにちは!Webデザイナーのいるそらです!
時短に欠かせないショートカットですが、もちろんFigmaにも存在します。
本記事では初心者さん向けに、これまでに紹介してきた「覚えておくと便利なFigmaのショートカット」全6回の内容をまとめてご紹介します!


💻ショートカットとは

特定のキーを組み合わせてパソコンの操作手順を短縮することです。
例えばFigmaで移動ツールを選択したい場合、以下のキーを入力するだけで移動ツールに切り替えることができます。
Mac:V
Win :V

ショートカットならアイコンをクリックせずに切り替えが可能

本記事ではJISキーボード(日本語(かな)配列)を使用してショートカットを紹介しています。

次で紹介するショートカット一覧の「レイアウト」から、キーボードレイアウトの設定確認、変更ができる

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

下記ショートカットを入力するとFigmaの画面下部にショートカット一覧を表示することができます。
Mac:ControlShift?
Win :CtrlShift?
項目のタブが複数に分かれていて、たくさんのショートカットがあることがわかりますね。
使用したことのあるショートカットは水色に変わります。

画面下部に表示されるショートカット一覧

💻覚えておきたいショートカット

📝ツール編

ツールを切り替える時に使用するショートカットです。
メニューのアイコンをクリックせずに、ツールを切り替えられるようになるだけでも作業効率はかなり変わってきます。必ず覚えておきましょう!


移動ツール 
Mac:V
Win :V


フレームツール 
Mac:F
Win :F


テキストツール 
Mac:T
Win :T


長方形ツール 
Mac:R
Win :R


楕円ツール 
Mac:O
Win :O


色の選択 
Mac:I
Win :I


拡大縮小ツール 
Mac:K
Win :K


セクションツール 
Mac:Shift+S
Win :Shift+S
後述のコンポーネントをまとめておく際などによく使います。


コメントの追加
Mac:C
Win :C
チームで制作する際などにメモ感覚でコメントのやりとりをできるのが便利です!


手のひらツール
Mac:H
Win :H
スペースキーを押している間は、手のひらツールと同様の操作が行えますので、そちらを利用する機会の方が多いと思います。


📝編集編

コピー & ペーストなど、Figma以外のツールでもよく使われるショートカットです。コマンドも同じことが多いのでこれを機会に覚えてしまいましょう!


元に戻す
Mac:Command+Z
Win :Ctrl+Z
間違えて作業をしてしまった際にひとつ前の状態に戻します。


やり直す
Mac:Command+Shift+Z
Win :Ctrl+Y
「元に戻す」で戻し過ぎてしまった際にひとつ先の状態に進めることができます。


コピー 
Mac:Command+C
Win :Ctrl+C


切り取り 
Mac:Command+X
Win :Ctrl+X


貼り付け 
Mac:Command+V
Win :Ctrl+V


複製 
Mac:Command+D
Win :Ctrl+D


プロパティをコピー
Mac:Command+Option+C
Win :Ctrl+Alt+C
塗り・効果・線などの設定をコピーすることができます。


プロパティの貼り付け
Mac:Command+Option+V
Win :Ctrl+Alt+V
「プロパティをコピー」でコピーした設定を他オブジェクトへ貼り付けることができます。デザインを揃えたい時に便利です。



📝コンポーネント編

コンポーネントはデザインを複製する際に便利な機能です。
基本デザインをコンポーネント化し、複製、編集することで、テキストや画像の違う同一デザインのオブジェクトを量産することができます。
詳しくは下記の記事をご確認ください。

コンポーネントの作成
Mac:Command+Option+K
Win :Ctrl+Alt+K


インスタンスの切り離し
Mac:Command+Option+B
Win :Ctrl+Alt+B
コンポーネントを解除したい時に使用します。
(コンポーネントを複製したものをインスタンスと呼びます)
切り離すと完全にひとつのオブジェクトとして独立します。
後から復元はできませんので注意が必要です。



📝配置編

レイヤー階層の上下関係の変更やオブジェクト同士の位置を揃えたりする際に使用するショートカットです。
ここでは詳しく触れませんが、レイヤー階層の上下関係は、Figmaでデザインする上で重要になるので覚えておきましょう。


前面へ移動
Mac:Command+]
Win :Ctrl+]


背面へ移動
Mac:Command+[
Win :Ctrl+[


最前面へ移動
Mac:]
Win :]


最背面へ移動
Mac:[
Win :[


左揃え
Mac:Option+A
Win :Alt+A


右揃え
Mac:Option+D
Win :Alt+D


上揃え
Mac:Option+W
Win :Alt+W


下揃え
Mac:Option+S
Win :Alt+S


左右中央揃え
Mac:Option+H
Win :Alt+H


上下中央揃え
Mac:Option+V
Win :Alt+V


左右等間隔に分布
Mac:Control+Option+H
Win :Alt+Shift+H


上下等間隔に分布
Mac:Control+Option+V
Win :Alt+Shift+V


均等配置
Mac:Control+Option+T
Win :Ctrl+Alt+Shift+T



📝オートレイアウト編

オブジェクト同士のレイアウトを自動で行ってくれるのが、オートレイアウトです。使いこなすことができれば作業効率が飛躍的に上がります!


オートレイアウトの追加
Mac:Shift+A
Win :Shift+A


オートレイアウトの削除
Mac:Option+Shift+A
Win :Alt+Shift+A



📝ズーム編

デザインする際は頻繁に画面の拡大縮小を行いますので、その際にもショートカットが役に立ちます。


100%ズーム
Mac:Command+0
Win :Ctrl+0
実際のサイズでどう見えるのかの確認は必ず必要になりますので、これは覚えておきましょう。


ズームイン
Mac:Command++
Win :Ctrl++


ズームアウト
Mac:Command+-
Win :Ctrl+-


Mac:Command  /  Win:Ctrl  を押しながらマウスホイールを回転させることで、より細かく拡大縮小ができます。慣れるとそちらを使う頻度が高いです!


🌟最後に

今回は初心者さん向けに、覚えておくと便利なFigmaのショートカット(総集編)をご紹介しました。
第1回~6回にわたって使用頻度高めのショートカットを取り上げてきましたが、いかがでしたでしょうか?
全てを一気に覚えるのは大変かと思いますので、まずは、ご自身の使用頻度の高いショートカットから覚えていただければと思います。
この内容がみなさんのお役に立てばうれしいです!
最後までご覧いただきありがとうございました!


✅ショートカットは覚えた!という方
コーディングの練習をしたい・もっと経験を積みたい方や、自分でデザインを作るにあたって参考にいろんなデザインデータを見てみたい!
そんな方はこちら記事もご覧ください👇


📖Figmaを初めて使う方、基礎から学びたい方にオススメ

よろしければサポートお願いします! いただいたサポートはクリエイターとしての活動費に使わせていただきます!