Figma × Keyboard Maestroでどこまで効率化できる？
Figmaは標準でショートカットキーを自由にカスタマイズできません。
「他のデザインツールと同じ機能はショートカットキーを揃えたい」
「右手はマウスを使っていることが多いから、左片手で押せるキーに変更したい」
「プラグインにショートカットキーを割り当てたい」
このように思ってもそもそも設定できませんし、Figmaはマウスを使わないとできない操作も多いです。
メニューバーの設定であればmacOS標準の［システム設定］→［キーボード］→［キーボードショートカット…］にある［アプリのショートカット］でも設定できますが、管理が大変です。
そこで活用したいのが、Keyboard Maestroです。
今回はFigmaの操作をKeyboard Maestroで効率化する方法についてまとめます。
基本の考え方
私の場合、メインの業務がフロントエンド開発のため、普段はDev Modeでデザインの確認を行う + 何か調整することがあれば調整するレベルです。
たまに使うときにはストレスなく使いたいので、Illustratorとできる限りショートカットキーを揃えています（IllustratorとFigmaだけでなく、例えば配置系のショートカットキーはSketch、Keynote、PowerPointなどですべて統一しています）。
普段から長時間Figmaを使っている人はもちろん、たまにしか使わない人もショートカットキーの整理は余計なストレスを無くしたり、無駄な気力消費を抑えてくれます。
ショートカットキーの統一はデザインツールに限らず他アプリも同様です。
過去にテキストエディタやノートアプリのショートカットキー統一についても記事にしているので、こちらもぜひご覧ください。
Keyboard Maestro
Keyboard MaestroはMacでマクロを作成するアプリです。
発火条件となるトリガーと、実際の操作のアクションを組み合わせて自由度の高いマクロを作成できます。
このアプリを使うことで「ショートカットキーを押したら → メニューバーアイテムを選択する」といったマクロを作成し、自由にカスタマイズできます。
大抵のことは、下記のアクションを使うと実現できます。
- Select or Show a Menu Item：メニューバーを選択する
- Type a Keystroke：指定のキーを押す
- Click at Found Image：あらかじめ設定した画像をもとに、画像と同じ箇所をクリックする
Figmaはアプリ版を使用する必要がある
Figmaはブラウザでも使えるのが大きな特徴ですが、Keyboard Maestroで発火アプリを指定したりメニューバーを選択できるようにするためにも、Figmaはアプリ版を使用する必要があります。
ブラウザでも不可能ではないのですが、条件分岐や考えることが多くなってきますし、アプリ版で設定した方がラクです。
Keyboard Maestroのマクログループで［Available in these applications］を選択し、Figmaを追加するだけです。
この設定をしておくことで、このマクログループ内のマクロはFigmaアプリ上でしか発火しないようになります。
設定前に言語設定を決めておく
カスタマイズする際に注意しないといけないのが言語設定です。
Keyboard Maestroはメニューをラベルで指定しているので、メニューが英語から日本語に変わってしまうと、せっかく登録したマクロが機能しなくなります。
やろうと思えば、言語設定を確認して条件分岐で日本語と英語それぞれのメニューを指定する方法もありますが手間がかかります。
マクロを登録する前に、英語か日本語のどちらでFigmaを使うのか決めてから設定した方が手戻りが少なく済みます。
初級編
まずは簡単に作れるマクロから紹介します。
メニューバーにショートカットキーを割り当てる
メニューバーから辿れる項目は、Keyboard Maestroの［Select or Show a Menu Item］アクションで設定できます。
例えば下記のマクロだとcontrol + command + CでFigmaの［配置］→［水平方向の中央揃え］が選択されます。デフォルトでもoption + Hが割り当たっていますが、他デザインツールと統一するために設定しています。
ショートカットキーが割り当てられていないメニューや、割り当たっているけど別のショートカットキーも登録したいメニューがある場合はこの方法で設定できます。
プラグインにショートカットキーを割り当てる
Figmaのプラグインは、プラグイン側でショートカットキーが設定されているものもありますが、特に設定されていない場合は割り当てることができません。
また、毎回ツールバーの［アクション］から検索して実行するのは面倒です。
しかし、プラグインを保存済みにしておくと、メニューバーの［プラグイン］→［保存済みプラグイン］に項目が追加されるようになります。
保存するにはツールバーの［アクション］から検索して、保存したいプラグインを選択します。
プラグインの詳細画面が表示されるので、［実行］ボタンの左横にある［保存］を選択します（command + enterでも保存できます）。
あとは［Select or Show a Menu Item］アクションでメニューを選択するだけで、好きなショートカットキーでプラグインを起動できます。
頻繁に使うプラグインは登録しておくと便利です。
ただしこれも注意が必要で、プラグインのアップデートでメニューラベルが変わると機能しなくなります。
また、Figmaはアップデートでメニュー構成が変わる可能性があるので、その場合はマクロを設定し直す必要があります（実際に［プラグイン］周りのメニューは過去に構造が大きく変わったことがあります）。
右サイドバーの内容を操作する
右サイドバーの各パネル（位置、レイアウト、外観など）はクリック前提のものが多く、何か設定するたびにマウス移動が必要になります。
Keyboard Maestroなら［Click at Found Image］アクションで補えます。
例えばX座標にフォーカスしたい場合は、目印になる［右90°回転］［左右反転］［上下反転］の3つのアイコンのスクショを設定し、そこから目的の位置への距離を指定します。
上記の場合、目印の画像の中心から右へ「-110px」、下へ「-30px」の位置をクリックします（負の数の場合はそれぞれ左・上に移動します）。
特徴的なアイコンの場合はそれを目印にして、そこからの距離を指定することで好きにクリックできます。
また、［Click at Found Image］アクションの右上にある歯車アイコンをクリックして［Restore Mouse Location］にチェックが入るようにしておくと、クリック後にマウスの位置を元の場所に戻してくれます。
このアクションのおかげでメニューに無い操作にもショートカットキーを割り当てられますが、FigmaのアップデートによるUIの変更に弱いので注意が必要です。
ライトモード・ダークモードを切り替える場合にも注意が必要で、その場合は［If Then Else］アクションを使って条件分岐をする必要があります。
中級編
Figma製品に合わせてマクログループを切り替える
今までFigma Designを前提に紹介してきましたが、Figma Designを使っているときとFigJamを使っているときでマクロを変えたい人もいるはずです。
複数のFigma製品（Figma DesignやFigJamなど）でマクロの内容を分けたい場合は、製品ごとにマクログループを作成し、さらにこのマクログループ達の有効・無効を切り替えるマクロを作成するのがオススメです。
私の場合はトリガーを［The focused window（ウインドウのフォーカスを変えるときに発火）］にして、メニューバーに［名前を付けて保存(.fig)…］が有効化どうかで判定してマクログループの有効・無効を切り替えています。
まだFigma DesignとFigJamでしか切り替えていませんが、今後他のFigma製品でもマクロを作成したら分岐を増やそうと思います。
マクログループが増えたらその分変更する必要がありますが、これでFigma製品ごとにマクロの有効・無効を切り替えられます。
パレットでショートカットキーを管理する
ショートカットキーが増えてくると「全部覚えられない」という人もいると思います。
そこで活用したいのが、Keyboard Maestroのパレット機能です。
パレットは、マクロを一覧表示してクリックやキー入力で選べる小さなウインドウのことです。すべてのショートカットキーを暗記しなくても、パレットを開いて選択して実行できます。
Keyboard Maestroのパレットは大きく分けて2種類あります。
まず1つ目が「コンフリクトパレット」です。
これは、同じトリガー（ショートカットキー）を複数のマクロに割り当てたときに自動的に表示されるパレットです。
Keyboard Maestro上で同じショートカットキーに設定しておけば、そのショートカットキーを実行しようとしたときに自動で表示されます。
2つ目が「マクログループパレット」です。
マクログループの表示設定でパレットを表示するオプション（［Shows/hides a palette when:］など）を選ぶと、そのグループ内のマクロをパレットとして表示できます。
また、マクロ名の先頭に「01) 」のように数字と半角丸括弧閉じの記号を入れておくと、パレット上には数字が表示されず、パレット上の並び順指定ができます。
パレット機能をうまく使うことで、例えばプラグイン機能を表示するパレットを表示できます。
ショートカットキーが覚えられない場合はパレットでまとめておいて、パレットを呼び出すショートカットキーを1つだけ覚えておくと便利です。
そして、よく使う機能に関してはそれとは別に指定していくと便利です。
上級編
FigmaでJavaScriptを実行する
私が作成している「Do JavaScript」というFigmaプラグインを使うと、モーダルに表示されたテキストエリアにJavaScriptを記述して実行できます（TypeScriptは不可）。
このプラグインとKeyboard Maestroを組み合わせることで、さらに自由度は上がります。
本来はプラグインをわざわざ作成してFigmaに自作プラグインとして読み込み、呼び出して使用する必要がありますが、Keyboard Maestro上にコードを入力するだけで簡単に実行できるようになります。
初期設定だけ下記のように手間が発生しますが、それが完了すれば以降は簡単に追加できます。
- Keyboard MaestroでJavaScriptコードをクリップボードにコピーする
- Figmaで「Do JavaScript」プラグインを起動する
- 起動完了まで待つ
- Keyboard Maestroでペースト（command + V）する
- Keyboard Maestroでcommand + returnキーを押す
- Do JavaScriptが発火してコードが実行される
本当はクリップボードをFigmaプラグインから取得したいのですが、現在のFigmaではクリップボードを取得することができません（Clipboard APIには対応しておらず、document.execCommandも過去は使えていましたが現在は使用できなくなりました。
今後対応されたらアップデートしようと思いますが、ひとまずはKeyboard Maestro側でプラグイン起動後にペーストするようにしています。
また、後から修正しやすいように、2〜5までの共通処理部分は1つのマクロにまとめています。
こうすることで、各マクロでやっていることは「クリップボードにJavaScriptコードを設定して、共通処理用マクロを呼び出すだけ」になります。
ここから紹介するマクロは、すべてこの方法を使って実現します。
なお、JavaScriptで使えるAPIに関してはFigmaのプラグインで使えるものと同じなので、Figma公式のドキュメントを確認しましょう。
あらかじめ指定した設定のドロップシャドウを付ける
よく使う設定のドロップシャドウがある場合、下記のJavaScriptで色やオフセット含めて指定しておくと、ショートカットキーからドロップシャドウを付けられます。
(async () => {
const onChangeShadow = (node) => {
if(node.effects){
let effects = JSON.parse(JSON.stringify(node.effects));
let shadow = {
blendMode: "NORMAL",
color: {r: 0, g: 0, b: 0, a: 0.25},
offset: {x: 0, y: 4},
radius: 4,
showShadowBehindNode: false,
spread: 0,
type: "DROP_SHADOW",
visible: true
}
let isAddShadow = true;
for (let effect of effects) {
if(effect.type == 'DROP_SHADOW' && isAddShadow){
Object.assign(effect, shadow);
isAddShadow = false;
}
}
if(isAddShadow){
effects.push(shadow);
}
node.effects = effects;
}
}
let selection = figma.currentPage.selection.slice();
for (let node of selection) {
onChangeShadow(node);
}
})()もしこれをプラグインでやろうとすると、ドロップシャドウを付けるためだけのプラグインを作成して読み込む必要があります。
さらにそれをメニューバーから選択したりするのは非常に手間ですし管理も大変です。
この方法ならあくまでKeyboard Maestro上でコードを入力して、共通となる1つのプラグインを実行するだけで済みます。
また、バリエーションも増やしやすいです。
先ほど紹介したパレットと組み合わせることで、よく使うエフェクト一覧を呼び出すこともできます。
最近はよく使うものはスタイルで管理するのが一般的だと思いますが、簡易的にサクッと作りたいときなどに重宝します。
バリアントとして結合し、プロパティ 1をstatesに変更する
下記のJavaScriptコードを実行すると、選択したコンポーネントをバリアントとして結合できます。
figma.combineAsVariants(figma.currentPage.selection, figma.currentPage)
figma.currentPage.selection = [figma.currentPage.selection[0].parent];
figma.currentPage.selection[0].editComponentProperty(
'プロパティ1',
{
name: 'states'
}
)普通にバリアントとして結合すると、日本語設定の場合はプロパティの名前が「プロパティ 1」になります。
このままでも問題はないですが、個人的な好みで「states」としています。
毎回名前を変更するのは面倒なので、このようにしています。
ブレンドモードの選択
ブレンドモードはデフォルトだとショートカットキーが設定できません。
しかし、JavaScriptコードなら選択オブジェクトに対してブレンドモードの指定ができるので、ショートカットキーを設定できます。
(async () => {
const selection = figma.currentPage.selection.slice();
for (let node of selection) {
node.blendMode = 'NORMAL';
}
})()node.blendModeに値を指定します。
- パススルー：PASS_THROUGH
- 通常：NORMAL
- 暗く：DARKEN
- 乗算：MULTIPLY
- 焼き込み（カラー）：COLOR_BURN
- 明るく：LIGHTEN
- スクリーン：SCREEN
- 覆い焼き（カラー）：COLOR_DODGE
- オーバーレイ：OVERLAY
- ソフトライト：SOFT_LIGHT
- ハードライト：HARD_LIGHT
- 差分：DIFFERENCE
- 除外：EXCLUSION
- 色相：HUE
- 彩度：SATURATION
- 色：COLOR
- 輝度：LUMINOSITY
このように、今まではKeyboard Maestroでやろうとすると［Click at Found Image］を使って無理矢理クリックさせる方法しかなかった操作も、JavaScriptを使って操作することで発火精度を上げられます。
指定背景色のフレームを追加する
デフォルトだとフレームの背景色は白色です（昔は透明でした）。
他の背景色がいい場合、いちいち設定しないといけないのは面倒なので、指定の背景色ありでフレームを作成します。
const rect = figma.createFrame()
const zoom = figma.viewport.zoom;
// size
let w = 100
let h = 100
let x = figma.viewport.center.x-(w/zoom)/2;
let y = figma.viewport.center.y-(h/zoom)/2;
const options = {"position":{"x":x, "y":y}, width:w, height:h}
rect.x = x
rect.y = y
rect.resize(w, h)
// color
rect.fills = [{ type: 'SOLID', color: {
r: 217 / 255,
g: 217 / 255,
b: 217 / 255
}}]最後のr（赤）とg（緑）とb（青）を、255分のいくつにするかで色を指定します。
サイズを入力して図形作成
Keyboard Maestroの［Prompt for User Input］を使うと、入力画面を表示できます。
ここで横幅と高さを入力して、それを元に長方形を作成することもできます。
const rect = figma.createRectangle()
const zoom = figma.viewport.zoom;
const selection = figma.currentPage.selection.slice();
let w = %Variable%横幅%;
let h = %Variable%高さ%;
let x, y;
if(selection[0] && selection[0].type == 'GROUP'){
selection[0].appendChild(rect);
x = selection[0].x + ((selection[0].width/zoom)/2) - (w/zoom);
y = selection[0].y + ((selection[0].height/zoom)/2) - (h/zoom);
}else{
x = figma.viewport.center.x-(w/zoom)/2;
y = figma.viewport.center.y-(h/zoom)/2;
}
const options = {"position":{"x":x, "y":y}, width:w, height:h};
rect.x = x;
rect.y = y;
rect.resize(w, h);
// Set solid red fill
rect.fills = [{ type: 'SOLID', color: { r: 217/255, g: 217/255, b: 217/255 } }];
figma.currentPage.selection = [rect];%Variable%横幅%と%Variable%高さ%がKeyboard Maestro変数の部分です。
このようにKeyboard Maestro上でいろいろ操作をしてから、それを元にJavaScriptコードを組み立てて実行もできます。
まとめ
まず、ショートカットキーの整理とよく使うプラグインの起動だけでも設定しておくとかなり便利にFigmaを使えるようになります。
特にIllustratorなど他ツールを使っている人は、同じ機能は同じショートカットキーに統一していくと、どんどん使いやすくなってきます。
ぜひお試しください。
