Sketchの整列をショートカットキーを使ってすばやく行えるようにする方法

デザインするとき、意外と多い操作が「整列」です。
要素を揃えるたびにマウスで手をプルプルさせながら調整するのはデメリットが多いです。
- 「揃える」という余計な部分に神経を持っていかれて疲れる
- スマートガイドがあるものの、マウス操作だとズレる可能性がある
- 時間がかかる(1日に何度も行う操作なので、積み重ねると差が出る)
「じゃあマウスではなく整列機能を使おう」という話になるのですが、今度はSketchの右サイドバー上部にわざわざマウスを移動させる必要が出てきます。

整列したあとはすぐマウスを真ん中に戻すことが多いので行って帰っての距離がムダになります。
というわけで、Illustratorと同様にショートカットキーを設定してすぐ発火できるようにしておくのがオススメです。
ショートカットキーの設定
メニューの[Arrange]内にある[Align]や[Distribute]が整列系のメニューです。
![[Arrange]→[Align]](https://webrandum.net/mskz/wp-content/uploads/2021/04/image_2-8.png)
ちなみに[Distribute]にはデフォルトでショートカットキーが割り振られていて、[Horizontally(水平方向に分布)]がcontrol + command + Hで、[Vertically(垂直方向に分布)]がcontrol + command + Vです。
![[Arrange]→[Distribute]](https://webrandum.net/mskz/wp-content/uploads/2021/04/image_3-3.png)
このルールに合わせて、control + command + 矢印キーで上下左右に整列、control + command + Cで中央揃えになるようにしておくのがオススメです。
Keyboard Maestroで設定
ショートカットキーの設定はKeyboard Maestroで行います。
Keyboard Maestroがなにか分からない人は、過去に記事にしているので、そちらをご覧ください。
ショートカットキーを押したときに、「Select or Show a Menu Item」アクションでメニューを指定しているだけの簡単なマクロです。

これを設定したいメニュー分作成すれば完了です。
マウスから手を離さないで発火できるようにする
このままだと、矢印キーを押すために結局マウスから手が離れてしまいます。
片手で押せるキーを考えて設定するのも1つの手ですが、自分の場合はSteerMouseというアプリを使い、マウスだけで矢印キーの入力ができるようにカスタマイズしています。
これで要素選択後に、左手でcontrol + commandを押し、マウスで矢印キーを押して整列ができます。



Figmaでテキストの一括置換を行うプラグイン「Find and Replace」
Figmaで様々なグラフ・チャートが作れて、詳細な見た目の設定もできるプラグイン「Chart」
FigmaのVariants機能でコンポーネントの状態を管理する方法
Figmaでロゴやアイコンなどのビットマップ画像をベクターデータにトレースするプラグイン「Image tracer」
Illustratorで文字をオブジェクトの上下中央揃えにする2つの方法
Figmaでプラグインを使わずに複数のレイヤー名を一括変更する方法
Figmaのテキスト編集周りの基本操作|テキストの追加方法からグラデーション設定や縦書き、アウトライン化
Figmaで図形の分割をして簡単にレイアウトを作成する拡張機能「Split shape」
Illustratorの「モザイクオブジェクト」機能で、画像にモザイクをかける方法(「ラスタライズ」を使った方法も追記)
Illustratorで画像内の複数箇所を切り抜いて書き出す方法
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
Visual Studio CodeでGitをもっと便利に使うための拡張機能
BetterTouchToolでトラックパッドやタッチバーにアクションを割り当てる
Keyboard Maestroの「Prompt for User Input」でユーザーの入力に応じて変化するマクロを作成する方法
Stationで複数のGoogleアカウントでGoogle Driveを使用する方法
画面キャプチャから動画編集までできるScreenFlowの基本的な設定
Keyboard Maestroを使ってDropboxの「同期の無視」を簡単にできるようにする
Figmaで画像加工の幅を広げるプラグイン「Filter / effects」
Hazelがちゃんと動作していない?そう思ったときに確認すること
scpコマンドでターミナル接続先のリモートファイルをローカルにダウンロードする方法
Macで快適なFTPクライアントを探しているなら「Transmit 5」がオススメ