Figma実務でよく使うショートカット20選｜作業効率を上げる基本操作を解説

Figmaを使ってWebデザインやUIデザインをしていると、最初はマウス操作だけでも作業できます。

フレームを作る。

テキストを置く。

図形を配置する。

画像を入れる。

余白を調整する。

このような基本操作は、画面上のツールをクリックすれば進められます。

しかし、実務でFigmaを使うようになると、毎回マウスでツールを選んでいるだけでは、どうしても時間がかかります。

特に、Web制作の現場では、ワイヤーフレーム作成、デザイン作成、コンポーネント整理、Auto Layout調整、画像書き出し、コーディング確認など、Figma上で行う作業が多くあります。

そのため、よく使うショートカットを覚えておくと、作業スピードがかなり変わります。

ショートカットは、すべて覚える必要はありません。

まずは実務でよく使うものから覚えるだけで十分です。

この記事では、Figmaの実務でよく使うショートカットを20個に絞って紹介します。

Figma初心者の方、Webデザインを効率化したい方、コーディング前の確認作業をスムーズにしたい方は、ぜひ参考にしてください。

Figmaのショートカットはどこで確認できる？

Figmaには、ショートカット一覧を確認できる画面があります。

公式ヘルプでも、画面右下の「Help and resources」から「Keyboard shortcuts」を選ぶことで、Figmaのキーボードショートカットを確認できると案内されています。

また、Figmaのショートカットは、US QWERTY配列を基準にしているため、日本語キーボードや別配列のキーボードでは一部のキーが異なる場合があります。

そのため、この記事で紹介するショートカットを基本として覚えつつ、自分の環境で実際に反応するかも確認しておくと安心です。

MacとWindowsの表記について

この記事では、主にMacを基準に書きます。

Windowsの場合は、基本的に以下のように置き換えて考えてください。

Mac：Command
Windows：Ctrl

Mac：Option
Windows：Alt

Mac：Shift
Windows：Shift

例えば、Macで Command + D の場合、Windowsでは Ctrl + D になります。

Figmaを使っている環境によって多少異なる場合があるため、実際のショートカット一覧も合わせて確認してください。

1. フレーム作成：F

Figmaで最もよく使うショートカットのひとつが、フレーム作成の F です。

フレームは、Webページやアプリ画面を作るための土台です。

Webデザインでは、PC版のフレーム、スマホ版のフレーム、バナー用のフレーム、サムネイル用のフレームなど、さまざまなサイズのフレームを作ります。

毎回ツールバーからフレームツールを選ぶより、F を押してすぐにフレームを作れるようになると便利です。

実務では、以下のような場面で使います。

PC版デザインのフレームを作る
スマホ版デザインのフレームを作る
サムネイル用の1280×720フレームを作る
LPのセクション設計用フレームを作る

Figmaを触るなら、まず覚えておきたいショートカットです。

2. 選択ツール：V

V は選択ツールに戻るショートカットです。

Figmaでは、テキスト、図形、フレーム、ペンツールなどを使いますが、作業後に選択ツールへ戻る場面が非常に多いです。

例えば、テキストを入力した後、すぐに要素を移動したい場合があります。

そのたびにツールバーをクリックするのは手間です。

V を押せば、すぐに選択ツールに戻れます。

Figmaでは、何か操作した後に選択ツールへ戻る場面が多いため、使用頻度はかなり高いです。

3. テキスト作成：T

テキストを追加するときは T を使います。

Webデザインでは、見出し、本文、ボタン文言、ナビゲーション、キャプション、注釈など、多くのテキストを配置します。

そのたびにテキストツールをクリックしていると時間がかかります。

T を押して、すぐにテキスト入力できるようにしておくと便利です。

実務では、以下のような場面でよく使います。

見出しを追加する
ボタンの文言を入れる
ワイヤーフレームのラベルを作る
フォームの項目名を入れる
注釈テキストを追加する

Figmaでデザインを作るなら、必ず使うショートカットです。

4. 長方形作成：R

R は長方形を作るショートカットです。

長方形は、Figmaでかなり使います。

ボタンの背景、カードの枠、画像の仮置き、セクション背景、バナー、ワイヤーフレームのブロックなど、あらゆる場面で使います。

特にワイヤーフレーム作成では、画像の代わりにグレーの長方形を置くことが多いため、R はかなり便利です。

例えば、以下のような使い方があります。

画像の仮置きを作る
カードの背景を作る
ボタンの背景を作る
セクション背景を作る
ワイヤーフレームのボックスを作る

Figma初心者は、F、T、R の3つを覚えるだけでも、作業がかなりスムーズになります。

5. 楕円作成：O

円や楕円を作りたいときは O を使います。

アイコンの背景、プロフィール画像の丸枠、装飾、ステップ番号、バッジなどで使うことがあります。

Webデザインでは長方形ほど頻繁ではありませんが、覚えておくと便利です。

例えば、

丸いアイコン背景を作る
プロフィール画像の枠を作る
番号付きステップの丸を作る
装飾用の円を作る

といった場面で使えます。

6. ペンツール：P

P はペンツールです。

自由な線やパスを描きたいときに使います。

Webデザインでは、複雑なイラストを描く場面は少ないかもしれません。

しかし、矢印、吹き出し、簡単な装飾、アイコン調整などで使うことがあります。

例えば、デザイン上で簡単な線を引きたいときや、装飾的な曲線を作りたいときに便利です。

ただし、初心者の場合は使用頻度はそこまで高くありません。

まずは基本操作に慣れてから覚えても大丈夫です。

7. コメント：C

C はコメントツールです。

Figmaはチーム共有やレビューに強いツールなので、コメント機能を使う場面が多いです。

クライアント確認、ディレクター確認、デザイナーへの質問、コーダーへの補足などでコメントを残せます。

例えば、

この文言は確認中です
この画像は差し替え予定です
スマホ版の余白を確認してください
このボタンのリンク先を教えてください

といったコメントを該当箇所に残せます。

メールやチャットだけでやり取りすると、どこの話なのかわかりにくいことがあります。

Figma上に直接コメントを残せば、修正箇所が明確になります。

実務ではかなり便利なショートカットです。

8. 複製：Command + D

選択した要素を複製する場合は、Command + D を使います。

Windowsでは Ctrl + D です。

Figmaでは、同じパーツを何度も使うことが多いため、複製は非常によく使います。

例えば、

カードを複製する
ボタンを複製する
見出しパーツを複製する
リスト項目を複製する
アイコンを複製する

といった場面です。

特にカード一覧やFAQ、料金表などを作るときは、複製を多用します。

Command + C と Command + V でもコピーできますが、Command + D はその場で複製できるのでスムーズです。

9. コピー：Command + C

コピーは Command + C です。

Windowsでは Ctrl + C です。

Figmaに限らず一般的なショートカットですが、Figmaでも頻繁に使います。

テキスト、図形、フレーム、コンポーネント、画像などをコピーできます。

他のページやフレームに同じ要素を持っていきたい場合にも使います。

10. 貼り付け：Command + V

貼り付けは Command + V です。

Windowsでは Ctrl + V です。

コピーした要素を別の場所に貼り付けるときに使います。

Figmaでは、別ページや別ファイルから要素をコピーして貼り付けることもあります。

実務では、共通パーツや参考パーツを別ページから持ってくる場面も多いため、基本操作として必須です。

11. 元に戻す：Command + Z

作業を戻したいときは Command + Z です。

Windowsでは Ctrl + Z です。

Figmaで作業していると、

間違って削除した
位置をずらしてしまった
色を変えたけど戻したい
コンポーネントを誤って編集した
Auto Layoutの設定を間違えた

といったことがよくあります。

そのときにすぐ戻せるように、Command + Z は必ず覚えておきましょう。

特にAuto Layoutやコンポーネントを触っているときは、意図せず崩れることがあります。

焦っていろいろ触る前に、まず Command + Z で戻すのが安全です。

12. やり直し：Command + Shift + Z

元に戻した操作をやり直したいときは、Command + Shift + Z を使います。

Windowsでは Ctrl + Shift + Z です。

戻しすぎたときに便利です。

作業中に何度も試行錯誤する場合、UndoとRedoを使いこなせると安心です。

13. グループ化：Command + G

複数の要素をまとめたいときは、Command + G でグループ化できます。

Windowsでは Ctrl + G です。

例えば、アイコンとテキストをまとめたり、複数の図形を一つのまとまりとして扱いたいときに使います。

ただし、Figmaでは実務上、単なるグループよりもフレームやAuto Layoutを使った方が整理しやすい場面もあります。

グループは簡単にまとめたいときに便利ですが、レイアウト管理やレスポンシブを考える場合は、フレームやAuto Layoutも検討しましょう。

14. グループ解除：Command + Shift + G

グループを解除したいときは、Command + Shift + G を使います。

Windowsでは Ctrl + Shift + G です。

受け取ったFigmaデータで、要素がグループ化されていて中身を編集したいときに使うことがあります。

ただし、むやみに解除すると構造が崩れることもあるため、必要な場合だけ使いましょう。

特にコンポーネントやAuto Layout内の要素を触る場合は、解除してよいものか確認しながら操作するのがおすすめです。

15. Auto Layout追加：Shift + A

Figma実務で非常によく使うのが、Shift + A です。

これは、選択した要素にAuto Layoutを追加するショートカットです。

Auto Layoutは、ボタン、カード、フォーム、リスト、メニューなどでよく使います。

例えば、ボタンを作る場合、テキストを選択して Shift + A を押すと、テキストを含んだAuto Layoutフレームを作れます。

その後、paddingや背景色、角丸を設定すれば、文言に合わせてサイズが変わるボタンを作れます。

実務では、以下のような場面で使います。

ボタンを作る
カード内の要素を縦に並べる
アイコンとテキストを横並びにする
フォーム項目を整理する
FAQを作る
CTAエリアを作る

Figmaで効率よくデザインしたいなら、必ず覚えたいショートカットです。

16. フレーム化：Command + Option + G

選択した要素をフレーム化する場合は、Command + Option + G を使います。

Windowsでは Ctrl + Alt + G です。

Figmaでは、グループ化よりもフレーム化の方が便利な場面があります。

フレームにすると、Auto Layoutを設定したり、背景色を付けたり、Constraintsを使ったり、セクション単位で管理しやすくなります。

例えば、複数の要素をまとめてカードにしたい場合、フレーム化してからAuto Layoutを設定すると扱いやすくなります。

17. 要素を前面へ：Command + ]

選択した要素を前面に移動したいときは、Command + ] を使います。

Windowsでは Ctrl + ] です。

Figmaでは、要素の重なり順が重要です。

例えば、背景の上にテキストを置く、画像の上にラベルを置く、装飾を後ろに配置するなどの場面があります。

要素が隠れてしまった場合は、前面へ移動することで表示されることがあります。

18. 要素を背面へ：Command + [

選択した要素を背面に移動したいときは、Command + [ を使います。

Windowsでは Ctrl + [ です。

背景用の図形や装飾を後ろに回したいときに便利です。

例えば、セクション背景として長方形を置いたら、テキストが隠れてしまった場合があります。

そのときに Command + [ で背面へ送ると、テキストが前に表示されます。

19. 表示拡大：Command + +

画面を拡大したいときは、Command + + を使います。

Windowsでは Ctrl + + です。

細かいアイコンや余白、テキストの調整をするときに便利です。

Figmaではデザイン全体を見たり、細かいパーツを拡大して確認したりする場面が多いです。

ショートカットでズーム操作ができると、作業がかなりスムーズになります。

20. 表示縮小：Command + –

画面を縮小したいときは、Command + - を使います。

Windowsでは Ctrl + - です。

LP全体やページ全体のバランスを見るときに便利です。

拡大した状態で細かいパーツを調整した後、縮小して全体の見え方を確認する。

この行き来はFigma作業でよくあります。

ズームインとズームアウトはセットで覚えておきましょう。

実務で特に優先して覚えたいショートカット

20個紹介しましたが、最初から全部完璧に覚える必要はありません。

初心者の方は、まず以下の10個から覚えるのがおすすめです。

F：フレーム
V：選択
T：テキスト
R：長方形
Command + D：複製
Command + Z：元に戻す
Shift + A：Auto Layout
Command + G：グループ化
Command + Option + G：フレーム化
Command + + / -：拡大・縮小

この10個だけでも、Figmaでの作業スピードはかなり上がります。

特に Shift + A は、Auto Layoutを使ううえでとても重要です。

ボタンやカードを効率よく作りたい人は、早めに覚えておきましょう。

ショートカットを覚えるコツ

ショートカットは、一覧を眺めるだけではなかなか覚えられません。

実際の作業の中で、よく使うものから少しずつ覚えるのがおすすめです。

例えば、最初の1週間は以下だけ意識します。

F：フレーム
T：テキスト
R：長方形
V：選択

次に、複製やUndoを覚えます。

Command + D：複製
Command + Z：元に戻す

その後、Auto Layoutやフレーム化を覚えます。

Shift + A：Auto Layout
Command + Option + G：フレーム化

このように、段階的に覚えると負担が少なくなります。

また、Figmaのショートカット一覧画面では、自分が使ったショートカットが確認できるため、学習にも役立ちます。

「最近使っていないショートカット」を意識して使うと、少しずつ身についていきます。

ショートカットを使うメリット

ショートカットを使うメリットは、単に作業が早くなることだけではありません。

作業の流れが止まりにくくなることも大きなメリットです。

例えば、テキストを追加したいと思ったときに、ツールバーへカーソルを移動し、テキストツールをクリックして、キャンバスに戻る。

この小さな移動が何度も積み重なると、意外と時間がかかります。

ショートカットを使えば、考えた瞬間に操作できます。

そのため、デザインのリズムが崩れにくくなります。

また、実務では細かな修正が何度も発生します。

ボタンを複製する。

テキストを追加する。

余白を調整する。

フレームを作る。

Auto Layoutを設定する。

これらをショートカットで操作できると、修正対応も早くなります。

コーダーにもショートカットは必要？

Figmaのショートカットは、デザイナーだけでなくコーダーにも役立ちます。

コーダーはFigmaでデザインを大きく編集する機会は少ないかもしれません。

しかし、以下のような確認作業があります。

余白を確認する
テキスト情報を確認する
画像を書き出す
フレームを移動する
コメントを見る
要素を選択する
ズームして細部を見る

このとき、V、Command + +、Command + -、Option / Altでの距離確認、コメントツールなどを使えると便利です。

また、必要に応じて要素をコピーしたり、画像書き出し用に選択したりすることもあります。

Figmaを「見るだけ」の立場でも、基本ショートカットを覚えておくと作業効率が上がります。

ショートカットを使うときの注意点

ショートカットは便利ですが、注意点もあります。

まず、キーボード配列によって一部のショートカットが違うことがあります。

Figmaの公式ヘルプでも、デフォルトのショートカットはUS QWERTY配列を基準としていると説明されています。

日本語キーボードでは、記号系のショートカットがうまく動かないこともあります。

その場合は、Figma内のショートカット一覧で自分の環境に合ったキーを確認しましょう。

また、ショートカットを押し間違えると、意図しない操作になることもあります。

例えば、削除、Detach、グループ解除、レイヤー移動などは、気づかないうちにデータに影響する場合があります。

操作に不安があるときは、こまめにUndoできるようにしておきましょう。

実務で使いやすいショートカット一覧

最後に、今回紹介したショートカットをまとめます。

1. F：フレーム作成
2. V：選択ツール
3. T：テキスト作成
4. R：長方形作成
5. O：楕円作成
6. P：ペンツール
7. C：コメント
8. Command + D：複製
9. Command + C：コピー
10. Command + V：貼り付け
11. Command + Z：元に戻す
12. Command + Shift + Z：やり直し
13. Command + G：グループ化
14. Command + Shift + G：グループ解除
15. Shift + A：Auto Layout追加
16. Command + Option + G：フレーム化
17. Command + ]：前面へ
18. Command + [：背面へ
19. Command + +：表示拡大
20. Command + -：表示縮小

Windowsの場合は、CommandをCtrl、OptionをAltに置き換えて考えるとわかりやすいです。

まとめ

Figmaのショートカットを覚えると、WebデザインやUIデザインの作業効率が大きく上がります。

特に実務では、フレーム作成、テキスト追加、図形作成、複製、Undo、Auto Layout、フレーム化、ズーム操作などを何度も使います。

毎回マウスでツールを選ぶより、ショートカットで素早く操作できるようになると、作業の流れが止まりにくくなります。

初心者の方は、最初からすべてを覚える必要はありません。

まずは、以下の基本ショートカットから始めましょう。

F：フレーム
V：選択
T：テキスト
R：長方形
Command + D：複製
Command + Z：元に戻す
Shift + A：Auto Layout

このあたりを自然に使えるようになるだけでも、Figma作業はかなり楽になります。

慣れてきたら、グループ化、フレーム化、前面・背面移動、コメント、ズーム操作なども覚えていきましょう。

Figmaは、機能を知っているだけではなく、素早く扱えるようになることで実務での価値が高まります。

ショートカットを少しずつ覚えて、効率よく、迷わず、スムーズにデザイン作業を進められるようにしていきましょう。