Figmaに独自のショートカットキーを割り当てる方法

Figmaにはショートカットキーを変更する環境設定がありません。
そんなFigmaにショートカットキーを割り当てる方法は下記の2つです。
- Macの[システム環境設定]→[キーボード]→[ショートカット]→[アプリケーション]から設定する
- Keyboard Maestro等のユーティリティアプリを使用する
Macのシステム環境設定で行う方法は、1つ2つ程度の設定であれば問題ありませんが、大量に設定してきちんと管理したいのであればKeyboard Maestroの方がオススメです。
今回はFigmaの[Arrange]→[Align Left]にショートカットキーを割り当てます。
すでにデフォルトのショートカットキーのoption + Aが割り当てられていますが、追加で自分の好きなキーを割り当てます。
![[Arange]→[Align Left]](https://webrandum.net/mskz/wp-content/uploads/2021/10/image_1-4.png)
ブラウザでは指定できない
Figmaはブラウザ版とアプリ版の両方があります。
ブラウザ版でもKeyboard Maestroを無理矢理設定できますが、普通にブラウザのショートカットキーと被ってしまったり、設定が面倒なのでわざわざそこまでして設定する必要もないでしょう。
今回はアプリ版でのショートカットキー設定を前提で進めます。
システム環境設定から設定する方法
それでは早速ショートカットキーの割り当て方法ですが、Macの[システム環境設定]→[キーボード]→[ショートカット]→[アプリケーション]を開きます。
![[システム環境設定]→[キーボード]→[ショートカット]→[アプリケーション]](https://webrandum.net/mskz/wp-content/uploads/2021/10/image_2-4.png)
ここで「+」ボタンを押せばショートカットキーの追加ができます。

登録には「アプリケーション」「メニュータイトル」「登録したいキーボードショートカット」を設定します。
メニュータイトルが入れ子になっている場合は、メニュー名を「->」でつなぐ必要があります(前後にスペースは不要)。今回の場合は[Arange]→[Align Left]を選択したいので「Arange -> Align Left」と入力すればOK。
![[Arange]→[Align Left]のショートカットキー追加](https://webrandum.net/mskz/wp-content/uploads/2021/10/image_4-4.png)
設定が出来たら[追加]ボタンを押して設定完了です。
Figmaに移動してショートカットキーが使えるようになっていることを確認してください。
Keyboard Maestroで設定する
Keyboard Maestroの詳しい説明や使い方は過去に記事にしているので、詳細はそちらをご覧ください。
作成したマクロは下の画像の通りです。
![[Arange]→[Align Left]のKeyboard Maestroマクロ](https://webrandum.net/mskz/wp-content/uploads/2021/10/image_5-2.png)
[Hot Key Trigger]でショートカットキーを設定し、[Select or Show a Menu Item]アクションでメニューを選択しているだけのシンプルなマクロです。
Macのシステム環境設定とは違い、右の「Menu」をクリックすると、現在起動しているアプリのメニューリストがでてきて、選択するだけで設定できてしまうので非常にラクです。
ショートカットキーのオン・オフ切り替えもすぐできるので、大量にショートカットキーを設定する人はこの方法がオススメです。


Figmaのフレームを一瞬で整列するプラグイン「LilGrid」
Illustratorの「埋め込み」を行うスクリプトで、画像の埋め込みをショートカットで行う!
FigmaのAuto Layout入門|繰り返しのレイアウトやコンテンツに応じて横幅可変するボタンをラクに作る
Sketchのレイヤー周りの基本操作|グループ化やマスク、オブジェクトのロックや表示切り替えなどのレイヤーでできること
Figmaで文字色と背景色のコントラスト比をチェックするプラグイン「Contrast」
Figmaのテキストやオブジェクトを斜めに変形・旋回させるプラグイン「SkewDat」
Photoshopでファイルを開いたとき「予期せずにファイルの末尾に達しました。」と表示される場合の対処法
コーダー目線で理解するIllustratorのアピアランス機能
Figmaでデザインデータを整理するときに役立つプラグイン「Clean Document」
Figmaで簡単に波の素材を生成するプラグイン「Get Waves」
iTerm2で「Use System Window Restoration Setting」を設定しているとアラートが表示されて機能しない
Google Chromeのサイト内検索(カスタム検索)機能を別のプロファイルに移行する方法
iPadで入力モードを切り替えずに数字や記号をすばやく入力する方法
iPhoneやiPadでYouTubeの再生速度を3倍速や4倍速にする方法
Keynoteで有効にしているはずのフォントが表示されない現象
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
AirPodsで片耳を外しても再生が止まらないようにする方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
無料版でも高機能なランチャーアプリ「Raycast」の基本機能と環境設定
OnyXでターミナルを使わずにmacOSの詳細設定を行う
軽量で高速なターミナルエミュレーター「Ghostty」の設定方法
Eagleで実現するクリエイティブ素材の簡単管理
かゆいところに手が届く「Supercharge」でMac環境を便利にカスタマイズする
超軽量なコードエディタ 「Zed」をサブエディタとして活用する
Bartender 6で追加されたWidgets機能で自作メニューバーアイテムを簡単に作成する
Googleカレンダーを便利に活用するための小技集(祝日だけを表示・月末の繰り返しイベントを追加)
Obsidianを使った「自己流PKM」で行う知識トレーニング
テキストエディタ・ノートアプリ関連のショートカットキーをKeyboard Maestroで統一する