Figmaのショートカットを覚えると、作業効率を格段にアップすることができます。本記事では便利なショートカットを一覧にして紹介します。
Figmaに搭載された「キーボードショートカット」機能の使い方
主なショートカット一覧を紹介する前に、Figmaに搭載された「キーボードショートカット」機能の使い方を説明します。
Figmaには、チートシートのようなショートカットの一覧を表示させる機能があります。基本的なショートカットは覚えてしまうほうが便利ですが、普段はあまり使わないショートカットなどは、この機能を使って確認すると便利です。
1.メニューから「キーボードショートカット」を選択
画面上部にあるメニューバーから「ヘルプ」をクリックし、表示されたメニュー項目の中から「キーボードショートカット」を選択します。
Screenshot
別ルート：Figmaのアイコン（左上のロゴ）をクリックし、表示されたメニュー項目の中から「キーボードショートカット」を選択することも可能です。
ショートカットキー：Macの場合は Control + Shift + ? のキーを押すことで表示されます。
2.キーボードショートカットの一覧が表示される
操作を行うと、画面下部にキーボードショートカットの一覧（チートシートパネル）が表示されます。
主なショートカット一覧
ここからは、主なショートカット一覧を紹介します。
本記事ではMacのキー操作をWindowsに置き換えた情報を掲載しており、Windowsに関しては実機による確認はしていません。機種やOSのバージョン等で微妙に異なる可能性もありますので、実際に自分で前述のキーボードショートカットの表示で確認してみてください。
以下は、MacとWindowsで異なるキーに関する対照表になります。Windowsに関するショートカットの情報は、ネット検索等でも見つからない種類がありますが、基本的には以下の対照表を参考にして操作することでMacと同じショートカットになります。
修飾キーの対照表
| Mac | Windows |
|---|---|
| Command (⌘) | Ctrl (もしくはWindowsキー) |
| Option (⌥) | Alt |
| Shift (⇧) | Shift |
| Delete, BackSpace (⌫) | BackSpace / Delete |
これだけは覚えておきたい基本のショートカット
Figmaだけでなく、さまざまなアプリケーション・ソフトに共通する基本のショートカットです。
| 機能名 | Mac | Windows |
|---|---|---|
| 取り消し（アンドゥ） | Command + Z | Ctrl + Z |
| やり直し（リドゥ） | Command + Y | Ctrl + Y |
| すべてを選択 | Command + A | Ctrl + A |
| 選択を解除 | Esc | Esc |
| 切り取り（カット） | Command + X | Ctrl + X |
| コピー | Command + C | Ctrl + C |
| ペースト | Command + V | Ctrl + V |
| 保存 | Command + S | Ctrl + S |
ツール関連
各ツールに切り替えるショートカットです。
| 機能名 | Mac | Windows |
|---|---|---|
| 移動ツール | V | V |
| フレームツール | F | F |
| スライスツール | S | S |
| 長方形ツール | R | R |
| 楕円ツール | O | O |
| 直線ツール | L | L |
| 矢印ツール | Shift + L | Shift + L |
| ペンツール | P | P |
| 鉛筆ツール | Shift + P | Shift + P |
| テキストツール | T | T |
| カラーの選択（スポイト） | I | I |
| コメントの追加 | C | C |
表示関連
サイドバーやパネルなど、作業画面の表示に関するショートカットです。
| 機能名 | Mac | Windows |
|---|---|---|
| UIの表示/非表示 | Command + \ | Ctrl + \ |
| 定規の表示/非表示 | Shift + R | Shift + R |
ズーム関連
ズームに関するショートカットです。
| 機能名 | Mac | Windows |
|---|---|---|
| ズームイン | Command + + | Ctrl + + |
| ズームアウト | Command + – | Ctrl + – |
| 100%ズーム | Command + 0 | Ctrl + 0 |
| 自動ズーム調整（画面全体に収める） | Shift + 1 | Shift + 1 |
| 選択範囲に合わせてズーム | Shift + 2 | Shift + 2 |
テキスト関連
テキスト編集に関するショートカットです。
| 機能名 | Mac | Windows |
|---|---|---|
| 太字 | Command + B | Ctrl + B |
| 斜体（イタリック） | Command + I | Ctrl + I |
| 下線 | Command + U | Ctrl + U |
| リンクの作成 | Command + K | Ctrl + K |
| 取り消し線 | Shift + Command + X | Ctrl + Shift + X |
| リストに変換（番号付きのリスト） | Shift + Command + 7 | Ctrl + Shift + 7 |
| リストに変換（番号なしのリスト） | Shift + Command + 8 | Ctrl + Shift + 8 |
| テキスト左揃え | Option + Command + L | Ctrl + Alt + L |
| テキスト中央揃え | Option + Command + T | Ctrl + Alt + T |
| テキスト右揃え | Option + Command + R | Ctrl + Alt + R |
| テキスト両端揃え | Option + Command + J | Ctrl + Alt + J |
| フォントサイズの調整 | Shift + Command + < と > | Shift + Ctrl + < と > |
| フォントの太さ調整 | Option + Command + < と > | Alt + Ctrl + < と > |
| 文字間隔の調整 | Option + < と > | Alt + < と > |
| 行間を調整 | Option + Shift + < と > | Alt + Shift + < と > |
選択関連
シェイプやテキストといったオブジェクトの選択に関するショートカットです。
| 機能名 | Mac | Windows |
|---|---|---|
| 選択範囲を反転 | Shift + Command + A | Shift + Ctrl + A |
| 子要素を選択 | Enter | Enter |
| 親要素を選択 | Shift + Enter | Shift + Enter |
| 選択範囲のグループ化 | Command + G | Ctrl + G |
| 選択範囲のグループ解除 | Command + Shift + G (または Command + BackSpace) | Ctrl + Shift + G |
| 選択範囲のフレーム化 | Command + Option + G | Ctrl + Alt + G |
| 選択範囲の表示/非表示 | Shift + Command + H | Shift + Ctrl + H |
| 選択範囲のロック/ロック解除 | Shift + Command + L | Shift + Ctrl + L |
編集関連
コピー、ペースト、複製といった編集に関するショートカットです。
| 機能名 | Mac | Windows |
|---|---|---|
| 複製（デプリケート） | Command + D | Ctrl + D |
| 検索 | Command + F | Ctrl + F |
| PNGとしてコピー | Shift + Command + C | Shift + Ctrl + C |
| プロパティをコピー | Option + Command + C | Alt + Ctrl + C |
| プロパティを貼り付け | Option + Command + V | Alt + Ctrl + V |
変換・配置関連
オブジェクトの反転や重なり順の配置など変換に関するショートカットです。
| 機能名 | Mac | Windows |
|---|---|---|
| 左右反転 | Shift + H | Shift + H |
| 上下反転 | Shift + V | Shift + V |
| 最前面に移動 | Command + ] | Ctrl + ] |
| 最背面に移動 | Command + [ | Ctrl + [ |
| 前面に移動 | Command + Option + ] | Ctrl + Shift + ] |
| 背面に移動 | Command + Option + [ | Ctrl + Shift + [ |
| 左/右揃え | Option + A (左) / Option + D (右) | Alt + A (左) / Alt + D (右) |
| 上/下揃え | Option + W (上) / Option + S (下) | Alt + W (上) / Alt + S (下) |
| 中央揃え（水平/垂直） | Option + H (水平) / Option + V (垂直) | Alt + H (水平) / Alt + V (垂直) |
| 等間隔に分布（水平/垂直） | Control + Option + H (水平) / Control + Option + V (垂直) | Shift + Alt + H (水平) / Shift + Alt + V (垂直) |
| 均等配置 | Control + Option + T | Shift + Alt + T |
| マスクとして使用 | Control + Command + M | Ctrl + Alt + M |
| シェイプまたはベクターの編集 | Enter | Enter |
| 画像を配置 | Shift + Command + K | Shift + Ctrl + K |
コンポーネント関連
コンポーネントに関するショートカットです。
| 機能名 | Mac | Windows |
|---|---|---|
| アセットの表示 | Option + 2 | Alt + 2 |
| コンポーネントの作成 | Option + Command + K | Alt + Ctrl + K |
ショートカットのカスタマイズ
ショートカットをカスタマイズしたいケースもあるかと思います。しかし、Figma本体には、ショートカットをカスタマイズする機能は搭載されていません。macOSでカスタマイズする際は、OS側の設定として以下の方法を用います。
1.システム環境設定から「キーボード」を選択
Macのシステム環境設定を開き、メニューアイコンの中から「キーボード」という項目を選択します。「キーボード」を選択すると「キーボードショートカット」というボタンが表示されるので、これをクリックします。
2.アプリケーションにある＋マークをクリック
表示されたアイコンメニューの中から「アプリケーション」を選択し、右側に表示された「＋」マークのアイコンをクリックします。
3.アプリケーションで「Figma」を選択
アプリケーションの欄にあるプルダウンメニューをクリックすると、アプリケーション一覧が表示されるので「Figma」を選択します。
4.ショートカットを設定し「完了」をクリック
対象の「メニュータイトル」と、割り当てたい「キーボードショートカット」を入力・設定し、右下にある「完了」ボタンをクリックすると、ショートカットを独自にカスタマイズできます。
まとめ
ショートカットは全てを覚える必要はありません。自分の作業内容に合わせて、よく使うコマンドのショートカットを覚えるようにしましょう。Figmaは、繰り返し同じコマンドを使うことが多いソフトウェアなので、作業効率が大幅に向上するはずです。
プロのWebデザイナーやエンジニアは、必ず作業効率をアップさせるためにショートカットを取り入れています。Figma初心者やあまりショートカットを使ってない人は、本記事を参照にして、ぜひ作業に取り入れてみてください。
お問い合わせ