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で画面遷移図やフローチャートをつくるときに線を自動で引いてくれるプラグイン「Autoflow」
Figmaでロゴやアイコンなどのビットマップ画像をベクターデータにトレースするプラグイン「Image tracer」
Figmaで作ったスマホデザインを「Mirror」機能を使ってリアルタイムに実機確認をする
選択オブジェクトに合わせてアートボードを変更するillustratorのスクリプト
記事内の画像にマウスホバーした時に画像が半透明になる意味はあるのか?
Figmaでモックアップをすばやく作成する「Mockuuups Studio」
Figmaで画像加工の幅を広げるプラグイン「Filter / effects」
Sketchの画像を図形でマスクしたり、グラデーションマスクをする方法
ブラウザ上で動作するデザインツール「Figma」のアカウント作成から必要最低限の設定
Sketchの図形周りの基本操作|図形の作成方法から描画に関する細かい部分まで
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
Path Finder 9をインストールしたらとりあえず行う初期設定
Workspacesの特定ワークスペースのURLを取得・実行する方法
刷新されたAlfred 4のテーマエディタでエディタのカスタマイズと、公開テーマのインポート方法
ATOKで言葉の意味を確かめる「電子辞典検索」タブの設定項目
npmをGUIで管理するアプリケーション「ndm – npm desktop manager」
macOS Mojaveのスクリーンショット機能についてまとめる
Bartender 4の「Show for Updates」機能で、特定条件でメニューアイコンが表示されるようにする
【前編】もうライティングで困らない!説得型ランディングページとアフィリエイター活用で売り上げアップ【CSS Nite in Kobe】
Gitで1行しか変更していないはずのに全行変更した判定になってしまう
Bartender 4のShow for Updates機能を使って、AirPodsに接続しているときだけ「ToothFairy」のアイコンを表示させる