どんなツールもショートカットを覚えることで、制作時間の短縮、効率化を図ることができます。しかし、膨大にあるショートカットキーをすべて覚えるのはなかなか大変な作業です。
この記事では、プロトタイプツールFigmaの覚えておくと便利なショートカット機能のみ36個をサンプル例を交えてご紹介します。
これらのショートカットを一度習得してしまえば、「もっと早く知っておけばよかった！」と思ってしまう便利なものをセレクトしています。
一緒にFigmaプラグインを個別でインストールすれば、自分だけのカスタマイズ機能を追加し、より快適なデザイン作成を楽しむこともできますよ。
覚えておきたいFigmaのショートカット一覧まとめ
1. レイヤーを複製する
複製したいレイヤーを選択し、Optionキーを押しながらドラッグしましょう。そのあとに、Cmd+Dで複製コピーをさらに追加することもできます。
2. レイヤー名をリセットする
文字レイヤーをレイヤー名をリセットしたいときは、レイヤーパネルより古い名前を削除し、Returnキーを押しましょう。文字フィールドの入力が自動的にレイヤー名となります。日本語にもばっちり対応しています。
3. アークツールでチャート図を描く
円形シェイプを描いたら、円上にあるアーク（英: Arc）ツールをドラッグすることで、チャート図を直感的に作成することができます。
4. あらゆる要素の不透明度を変更する
選択したあらゆる種類のオブジェクトの不透明を変更したいときは、キーボードの数字キーを押しましょう。たとえば、「8」と入力すると80%、「2」では20%といった具合。このとき素早く数字を連打することで、45%などより細かい数値を設定できます。「0」で100%に戻ります。
5. スタイルを複製する
選択したオブジェクトのスタイルをコピーしたいときは、Option+Command+Cでコピー、Option+Command+Dで他のオブジェクトにペーストすることできます。
6. 選択したプロパティを複製する
たとえば、配色のみをコピーしたいときは、右側のプロパティパネルよりコピーしたいものを選び（Shiftで複数プロパティを選択できます）、Command+Cでコピーし、Command+Vで他のオブジェクトにペーストすることができます。
7. 高速で数値変更を行う
プロパティパネルより変更したい数値をホバーし、クリックで上下左右に動かすことでスムーズに数値を変更できます。PhotoshopなどAdobeアプリと一緒。
8. スマートセレクション
複数の要素を一度に選択したとき、各要素間に表示されるライン線をドラッグすることで、幅スペースを手軽に調整することができます。
9. 選択範囲を移動する
選択範囲を作成するときに、Spaceバーを押し続けながらドラッグすることで、選択範囲をそのまま移動させることができます。
10. Figmaのパフォーマンスを確認する
メニューを開き（ショートカット: Command+/）、「Resource Use」と入力し、検索する。チェックを入れるとFigmaで使っている現在のステータスを、画面左上で確認することができます。
11. ゲーム化されたショートカット一覧の表示
Control+Shift+?を押すと、FIgmaのショートカット一覧が表示されます。これまでに使ったことのあるショートカットは青色に塗りつぶされ、ゲーム感覚で覚えることができます。
12. プロトタイプでのオーバーレイ表示
右側のプロパティパネルより「プロトタイプ（英: Prototype）」タブに切り替え、表示したいフレームを紐付けます。そのときに、Interactionより「Open Overlay」を選択することで、スムーズなオーバーレイ表示を実現できます。
13. オーバーレイ表示の位置調整
プロトタイプでオーバーレイを表示する位置は、お好みで変更することが可能です。プロパティパネル内Overlayドロップダウンより「Manual」を選択することで、マウスドラッグで位置を調整することができます。
14. オーバーレイ上でのリンク遷移エフェクト
表示されたオーバーレイから別リンクに遷移させたいときは、あらかじめ遷移用に複数のオーバーレイのバージョンを作成し、インタラクションを加えましょう。このときに、Interactionが「Swap With」となっているか確認しましょう。
15. プロトタイプで特定のエリアをクリック可能にする
プロトタイプで特定のエリアをクリックできるようにするには、まず長方形ツール（R）でその範囲を囲みましょう。さらにレイヤーの不透明度を「0」にすれば完成です。
16. プロトタイプの特別アクションとトリガー
プロトタイプ作成では他のフレームに遷移するだけでなく、「Back（前スクリーンに戻る）」、「Close Overlay（オーバーレイを閉じる）」などの特別なアクションにも対応しています。
17. カーソル移動時の数値を調整する
メニューパネルを開き（Command+/）、「Nudge」で検索しましょう。表示されたパネル上で「Small Nudge」が通常の矢印キーによる操作、「Big Nudge」がShiftキーを押しながらの矢印キーによる操作となります。グリッド幅に応じて調整すると良いでしょう。
18. ロックされたレイヤーを選択する
通常ロックされたレイヤーは選択することができませんが、Commandキーを押しながら右クリックで、選択範囲内の全レイヤーのリストを表示、個別で選ぶことができます。
19. すべてのレイヤーのロック解除と非表示レイヤーの全表示
メニューパネルを開き（Command+/）、「Unlock」で検索しましょう。「Unlock All Objects」ですべてのオブジェクトのロックを解除。「Unhide」で検索し、「Unhide All Objects」を選択すると、表示されていないすべてのレイヤーを表示することもできます。
20. 画像の自動インポート機能
Command+Shift+Kで表示したパネルより複数の画像を選択すると、それらを連続で使い、個別にシェイプを塗りつぶすことができます。
21. GIFアニメーションの追加
図形シェイプを画像で塗りつぶすときは、プロパティパネルのFillレイヤーに直接GIFアニメーションをドラッグで追加しましょう。サムネイルをクリックすることで、カンバスで表示するフレームを調整でき、プレゼンモードではきちんとGIFアニメーション付きで表示されます。
22. コピー＆ペーストの小技テクニック
選択したオブジェクトをCommand+Cでコピーしたら、Command+Vで通常のペースト。Command+Shift+Vで他のオブジェクトの左上コーナーにペーストできる小技テクニック。
23. キーボードによるレイヤーの選択
Returnキーを押すことで、ベクターシェイプの編集もできますが、グループ化された要素で利用してみましょう。Returnキーを押すたびに、グループの内部レイヤ＝を選択できます。
24. HEXカラー値を調整する
プロパティパネル上でHEX値を選択し、矢印キーで上下することで色を調整することができます。Shiftキーを押すことで、より素早く色合いを調整できます。
25. リアルタイムでの色の変更
Control+Cでカラーピッカーを表示させたら、クリックしたまま目的の色を探してみましょう。こうすることで、リアルタイムに配色の変更できます。
26. テキストレイヤーを一列で表示する
文字テキストの枠フレームをダブルクリックすることで、複数行の文字テキストを一列で表示することができます。
27. フォントの一括変更
Command+/でメニューパネルを開き、「Select All the Same Fonts」で、同じフォントのみをまとめて選択することができ、プロパティパネルよりフォントを変更することができます。
28. ２本指スクロールで色相と彩度を調整する
カラーピッカーを表示しているときに、2本指で左右にスクロールすることで「色相」、上限スクロールで「彩度」をスムーズに調整することができます。
29. 複数のコンポーネントを作成する
一度に複数のコンポーネントを作成することもできます。まず、複数のオブジェクトをまとめて選択したら、カンバス上部にあるアイコンをクリックし、「Create Multiple Components（複数のコンポーネントを作成）」を選択しましょう。これでオブジェクトをコンポーネント化できました。
30. レイヤー名のプレフィックス設定
複数のオブジェクトを選択した状態で、Command+Rで「Rename Layer」ダイアログボックスを表示し、選択したオブジェクトに「サンプル/〇〇」のような接頭辞（英: Prefix）を追加できます。コンポーネントなど関連する複数のファイル名を、一括変更するときに便利です。
31. コンポーネントの交換
上記テクニックで接頭辞をつけたコンポーネントは、手軽にオブジェクトの変更を行うことができます。オブジェクトを選択した状態で右クリック>Swap Instanceより、関連付けしたコンポーネントリストから選ぶことができます。
32. カンバス上でレイヤーを探す方法
カンバス上から特定のレイヤーを手軽に探す方法は、レイヤーの横に表示されているアイコンをダブルクリックしてみましょう。瞬時にカンバス上で目的のレイヤーまで移動することができます。
33. カラースタイルのグループ化
プロジェクトに応じて配色をまとめて管理したいときに便利なテクニック。特定の色を選択した状態で、プロパティパネルよりカラーパネルを表示し、名前を入力します。このときに「サンプル/〇〇」とすることで、ラベル付きで配色をまとめることができます。
34. コンポーネントに詳細テキストを追記する
たくさんあるコンポーネントは分かりやすく管理したい、そんなときに便利な小技テクニック。特定のコンポーネントを選択した状態で、プロパティパネルより「Description」に詳しい説明などを記述します。Codeタブに切り替え、CSSスタイルを表示すると、詳細テキストがコメントアウトで追記されているのを確認できます。
35. デザインのバージョン管理、保存をする
FIgmaのバージョン・ヒストリー（英: Version Hisotry）機能を利用することで、現段階の状態をそのままバージョンとして保存できます。Command+Option+Sで新規バージョンでの保存用ダイアログボックスが表示されます。あとは、お好みでタイトルをつければバージョンの保存は完了です。
36. 特定のバージョン履歴を共有、シェアする
作成したバージョンは一覧リストとして保存され、過去にさかのぼり、特定のバージョンを共有することも可能です。バージョン保存用ダイアログボックスの「Show Full Version History（全バージョン・ヒストリーを表示）」をクリックすると、これまで保存した全バージョンの一覧リストが確認できます。あとは、目的のバージョンを右クリックで「Copy Link」すれば、共有用リンクがコピーできます。
海外ではGoogleほか、有名企業でも積極的に活用されているツール Figma。日本語化されることで一気に利用ユーザーが増えるかもしれません。はじめてでも使い勝手の良いFigma。チームによる作業や共有はもちろん、ブラウザベースで利用できる点も嬉しいポイント。
今後もFigmaの便利なショートカットはアップデート予定です、ブックマークしておくと便利かもしれません。
参照元リンク : Figma Tips & Tricks – UI Designer’s Superpower by Learn UX – YouTube
