• HOME
  • ブログ
  • Design
  • Figmaのショートカットキーをカスタマイズして、自己流のデザインワークフローを身に着けよう。

Figmaのショートカットキーをカスタマイズして、自己流のデザインワークフローを身に着けよう。

デザインツール「Figma」には、他のデザインツールと同様にデフォルトでショートカットキーが設定されている。基本的なショートカットキーは設定されているので、しっかり身につければよりスピーディにデザインワークをこなすことができる。
しかしデザインの技術が向上していくと、「もっとこういう機能のショートカットキーがほしい」「これってショートカットキーにできないのかな?」といった疑問が出てくることだろう。今回はそんな疑問を解決するために、Figmaのショートカットキーを独自にカスタマイズするマニアックな機能を紹介したいと思う。
ただし、この記事中に記載される内容は、すべてMac OS上での話になる。一部のショートカットキーにおいてはWindowsでも動作すると思うが検証端末がないため保証はできない。それを念頭に置いた上で、MacでFigmaを使用している方はぜひ最後まで読んで実践してみてほしい。

その前に「そもそもFigmaって何?」という方には、まずはこの記事を読んでもらいたい。Figmaというツールの概念を把握した上で、ショートカットキーのカスタマイズを行おう。

Figmaについて知る

絶対に覚えておきたい基本ショートカットについて

デフォルトショートカットキーの確認方法

まず、カスタムショートカットを作っていく前に、絶対に覚えておきたい基本ショートカットキーをいくつか紹介したいと思う。まず、基礎知識としてFigmaのショートカットキーは「control + shift + ?」を押すことで確認することができる。

ただしこれは独自でカスタマイズしたキーは表示されず、デフォルトのショートカットキーのみが表示される。ぜひ試してみてほしい。それでは、さっそく「覚えておきたい基本ショートカット」を見ていこう。

オブジェクトの移動と拡大縮小

キーボードの「V」を押すと、選択モードになる。これはAdobeのソフト全般と同じなので覚えるのは容易だろう。PhotoshopやIllustratorは「V」で選択モードにすると選択しているオブジェクトを拡大縮小することができるのだが、Figmaはテキストレイヤーの拡大縮小ができない仕様となっている。これは、レスポンシブデザインを最速で行うことを目的としているためだ。 その代わり、キーボードの「K」を押すことでスケールモードに切り替えることができる。スケールモードでは、「V」の時にできなかった拡大縮小が行えるようになる。この「VとK」は超基礎的かつFigmaを使用する上で最も重要な機能になるので、ぜひショートカットキーと一緒に機能も覚えておこう。

オブジェクトの整列

次に紹介したいのが、デザインする際に必須となる「整列」のテクニック。
PCゲームをやったことがある人なら違和感なく覚える事ができると思うのだが、optionキーを押しながら、整列したい方向「A,W,S,D」のいずれかを押すことで、選択しているオブジェクトを意図した位置に整列させる事が可能だ。

  1. Option + A で、選択しているオブジェクトを左端に整列
  2. Option + D で、選択しているオブジェクトを右端に整列
  3. Option + W で、選択しているオブジェクトを上端に整列
  4. Option + S で、選択しているオブジェクトを下端に整列

といった具合にショートカットキーで操作することができる。選択しているオブジェクトが1つの場合、アートボードに対して整列させるという挙動になる。一方で、複数のオブジェクトを選択している状態だと、選択しているオブジェクト同士を整列させるという挙動になるので実際に試しながらそのクセを把握してみることをオススメする。

このように、矢印キーに見たてるとすごく理解しやすいショートカットキーに早変わりする。
また、Option + H で、水平方向センターに整列することができる。そしてOption + V で、垂直方向センターに整列することが可能なので、合わせて覚えておこう。

ピクセルグリッドにスナップ

Figmaはベクターデータによる描画でデザインすることが可能なのだが、それが故に、作った四角形などが端数になってしまうことが良くある。
そういう時はピクセル1つ1つのマス目にピタッとオブジェクトが揃うようにピクセルグリッドにスナップという機能を使用する。ショートカットキーは「⌘ + ‘」だ。この機能をONにしてれば、制作したオブジェクトに端数が生まれず、ピクセルの数値がキレイなデザインが出来る。

ルーラーの表示・非表示

デザインする上で必須なルーラー。まるで定規のような感覚で、縦軸・横軸にガイド線を引くことができる機能だ。デフォルトではルーラー機能が格納(非表示)されているので、キーボードの「Shift + R」を押してルーラーを表示させよう。デザインしていく中で一旦非表示にしたいと思ったら、また「Shift + R」を押して格納することが可能だ。

アウトラインモードの表示・非表示

FigmaにはIllustrator同様にアウトラインモードを搭載している。アウトラインとは、“表面には見えていないデザインの骨格”を見ることができる機能で、デザインの構造を確認したり、パスの詳細を見たり、無駄なオブジェクトが隠れていないかを確認したりする際に利用する。一見どこで使うの?と思われがちな機能だが、実際にデザインを進めていくとかなり重要な機能であることに気づくはずだ。そんな便利機能のアウトラインモードは「⌘ + Y」で表示・非表示の切り替えができる。ぜひ覚えておこう。

文字詰め

実はFigmaは2020年8月のアップデートにより、1文字ずつの文字詰めや、フォントサイズの変更、ウェイトの変更、レタースペーシングの調整といったテキスト周りのショートカットが追加された。これにより、Adobe製品で出来ていた1文字ずつの細かい文字位置調整が、Figmaでもキーボードで操作できるようになり、より快適にデザインすることができるようになった。

基本的な文字詰めは、対象の位置にカーソルを置いたあと「option + < or >」を押す。「<」を押せばカーソルの右側にある文字が左に詰まっていく。

オリジナルのショートカットキーを設定しよう

では、本題に入りたいと思う。
これまで紹介してきたショートカットキーはデフォルトの物の中のほんの一部にしか過ぎない。実際に手を動かしていくと自己流のショートカットキーを作りたくなってくるはずだ。ただ、Figmaにはショートカットキーをカスタムする機能が標準搭載されていない。なので、一見すると「ショートカットキーはカスタマイズ出来ないんだ。」と思っている方も多いはず。

しかし実は、MacOSユーザーは以下のステップを踏むことでオリジナルのショートカットキーを作成することが可能になる。

1. システム環境設定で下準備

Macユーザーは、画面左上にあるリンゴマークからシステム環境設定を開こう。そして「キーボード」を選択。キーボードの画面になったら、次に「ショートカット」というタブを選択し「アプリケーション」という項目をサイドナビから選択。

次に「+」マークをクリックしてFigma.appを追加しよう。追加すると、私のキャプチャのようにFigma.appという項目が現れる。

2. Figma.appの項目内にカスタムショートカットキーを入れていこう

私が設定しているオリジナルのショートカットキーを見ながら設定方法を解説していく。ショートカットキーの作り方はこのキャプチャのように「メニュー名->実行項目名」という形で記載していく必要がある。ここで注意しなければならないのは、スペルが違ったり「->」の矢印を記載しなかったりすると、設定が反映されないという点だ。しっかりと見直して設定する必要がある。

3. スペルミスに気をつけながら設定しよう

では、参考までに1つの例をとってオリジナルのショートカットキーを設定してみよう。今回は仮に、メニューバーのTextという項目の中にある「Text Align Bottom 」というアクションに対して自分だけのショートカットキーを作ってみたいと思う。

まずは、キャプチャ内のオレンジで囲っている「+ボタン」をクリックしよう。

そして、一言一句間違えのないようにフローを記載していく。この際に大文字・小文字も合っていないとうまく設定できないので注意しよう。そして冒頭でもお伝えしている通りフローは「->」を使って記載する。これも合わせて見直してしっかり入力しよう。入力できたら、あとはキーボードショートカットの入力欄に自由に設定したいキーを打ち込もう。仮に「option + ⌘ + B」と設定してみる。入力を終えたら「追加」ボタンをクリック。

無事に追加できると、このように新たに設定したショートカットが最下部に追加される。あとは実際にFigmaを開いて、設定したキーがうまく適用されているか確認するだけだ。

まとめ

以上が、覚えておきたいオススメの基礎ショートカットと、オリジナルのショートカットキーを設定する方法となる。
ちなみにオリジナルショートカットキーは、プラグインに対してもショートカットキーを設定することが可能なので、よく使用するプラグインはカスタマイズしておくと作業が格段に早くなることだろう。ぜひ試してみて欲しい。
もし何か不明点があれば、Twitterでもこの記事のコメントにでも質問を送っていただければいつでも回答するので、お気軽にお問い合わせいただければと思う。

ぜひFigmaをマスターして、新しいデザインワークフローを切り開いてみよう。

Figmaに関する記事はこちらから

関連記事一覧

  • コメント ( 2 )

  • トラックバックは利用できません。

  1. kenta

    Figmaに元々設定されているショートカットは変更できないのでしょうか?
    例えば、「Object->Bring to Front」のショートカットを変更しようとしても反映されません。

    • paraph

      コメントありがとうございます。
      仕組みは分からないのですが、デフォルトで設定されている一部のショートカットキーに対しては、上書きして独自のキーを設定することが出来ないようですね。コメント頂き感謝です。

CAPTCHA