DesignTool

Mac版Figmaに独自のショートカットを設定する

2018.04.23

Mac版Figmaに独自のショートカットを設定するのアイキャッチ画像

最近Figmaを使い始めました。マルチプラットフォームのノンデザイナーでも扱える直感的な操作性が秀逸なプロトタイピングツールです。もちろんデザインツールとしても使えます。ディレクターがFigmaでワイヤーフレームを作成して、そのデータをそのまま利用してデザインすることができます。

制作ルールさえ決めておけば原稿の流し込みも不要になるのでデザインカンプ制作が捗ります。私が使いだした理由はまさにそれです。しかし、まだまだFigma一本でやって行くよーって状況ではなく、案件によってデザインツールの使い分けは必要です。

ショートカットを設定して他のアプリとの使い勝手を合わせる

他のアプリのと併用で気になるのが頻繁に使用するショートカットキーの違いです。私の場合はFigmaの他にSketchやPhotoshopも使用頻度が高いので、それらとショートカットを合わせることで随分作業が捗ります。Figmaは独自に設定したショートカットキーが競合すると効かないので、他のアプリの設定も見直す必要がありますが、工数削減に直結しますので、是非とも行なっておきたい設定です。

Figmaのショートカットキー設定方法

Figmaのキーボードショートカット設定はアプリケーションで設定するのではなく、Macのシステム環境設定から行います。Sketchと同じですね。私はこの機会にSketchのショートカットキーも見直しました。

  1. システム環境設定
  2. キーボード
  3. ショートカットタブ

上記の順に移動し、ウィンドウ左側のアプリケーションを選択しアイコンをクリック。各項目を設定します。

設定パネル

ショートカット設定

メニュータイトルにはメニューバーの項目を記述します。下の画像のようにメニューが階層化されている場合は->を記述して階層を示します。

メニューバー

Sketchもショートカットキーが競合すると正しく動作しないので、トライアンドエラーで両方が使いやすく、かつPhotoshopでも設定できるキーの範囲でチョイスしなければなりません。

私は整列系のショートカットを頻繁に使用するので、Figma、Sketch、Photoshopでこれだけはマストで統一しました。

左揃え control+shift+command+M
右揃え control+shift+command+>
上揃え control+shift+command+J
下揃え control+shift+command+L
縦軸中央 control+shift+command+<
横軸中央 control+shift+command+K
横軸均等 control+shift+command+U
縦軸均等 control+shift+command+O

とりあえずこれで3つとも競合せずに設定できました。

まとめ

設定方法自体は簡単なのですが、他のアプリとの絡みで思ったよりも時間がかかってしまいましたが、今後カットできる制作コストを考えるとやすいものです。

ツールの使い分けは面倒なのですがショートカットキーを設定するだけで随分気持ちが楽になります。とりあえずFigmaも使い倒してやろうかと思います。

WEBSITE DESIGN REQUEST

ホームページ制作依頼について

W・D・Sでホームページ制作をご希望の方はお気軽にご相談ください。
制作内容、ご予算、納期をお知らせいただくとスムーズです。

ホームページ制作を相談する