ショートカットキーを覚えるのが苦手です。
FigmaやIDEには便利なショートカットキーがたくさん用意されていますが、よく使うものはその一部だよなぁ、と。
すべてのショートカットキーを不都合なく設計して割り当てている初期設定は素晴らしいですが、一部しか使わない場合は自分にとって使いやすいようにカスタマイズした方が効率的に操作できると思ってFigmaもカスタムしてます。
エンジニアリングでいつも使っているIDE(WebStorm)は、キーマップ機能があるので、それを使ってカスタマイズしていますが、Figmaは標準機能としてキーマップを変更できる機能がないっぽい、、
なのでKarabiner-Elementsを使い、ショートカットキーをカスタマイズしているので、今日はその内容を残していきます。
設定しているショートカットキーの一覧
僕は位置揃え系と配置系のショートカットキーをFunction keyに割り当てています。
加えて、メインで使うキーボードのFunction keyはF1 - F4 | F5 - F8 | F9 - F12で領域が区切られています。
この領域分割を利用して、
- 水平方向の位置揃えを
F1-F3 - 垂直方向の位置揃えを
F5-F8 - 配置系を
F9-F11
に貼り当てています。
| 独自設定した ショートカットキー |
Figma上での ショートカットキー |
処理内容 |
|---|---|---|
F1 |
Option + A |
左揃え |
F2 |
Option + H |
水平方向の中央揃え |
F3 |
Option + D |
右揃え |
F5 |
Option + W |
上揃え |
F6 |
Option + V |
垂直方向の中央揃え |
F7 |
Option + S |
下揃え |
F9 |
Control + Option + T |
均等配置 |
F10 |
Control + Option + V |
垂直方向に等間隔に分布 |
F11 |
Control + Option + H |
水平方向に等間隔に分布 |
なぜFunction keyを中心にしているか
Figmaのショートカットキーが割り当てられていなかったことも理由にありますが、一番の理由はタイプミスをした際に近くのキーをタイプすれば目的のショートカットにたどり着くためです。
右揃えするつもりでF1をタイプしてしまった時、近くにあるF3をタイプする、というように。リカバリーがとても簡単。
なぜKarabiner-Elements？
macOSではOSのデフォルト機能で、各アプリケーションごとのショートカットキーを設定できます。
ただ業務マシンと私用マシンで共通の設定を使いたかったので、僕はKarabiner-Elementsを使っています。
業務マシンと私用マシンの両方で以下の設定ファイルを使用しています。興味のある人は参考にしてみてください。
- Karabiner-Elements全体の設定
- Figmaに関するKarabiner-Elementsの設定
Karabiner-Elementsの使い方
以下の記事が参考になります。
カスタムスクリプト
あまり推奨できませんが、Figmaで用意されていない以下のショートカットキーを設定するちょっとしたスクリプトを作っています。
| 独自設定した ショートカットキー |
処理内容 |
|---|---|
F4 |
フレームセクションを選択 |
F8 |
インスタンスセクションを選択 |
F12 |
オートレイアウトセクションを選択 |
使い方のイメージ
オブジェクトの作成と複製をする時以外はキーボードの操作のみで完結します。
キーボード操作に慣れている人にはおすすめできるカスタマイズなので是非参考にしてみてください。
おしまい
