上の練習で出題されるFigmaのショートカットキーを、すべて一覧にまとめました。WindowsとMacそれぞれのキーと、その操作が何をするものかの解説を載せています。気になるものを見つけたら、練習で実際に指を動かして覚えてください。
| 操作 | Windows | Mac | 解説 |
|---|---|---|---|
| 親のレイヤーを選択する | Ctrl+Shift+Enter | ⇧+Enter | 現在選択しているレイヤーの、ひとつ上の階層(親)にあるレイヤーやフレームを選択し直す操作です。ネストが深い構造の中で、子要素から親グループやフレームへすばやく視点を移したいときに使います。 |
| 子のレイヤーを選択する | Enter | Enter | 現在選択しているグループやフレームの内部にある、ひとつ下の階層(子)のレイヤーを選択する操作です。中身を編集したいときに、ダブルクリックせずキーボードだけで階層を掘り下げられます。 |
| 次のレイヤーを選択 | Tab | Tab | 同じ階層内で、現在選択しているレイヤーの次の要素へ選択を移す操作です。レイヤーパネルを見なくても、キーボードだけで隣接する要素を順番に確認したいときに便利です。 |
| 前のレイヤーを選択 | Shift+Tab | ⇧+Tab | 同じ階層内で、現在選択しているレイヤーの一つ前の要素へ選択を移す操作です。次のレイヤーへ進みすぎたときや、逆順に要素を確認したいときに使います。 |
| 選択レイヤーを次レイヤーと入れ替え | Ctrl+] | ⌘+] | 選択中のレイヤーを、重なり順(z-index)でひとつ後ろのレイヤーと入れ替える操作です。マウスでの並べ替えが難しい細かい重なり順の調整を、キーボードだけで一段階ずつ行えます。 |
| 選択レイヤーを前レイヤーと入れ替え | Ctrl+[ | ⌘+[ | 選択中のレイヤーを、重なり順(z-index)でひとつ前のレイヤーと入れ替える操作です。デザインの一部だけを手前に出したいときなど、細かい重なり順の調整に使います。 |
| 選択レイヤーを一番下に下げる | ] | ] | 選択中のレイヤーを重なり順の一番下(背面)に移動する操作です。背景として使いたい要素や、他の要素の後ろに隠したい要素を配置するときに使います。 |
| 選択レイヤーを一番上に上げる | [ | [ | 選択中のレイヤーを重なり順の一番上(前面)に移動する操作です。他の要素に隠れてしまった要素を手前に出したいときに使います。 |
| 選択レイヤーの表示・非表示を切り替える | Ctrl+Shift+H | ⌘+⇧+H | 選択中のレイヤーの表示・非表示を切り替える操作です。削除せずに一時的にレイヤーを隠して作業したいときや、表示状態を比較しながら確認したいときに使います。 |
| 選択レイヤーのロック・ロック解除を切り替える | Ctrl+Shift+L | ⌘+⇧+L | 選択中のレイヤーのロック状態を切り替える操作です。誤って移動・編集してしまうのを防ぎたいレイヤーに使うと、他の要素を編集する際に巻き込んでしまう事故を防げます。 |
| 同じ階層のすべてのレイヤーを選択 | Ctrl+A | ⌘+A | 現在の階層にあるすべてのレイヤーをまとめて選択する操作です。同じフレームや親要素の中の要素全体に対して、一括で移動・整列・スタイル変更をしたいときに使います。 |
| 選択範囲の反転 | Ctrl+Shift+A | ⌘+⇧+A | 現在の選択を反転し、選択していなかった要素を選択・選択していた要素を非選択にする操作です。多数の要素から一部だけを除外したいとき、除外したい要素だけ先に選んでから反転させると効率的です。 |
| 選択を解除する | Esc | Esc | 現在の選択状態を解除する操作です。誤って選択した要素を編集してしまうのを防ぎたいときや、まっさらな状態から新しい操作を始めたいときに使います。 |
| 選択レイヤーのグループ化 | Ctrl+G | ⌘+G | 選択している複数のレイヤーを1つのグループにまとめる操作です。関連する要素をまとめて移動・複製・非表示にしたいときに使うと、レイヤーパネルの見通しもよくなります。 |
| 選択レイヤーのグループ化解除 | Ctrl+Shift+G | ⌘+⇧+G | 選択しているグループをばらし、中の要素を個別のレイヤーに戻す操作です。グループの中の1つだけを個別に編集したいときに使います。 |
| 選択レイヤーのフレーム化 | Ctrl+Alt+G | ⌘+⌥+© | 選択しているレイヤーをフレームに変換する操作です。単なる図形やグループをフレームにすることで、クリッピングやAuto Layout、レスポンシブな余白設定などフレーム特有の機能を使えるようになります。 |
| 選択中のレイヤーをAuto Layout化 | Shift+A | ⇧+A | 選択中のレイヤーにAuto Layoutを適用する操作です。要素の追加・削除に応じて余白や配置を自動調整させたいとき、ボタンやリストなど整列を保ちたいコンポーネントを作るときに使います。 |
| 選択中のレイヤーのAuto Layout解除 | Alt+Shift+A | ⌥+⇧+Å | 選択中のレイヤーからAuto Layoutを解除する操作です。自動配置ではなく要素を自由な位置に個別配置し直したいときに使います。 |
| 操作 | Windows | Mac | 解説 |
|---|---|---|---|
| 移動ツールに切り替え | v | v | オブジェクトの選択・移動を行う移動ツール(V)に切り替える操作です。図形やテキストの描画ツールを使ったあとに、通常の選択・編集モードへ素早く戻りたいときに使います。 |
| フレームツールに切り替え | f | f | 新しいフレームを作成するフレームツール(F)に切り替える操作です。画面やアートボードの単位を作ってレイアウトを組み始めるときに使います。 |
| ペンツールに切り替え | p | p | アンカーポイントをつないでベクターパスを描くペンツール(P)に切り替える操作です。直線や曲線を組み合わせた自由な形状のアイコンやイラストを作成するときに使います。 |
| 鉛筆ツールに切り替え | Shift+P | ⇧+P | フリーハンドでベクターパスを描く鉛筆ツール(Shift+P)に切り替える操作です。手描き風の線や、細かいアンカー配置を気にせずラフに図形を描きたいときに使います。 |
| テキストツールに切り替え | t | t | テキストを新規入力するテキストツール(T)に切り替える操作です。見出しや本文などの文字要素をキャンバスに追加したいときに使います。 |
| 長方形ツールに切り替え | r | r | 四角形を描画する長方形ツール(R)に切り替える操作です。ボタンやカード、背景ブロックなど矩形の要素を作りたいときに使います。 |
| 楕円ツールに切り替え | o | o | 円や楕円を描画する楕円ツール(O)に切り替える操作です。アイコンの土台やアバターの丸型フレームなど、円形の要素を作りたいときに使います。 |
| 線ツールに切り替え | l | l | 直線を描画する線ツール(L)に切り替える操作です。区切り線や罫線、矢印の下地などをキャンバスに追加したいときに使います。 |
| 矢印ツールに切り替え | Shift+L | ⇧+L | 矢印を描画する矢印ツール(Shift+L)に切り替える操作です。フローチャートや図解で要素間のつながりを示したいときに使います。 |
| コメントの追加 | c | c | キャンバス上の任意の位置にコメントを追加するコメントツール(C)に切り替える操作です。デザインに対するフィードバックや修正依頼をチームメンバーに残したいときに使います。 |
| 色の選択 | i | i | 画面上の色を吸い取るスポイト(カラーピッカー)ツール(I)に切り替える操作です。既存の要素と色を厳密に一致させたいときに使います。 |
| スライスツール | s | s | 画面の一部を書き出し範囲として切り出すスライスツール(S)に切り替える操作です。デザインの特定部分だけを画像として書き出したいときに使います。 |
| 操作 | Windows | Mac | 解説 |
|---|---|---|---|
| UIの表示切り替え | Ctrl+\ | ⌘+\ | レイヤーパネルやプロパティパネルなど画面周辺のUIを非表示・表示する操作です。作業中のデザインを画面いっぱいに表示して細部を確認したいときに使います。 |
| 定規の表示切り替え | Shift+R | ⇧+R | キャンバス上部・左側の定規(ルーラー)の表示・非表示を切り替える操作です。座標やサイズを目視で確認しながら要素を配置したいときに使います。 |
| アウトラインの表示切り替え | Shift+O | ⇧+O | すべてのレイヤーの境界線(アウトライン)だけを表示するアウトラインモードに切り替える操作です。塗りや画像を無視してレイヤーの構造や重なりを確認したいときに使います。 |
| 操作 | Windows | Mac | 解説 |
|---|---|---|---|
| １００％ズーム | Ctrl+0 | ⌘+0 | キャンバスの表示倍率を100%にリセットする操作です。拡大・縮小を繰り返して倍率が分からなくなったときに、実寸大の見た目に一発で戻せます。 |
| 操作 | Windows | Mac | 解説 |
|---|---|---|---|
| 太字にする | Ctrl+B | ⌘+B | 選択したテキストを太字にする操作です。見出しや強調したい語句を目立たせたいときに使います。 |
| 斜体にする | Ctrl+I | ⌘+I | 選択したテキストを斜体(イタリック)にする操作です。引用や補足的なニュアンスを持たせたい文字列に使います。 |
| 下線を引く | Ctrl+U | ⌘+U | 選択したテキストに下線を引く操作です。リンクや強調したい部分を視覚的に示したいときに使います。 |
| リンクの作成 | Ctrl+K | ⌘+K | 選択したテキストにハイパーリンクを設定する操作です。プロトタイプやデザインカンプから外部URLへ遷移させたいときに使います。 |
| 取り消し線 | Ctrl+Shift+X | ⌘+⇧+X | 選択したテキストに取り消し線を引く操作です。修正前の内容を残しつつ、削除・変更したことを示したいときに使います。 |
| リストに変換 | Ctrl+Shift+7 8 | ⌘+⇧+7 8 | 選択したテキストを箇条書き・番号付きリストに変換する操作です。手順や項目を整理して見やすく表示したいときに使います。 |
| 左揃えにする | Ctrl+Alt+L | ⌘+⌥+¬ | 選択したテキストを左揃えにする操作です。段落やテキストブロックの開始位置を左端に統一したいときに使います。 |
| 中央揃えにする | Ctrl+Alt+T | ⌘+⌥+† | 選択したテキストを中央揃えにする操作です。見出しやキャッチコピーなどをブロックの中央に配置したいときに使います。 |
| 右揃えにする | Ctrl+Alt+R | ⌘+⌥+® | 選択したテキストを右揃えにする操作です。数値や日付など、右端を基準に揃えたい文字列に使います。 |
| 両端を揃える | Ctrl+Alt+J | ⌘+⌥+∆ | 選択したテキストの行の両端(左右)を揃える(ジャスティファイ)操作です。段落全体の行幅をきれいに揃えて、整った印象のレイアウトにしたいときに使います。 |
| フォントサイズを大きくする | Ctrl+Shift+> | ⌘+⇧+> | 選択したテキストのフォントサイズを1段階大きくする操作です。数値入力欄を開かずに、素早く文字サイズを調整したいときに使います。 |
| フォントサイズを小さくする | Ctrl+Shift+< | ⌘+⇧+< | 選択したテキストのフォントサイズを1段階小さくする操作です。数値入力欄を開かずに、素早く文字サイズを調整したいときに使います。 |
| フォントを太くする | Ctrl+Alt+> | ⌘+⌥+> | 選択したテキストのフォントウェイト(太さ)を1段階上げる操作です。Bold指定とは別に、Regular→Mediumのように細かくウェイトを調整したいときに使います。 |
| フォントを細くする | Ctrl+Alt+< | ⌘+⌥+< | 選択したテキストのフォントウェイト(太さ)を1段階下げる操作です。太すぎる印象を和らげたいときなど、ウェイトを細かく調整したいときに使います。 |
| 文字間隔を広げる | Alt+> | ⌥+> | 選択したテキストの文字間隔(トラッキング)を広げる操作です。見出しをゆったり見せたいときや、読みやすさを調整したいときに使います。 |
| 文字間隔を狭める | Alt+< | ⌥+< | 選択したテキストの文字間隔(トラッキング)を狭める操作です。文字を詰めてコンパクトに見せたいときや、長い見出しを収めたいときに使います。 |
| 行間を広げる | Alt+Shift+> | ⌥+⇧+> | 選択したテキストの行間(行送り)を広げる操作です。段落を読みやすくしたいときや、ゆとりのあるレイアウトにしたいときに使います。 |
| 行間を狭める | Alt+Shift+< | ⌥+⇧+< | 選択したテキストの行間(行送り)を狭める操作です。テキストをコンパクトに収めたいときや、密度の高いレイアウトにしたいときに使います。 |
| 操作 | Windows | Mac | 解説 |
|---|---|---|---|
| 塗りの削除 | Alt+/ | ⌥+÷ | 選択したレイヤーの塗り(フィル)を削除する操作です。図形の枠線だけを残したいときや、背景色をなくして透明にしたいときに使います。 |
| 線の削除 | Shift+? | ⇧+? | 選択したレイヤーの線(ストローク)を削除する操作です。枠線だけを取り除いて塗りのみのシンプルな図形にしたいときに使います。 |
| 塗と線の色を入れ替える | Shift+X | ⇧+X | 選択したレイヤーの塗りの色と線の色を入れ替える操作です。配色パターンを素早く試したいときや、反転させたバリエーションを作りたいときに使います。 |
| 操作 | Windows | Mac | 解説 |
|---|---|---|---|
| 複製 | Ctrl+D | ⌘+D | 選択しているレイヤーを複製する操作です。同じ要素を少しずつ位置や内容を変えて量産したいとき、コンポーネントのバリエーションを作りたいときに使います。 |
| 検索 | Ctrl+F | ⌘+F | レイヤー名やテキスト内容を検索するパネルを開く操作です。要素数の多いファイルの中から目的のレイヤーやテキストをすばやく見つけたいときに使います。 |
| 左右反転 | Shift+H | ⇧+H | 選択したレイヤーを左右に反転させる操作です。アイコンの向きを変えたいときや、対称的なデザインを素早く作りたいときに使います。 |
| 上下反転 | Shift+V | ⇧+V | 選択したレイヤーを上下に反転させる操作です。要素を鏡写しにしたいときや、対称的なレイアウトを素早く作りたいときに使います。 |