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

Figmaでオブジェクトの整列をショートカットキーを使って効率的に行う方法

Figmaでオブジェクトの整列をショートカットキーを使って効率的に行う方法

デザインするとき、意外と多い操作が「整列」です。
要素を揃えるたびにマウスで手をプルプルさせながら調整するのはデメリットが多いです。

  • 「揃える」という余計な部分に神経を持っていかれて疲れる
  • スマートガイドがあるものの、マウス操作だとズレる可能性がある
  • 時間がかかる(1日に何度も行う操作なので、積み重ねると差が出る)

整列機能もアイコンをクリックして整列しようとすると、今度はFimgaの右上にわざわざマウスを移動させる必要が出てきます。

Figmaの整列アイコン

そこで、整列に関してはショートカットキーを使って早く・ラクにしましょう。
1回1回は小さなことでも、使う回数を考えると積み重ねでかなりの差になります(この差の分だけ、もっと考えるべきところに時間を使えます)。

Figmaデフォルトのショートカットキー

Figmaでは、整列周りはoptionを中心として設定されています。

内容ショートカットキー備考
上揃えoption + W 
右揃えoption + D 
下揃えoption + S 
左揃えoption + A 
上下中央揃えoption + VVertical(垂直)
左右中央揃えoption + HHorizontal(水平)
垂直方向均等配置control + option + V中央揃えにcontrolを追加
水平方向均等配置control + option + H中央揃えにcontrolを追加
均等配置control + option + T 

上下左右に関しては、optionW/A/S/Dで整列できるようになっています。
左手だけで整列ができるので、デザイン作業中のマウスを持ちながらの状態でもラクに整頓できますね。

Adobe XDと同じショートカットキーを追加する

デフォルトのoptionを中心とした整列ショートカットキーは魅力的ですが、自分はAdobe XDの整列ショートカットキーをIllustratorやSketchなど他のデザインツール(デザインツール以外にもKeynoteやPowerPoint)でも設定しています。

似たような機能はどのアプリもショートカットキーを合わせることで、アプリごとにショートカットキーを覚える必要がなくなりますし、久しぶりに触ったときもなんとなくで使えます。

ショートカットキーの設定はKeyboard Maestroを使っています。
(Keyboard Maestroがなにか分からない方は、過去に記事にしているのでぜひそちらをご覧ください)

ショートカットキーはcontrol + command + で全て統一していて、やっていることはメニューバーの整列用の項目を選択しているだけです。

Figma整列用のKeyboard Maestroマクロ

内容ショートカットキー備考
上揃えcontrol + command +  
右揃えcontrol + command +  
下揃えcontrol + command +  
左揃えcontrol + command +  
上下中央揃えcontrol + command + MMiddle
左右中央揃えcontrol + command + CCenter
垂直方向均等配置control + command + VVertical(垂直)
水平方向均等配置control + command + HHorizontal(水平)
上下左右中央揃えcontrol + command + X  

個人的な感覚ですが、「Left・Center・Right」なのでCは横方向の中央揃えにしています(完全にCSSのtext-alignの感覚)。
上下中央揃えは「Top・Middle・Bottom」なのでMは縦方向の中央揃え(これもCSSのvertical-alignの感覚)。

残りの均等配置に関しては残りの英単語の「Vertical」と「Horizontal」を使います。

この辺の感覚がFigmaのデフォルトと違っていて、なかなか慣れないですし、他のアプリとも合わせたいので自分で設定しているわけです。

上下左右中央揃えを作る

Keyboard Maestroで作っておくと便利なマクロが「上下左右中央揃え」です。
モーダルを作るときなど、意外と使う機会があるのと、作り方も「上下中央揃え」と「左右中央揃え」を順に発火させているだけです。

上下左右中央揃えの整列マクロ

ちなみに、ショートカットキーにXを使用している理由は、文字の形が対角線を引いて中点を求めているっぽい形をしているのでXにしています。
こじつけですが、なにかしら理由を作っておくと使えるようになるのと、位置的にも押しやすいので採用しています。

ショートカットキーの2回押しを作る

DTP TransitさんのKeyboard Maestroの「tapped twice」を使った均等配置をそのまま採用しています。

Keyboard Maestroには普通にショートカットキーを押したときと、2回押したとき(tapped twice)発火するマクロが作れますし、トリガーは複数設定可能です。

「tapped twice」を使った均等配置

やっていることはトリガーを追加しているだけですが、そのおかげで例えばcontrol + command + の1回押しで「右揃え」さらにもう1回続けて押せば「垂直方向均等配置」まで発火します。

「右揃え」だけしたいときは1回押し、「垂直方向均等配置」までやりたいなら2回押しという風に押す回数でどこまで実行するか制御できます。

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

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

Twitterをフォロー Facebookでいいね