WebDesigner's Memorandumウェブデザイナーの備忘録

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

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

Figmaにはショートカットキーを変更する環境設定がありません。

そんなFigmaにショートカットキーを割り当てる方法は下記の2つです。

  • Macの[システム環境設定]→[キーボード]→[ショートカット]→[アプリケーション]から設定する
  • Keyboard Maestro等のユーティリティアプリを使用する

Macのシステム環境設定で行う方法は、1つ2つ程度の設定であれば問題ありませんが、大量に設定してきちんと管理したいのであればKeyboard Maestroの方がオススメです。

今回はFigmaの[Arrange]→[Align Left]にショートカットキーを割り当てます。
すでにデフォルトのショートカットキーのoption + Aが割り当てられていますが、追加で自分の好きなキーを割り当てます。

[Arange]→[Align Left]

ブラウザでは指定できない

Figmaはブラウザ版とアプリ版の両方があります。

ブラウザ版でもKeyboard Maestroを無理矢理設定できますが、普通にブラウザのショートカットキーと被ってしまったり、設定が面倒なのでわざわざそこまでして設定する必要もないでしょう。

今回はアプリ版でのショートカットキー設定を前提で進めます。

システム環境設定から設定する方法

それでは早速ショートカットキーの割り当て方法ですが、Macの[システム環境設定]→[キーボード]→[ショートカット]→[アプリケーション]を開きます。

[システム環境設定]→[キーボード]→[ショートカット]→[アプリケーション]

ここで「+」ボタンを押せばショートカットキーの追加ができます。

ショートカットキーの追加

登録には「アプリケーション」「メニュータイトル」「登録したいキーボードショートカット」を設定します。

メニュータイトルが入れ子になっている場合は、メニュー名を「->」でつなぐ必要があります(前後にスペースは不要)。今回の場合は[Arange]→[Align Left]を選択したいので「Arange -> Align Left」と入力すればOK。

[Arange]→[Align Left]のショートカットキー追加

設定が出来たら[追加]ボタンを押して設定完了です。
Figmaに移動してショートカットキーが使えるようになっていることを確認してください。

Keyboard Maestroで設定する

Keyboard Maestroの詳しい説明や使い方は過去に記事にしているので、詳細はそちらをご覧ください。

作成したマクロは下の画像の通りです。

[Arange]→[Align Left]のKeyboard Maestroマクロ

[Hot Key Trigger]でショートカットキーを設定し、[Select or Show a Menu Item]アクションでメニューを選択しているだけのシンプルなマクロです。

Macのシステム環境設定とは違い、右の「Menu」をクリックすると、現在起動しているアプリのメニューリストがでてきて、選択するだけで設定できてしまうので非常にラクです。

ショートカットキーのオン・オフ切り替えもすぐできるので、大量にショートカットキーを設定する人はこの方法がオススメです。

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね