Figmaのショートカットキー一覧（Mac版）

はじめに

エンジニアのみなさま、日々の学習本当にお疲れ様です！
また本記事まで足を運んでいただき本当に感謝です。
最後まで読んでもらえると幸いです。

---

案件で久しぶりにFigmaを操作する機会をいただきました。
ショートカットキーもだいぶ覚えてきたのですが全量を把握できてなかったので、以下に全て？記載しました。また個人的に重要なショートカットは『👌』列に『○』をつけました。これからFigmaを覚えていきたい方は『○』がついてるものを優先的に覚えてもらうと作業効率がUPすると思いますのでぜひ参考にしてください^_^

基本

とタブには書かれているのですが、個人的にはあまり使わないです。

キー	アクション	詳細	👌
@	UIの表示/非表示	ペインを非表示にして作業に集中する	○
⌃ + C	色の選択	任意の場所から色を選択
⌘ + K	アクション検索	メニュー、コマンド、プラグインを検索

ツール

Figmaを操作する時のベースの操作になります。
このショートカットにある『○』は全て使える様にするとかなり作業効率がUPします。

キー	アクション	詳細	👌
V	移動ツール	オブジェクトを移動する	○
F	フレームツール	フレームを作成または編集する	○
P	ペンツール	カスタムパスを描画する
⇧ + P	鉛筆ツール	フリーハンドでパスを描画する
T	テキストツール	テキストを入力または編集する	○
R	長方形ツール	長方形を描画する	○
O	楕円ツール	楕円を描画する	○
L	線ツール	線を描画する	○
⇧ + L	矢印ツール	矢印を描画する	○
C	コメントを表示	コメントモードを有効にする	○
⌃ + C	色の選択	任意の場所から色を選択する	○
S	スライスツール	スライスを作成または編集する

表示

この中でよく使う機能は『定規』と『レイアウトグリッド』になります。『レイヤーパネルを開く』から『プロトタイプパネルを開く』は両サイドにあるバーの中のタブを選択する操作になります。初めはマウス操作でどのタブに何があるかを理解してからショートカットキーを覚えるとスムーズに操作ができる様になると思います。

キー	アクション	詳細	👌
⌥ + ⌘ + @	マルチプレイヤーカーソル	チームメンバーのカーソルを表示/非表示
⇧ + D	開発モードを開く	開発者向けモードを有効	○
⇧ + R	定規	定規を表示/非表示	○
⇧ + ⌘ + O	アウトラインの表示	オブジェクトをアウトラインで表示	○
⇧ + ⌘ + P	ピクセルプレビュー	デザインをピクセル単位でプレビュー
⇧ + G	レイアウトグリッド	レイアウトグリッドを表示/非表示	○
⇧ + ¥	ピクセルグリッド	ピクセルグリッドを表示/非表示
⌥ + 1	レイヤーパネルを開く	レイヤーパネルを表示
⌥ + 2	アセットを開く	アセットパネルを表示
⌥ + 3	チームライブラリを開く	チームライブラリを表示
⌥ + 8	デザインパネルを開く	デザインパネルを表示
⌥ + 9	プロトタイプパネルを開く	プロトタイプパネルを表示

ズーム

ズーム関連のショートカットをマスターするとかなり時短になるので、こちらも操作に慣れてから覚えていくとスムーズだと思います。

キー	アクション	詳細	👌
スペース + ドラッグ	パン	自由に移動	○
⌘ + +	ズームイン	選択範囲にズーム	○
⌘ + -	ズームアウト	選択範囲をズームアウト	○
⌘ + 0	100%ズーム	標準倍率にズーム	○
⇧ + 1	自動ズーム調整	全体を見渡せるよう自動調整	○
⇧ + 2	選択範囲に合わせてズーム	選択した範囲にズーム	○
N	次のフレームにズーム	次のフレームをズーム表示
⇧ + N	前のフレームにズーム	前のフレームをズーム表示
fn + ↑	前のページ	現在のページから前に移動
fn + ↓	次のページ	現在のページから次に移動
fn + ←	前のフレームの検出	前のフレームを検出
fn + →	次のフレームを検出	次のフレームを検出

テキスト

全部マスターしましょう。

キー	アクション	詳細	👌
⌘ + B と ⌘ + I	太字/斜体	太字または斜体に設定	○
⌘ + U	下線	下線を追加	○
⇧ + ⌘ + U	リンクの作成	テキストにリンクを作成	○
⇧ + ⌘ + X	取り消し線	取り消し線を追加	○
⇧ + ⌘ + 7	リストに変換	テキストを数字リスト形式に変換	○
⇧ + ⌘ + 8	リストに変換	テキストを点リスト形式に変換	○
⌥ + ⌘ + L	テキスト左揃え	左揃えに設定	○
⌥ + ⌘ + T	テキスト中央揃え	中央揃えに設定	○
⌥ + ⌘ + R	テキスト右揃え	右揃えに設定	○
⌥ + ⌘ + J	テキスト両端揃え	両端揃えに設定	○
⇧ + ⌘ + < または ⇧ + ⌘ + >	フォントサイズの調整	フォントサイズを調整	○
⌥ + ⌘ + < または ⌥ + ⌘ + >	フォントの太さの調整	テキストの太さを調整	○
⌘ + < または ⌘ + >	文字間隔の調整	テキスト間の文字間隔を調整	○
⌥ + ⇧ + ⌘ + < または ⌥ + ⇧ + ⌘ + >	行間を調整	テキストの行間を調整	○

シェイプ

個人的にはシェイプ関連はあまり使わないです。というか使いこなせないです。
この辺りの操作をマスターするとFigma中級者になれた感じがします。

キー	アクション	詳細	👌
編集中
B	ペイントバケツ	シェイプの塗りつぶしに使用
⌘	曲線ツール	カーブ調整のツールを有効
⌥ + /	塗りを削除	塗りを削除
⇧ + /	線の削除	線を削除
⇧ + X	塗と線の色を入れ替える	塗りの色と線の色を交換
⌥ + ⌘ + O	線のアウトライン化	線をアウトラインに変換
⌘ + E	選択範囲を統合	選択したシェイプを統合
点を選択時
⌘ + J	選択範囲を結合	選択範囲を1つのシェイプに結合
⇧ + ⌘ + J	選択対象を結合	選択対象をスムーズな形状に結合
⇧ + ⌫	選択対象を削除・補完	選択対象を削除し形状を補完

選択

Figmaの操作で厄介なものの1つとして、オブジェクトのネストが深くなると選択しても対象の要素まで辿りつかない事があります。この辺りの操作をマスターすると、Figmaを操作するのがだいぶ楽になってきます。まずは『ネスト選択』をマスターして左のバーを確認し、要素がどの位置に配置されているかを確認していくと理解が深まると思います。

キー	アクション	詳細	👌
⌘ + A	すべて選択	キャンバス内のすべてのオブジェクトを選択
⇧ + ⌘ + A	選択範囲を反転	選択範囲を反転
Esc	選択を解除	選択を解除	○
⌘ + クリック	ネスト選択	グループ化されたオブジェクトをピンポイントに選択	○
Enter	子を選択	選択オブジェクトの子要素を選択	○
¥	親を選択	選択オブジェクトの親要素を選択	○
→ Tab	次の兄弟を選択	同じ階層内で次の兄弟要素を選択	○
⇧ + Tab	前の兄弟を選択	同じ階層内で前の兄弟要素を選択	○
⌥ + ⌘ + A	マッチングレイヤーを選択	条件に一致するレイヤーを選択
⌘ + G	選択範囲のグループ化	選択したオブジェクトをグループ化	○
⌘ + ⌫	選択範囲のグループ解除	グループ化されたオブジェクトを解除	○
⌥ + ⌘ + G	選択範囲のフレーム化	選択したオブジェクトをフレーム化	○
⇧ + ⌘ + H	選択範囲の表示/非表示	選択したオブジェクトを表示/非表示に切り替え
⇧ + ⌘ + L	選択範囲をロック/ロック解除	選択したオブジェクトをロック/解除	○

カーソル

個人的には『距離の測定』のショートカットは重宝してます。
デザインはバランスがとても重要なため、数値を見ながら配置していく事がほとんどです。最低限このショートカットをマスターすれば、バランスの取れたデザインが出来上がります。

キー	アクション	詳細	👌
ポイント中
⌥	距離の測定	ポインタ位置から選択範囲までの距離を測定	○
選択・移動
⌥	選択範囲の複製	移動中に選択範囲を複製	○
クリック中
⌘ + クリック	ネスト選択	グループ化されたオブジェクトを選択	○
ドラッグ中
⌘ + ドラッグ	長方形内部でネスト選択	長方形領域内のグループ化オブジェクトを選択
サイズ調整
⌥	中央からサイズ調整	中心点を基準にサイズを調整
⇧	縦横比を維持してサイズ調整	縦横比を固定したままサイズを調整	○
⌘	制約を無視	画像のトリミングやフレーム制約を無視

編集

パソコンのショートカットキーに慣れてる人は比較的簡単にマスターできるショートカットキーだと思います。

キー	アクション	詳細	👌
⌘ + C	コピー	選択したオブジェクトをコピー	○
⌘ + X	切り取り	選択したオブジェクトを切り取る	○
⌘ + V	貼り付け	クリップボードの内容を貼り付ける	○
⇧ + ⌘ + R	貼り付けて置換	既存のオブジェクトを置き換えて貼り付け	○
⇧ + ⌘ + V	選択範囲の上に貼り付け	現在の選択範囲の上に内容を貼り付ける	○
⌘ + D	複製	選択したオブジェクトを複製する	○
⌘ + R	選択範囲の名前を変更	選択したオブジェクトの名前を変更する	○
⇧ + ⌘ + E	エクスポート	選択したオブジェクトをエクスポートする
⌘ + F	検索	ファイル内で検索を行う	○
⇧ + ⌘ + C	PNGとしてコピー	選択したオブジェクトをPNG形式でコピー	○
⌥ + ⌘ + C	プロパティをコピー	オブジェクトのプロパティをコピーする	○
⌥ + ⌘ + V	プロパティの貼り付け	コピーしたプロパティを貼り付ける	○

変換

透明度を数字入力することで簡単に実装できるのが今回操作してみて一番の感動ポイントでした。

キー	アクション	詳細	👌
⇧ + H	左右反転	オブジェクトを左右反転
⇧ + V	上下反転	オブジェクトを上下反転
⌃ + ⌘ + M	マスクとして使用	選択したオブジェクトをマスクに設定
Enter	シェイプまたは画像の編集	選択したシェイプや画像を編集
⇧ + ⌘ + K	画像/動画を配置	画像や動画を配置または挿入する	○
0 0	不透明度を0%に設定	選択したオブジェクトの不透明度を0%に設定	○
01 ~ 0	不透明度の設定	不透明度を1% ~ 100%に設定	○

配置

オートレイアウト関連は確実にマスターしましょう。
操作したてはコツを掴むまで少し時間がかかりますが、Figmaを操作するにあたって必ず必要な内容になります。

キー	アクション	詳細	👌
⌘ + ]	前面へ移動	オブジェクトをレイヤーの前面に移動	○
⌘ + [	背面へ移動	オブジェクトをレイヤーの背面に移動	○
⇧ + ⌘ + ]	最前面へ移動	オブジェクトをレイヤーの最前面に移動	○
⇧ + ⌘ + [	最背面へ移動	オブジェクトをレイヤーの最背面に移動	○
⌥ + A と ⌥ + D	左/右揃え	オブジェクトを左または右に揃える
⌥ + W と ⌥ + S	上/下揃え	オブジェクトを上または下に揃える
⌥ + H と ⌥ + V	中央揃え	オブジェクトを水平または垂直に中央揃え
⌃ + ⌥ + H と ⌃ + ⌥ + V	等間隔に分布	オブジェクトを水平または垂直に等間隔配置
⌃ + ⌥ + T	均等配置	オブジェクトを均等に配置
⇧ + A	オートレイアウトを追加	選択したオブジェクトにオートレイアウトを追加	○
⌥ + ⇧ + A	オートレイアウトの削除	オートレイアウトを削除	○
⌃ + ⇧ + A	オートレイアウトを提案	選択したオブジェクトに提案されたオートレイアウトを適用	○

コンポーネント

コンポーネントとインスタンスは非常に大事な概念です。
コンポーネントを編集するとインスタンスも同期して編集内容と同じものになります。
形は一緒にしたいけど色を変更したい場合はコンポーネントからインスタンスを切り離して、インスタンスの内容のみを編集することでコンポーネントに影響させる事なく独自のインスタンスを実装することができます。

キー	アクション	詳細	👌
⌥ + ⌘ + K	コンポーネントを作成	選択したオブジェクトをコンポーネント化	○
⌥ + ⌘ + B	インスタンスの切り離し	選択したコンポーネントのインスタンスを切り離し	○
⇧ + I	コンポーネント検索	コンポーネントを検索して挿入する
コンポーネント挿入中に使用
⌥	コンポーネントインスタンスを切り替える	異なるバリアントのインスタンスに切り替える	○

さいごに

Figma関連についてまとめた記事も貼っときます。
もし興味があれば一緒にご覧いただければ幸いです。

おまけ

弊社のご紹介もさせてください！

「日本で一番エンジニアが成長できる会社を創る」

エンジニアリングの募集

PM・Webディレクションの募集

セールス・事業開発の募集

コーポレート系の募集

コンサルティングの募集

弊社メンバーは日々学習した内容をアウトプットしております！
少しでもご興味を持たれた方は求人を見てみてください！
ご応募もお待ちしております！

最後までご覧いただき、ありがとうございました！