Webデザイン、特にUIデザインの制作時には、もはやデファクトスタンダードになってきた感が強い「Figma」。

昨年末〜今年に入ってさらに、
これまで頑なにPhotoshopやXDでWeb/UIデザインをしていたベテランデザイナーの方々が乗り換えに動き出したり、 Figma がデファクトのデザインツール^※ になる方向性はますます強まっている様に感じます。
※主にレイアウト時。もちろん個々のデザインツールには一長一短あるのもまた然りです。

今回は、そんなFigmaでのWeb/UI制作時ににおける、
「あれどうやるんだっけ？」という時に使える
ショートカット(※主にMac向け)とプラグインについてのお話です。

[Figma でよく使うショートカットたち]

定規（ルーラーの表示）

Ctrl Shift + R
で定規(ルーラー)が表示/非表示されます。ルーラー上からワークスペースにマウスドラッグすると、
Adobe系ソフトで言うところのガイドが引けます。

アウトラインの表示

Ctrl Shift + O
要素の線、塗り、テキスト、と言った構成要素の骨組みをみる事ができます。
Adobe系ソフト(特にIllustrator)で言うところのアウトライン機能ですね。
Illustratorから持ってきたSVGデータ、ベクターで作成されたデータの骨組みをみる時に便利です。

レイアウトグリッドの表示

Ctrl Shift + G
Figmaの機能の一つに、あらかじめグリッド線を引いておく事ができる「レイアウトグリッド」機能があります。
これは、案件の開始時に設定しておくもので、デザイン全体の根幹をなすグリッド定義を行う事ができます。
その、「レイアウトグリッド」の表示/非表示はこのショートカットでできます。

左右のUIの非表示

Command + \
Figmaは、デフォルトでは左右にレイヤーパネルとデザインパネルが表示されていますが
それらをしまって、ワークスペースを広々使い、デザイン作業に集中できます。
なお、Command + \ とありますが、Macの純正キーボード(JIS配列)の場合
Command + ¥ で動きます。

画面移動

これはAdobe系ソフトとほぼ同じ挙動です。
Space を押しながらマウスドラッグで、ワークスペース上を画面移動。

画面の拡大/縮小

Command を押しながらマウスホイール操作でワークスペース上の拡大/縮小ができます。
また、Command Shift + [+キー] で拡大
Command Shift + [-キー] で縮小です。

Command + 0(ゼロ) または Command + 0(ゼロ) で、100%表示に戻せます。

色の抽出

Control + C で、カーソルがスポイトツールに切り替わります。
クイックに他のオブジェクトから色を抽出したい時に便利。

太字/斜体/リンク作成/下線/打ち消し線

テキストを選択して、
Command + B で、太字に。
Command + I で、斜体に。
Command + U で、アンダーラインが付きます。
Command + K で、対象文字列にリンクを設定できます。
Shift + Command + X で、打ち消し線(Strikethrough)が引けます。

テキストをリスト化

テキストを選択して、
Shift + Command + 7 で、数字リスト(1.*** 2.*** 3.***…)に変換。
Shift + Command + 8 で、箇条書きリスト(・*** ・*** ・***…)に変換。
↑大量のテキストやリストがある案件などでは地味に便利です。

テキストの揃え

Option + Command + L で、テキスト左揃え。
Option + Command + T で、テキスト中央揃え。
Option + Command + R で、テキスト右揃え。
Option + Command + J で、テキスト両端揃え。
↑テキスト編集が多めの案件などで、地味に便利です。

ショートカット一覧の表示

[Figmaのメニュー] > [ヘルプとアカウント] > [キーボードショートカット]で、
画面下部にショートカットの一覧が表示/非表示できます。

ショートカットの一覧自体のショートカットは
Control + Shift + [?キー] になります。

基本中の基本ですが、ショートカットは地味に覚えたほうが良いです

デザイナー駆け出しよちよち歩きの頃、ひたすら言われた言葉があります。

「1操作に1秒かかるところを、0.5秒にできたら倍のタスクができるよね？」
「たとえば1万回、ツールを切り替えてデザイン制作するとするよね。その時に、1秒かかるところを、0.5秒でできたらどうなると思う？」
「1万秒は大体2.77778時間。つまり、ショートカットを使わない場合と比べて、0.5秒 × 2.77778時間で…
1時間15分プラスアルファくらいの時間、生み出せるよね？」

「だからショートカットを使え！！！！！」
と。

…それはそう。かな、と。（思い出すと複雑な気持ちになるのは事実ですが）

基礎の基礎なので、制作効率をあげて、自分が良いワークライフバランスを生み出すためにも。
グラフィックソフトのショートカットは、覚えておいて損がないと思います。

この記事のまとめ

今回はとても単純な話ですが、
Figma でWeb/UIデザインをする際に個人的によく使う、
「Figma のキーボードショートカット」について、記事を書いてみました。

Figma、一度乗り換えてしまうと

・オートレイアウトの再編集への強さ
・コンポーネント化して制作していく、という概念が現代のWeb/UI制作現場とマッチしている点
・コミュニティによる数々の便利プラグインの存在

↑この辺りの魅力がとても強く、きっと気に入ることうけあいです。
続編の記事を書くとしたら、今度はFigmaプラグインについても、実際に使ってみたものを掘りさげて、書いてみたいと思います。

この記事が皆さんのより良いWeb制作体験につながれば、嬉しく思います。

※この記事は内容の品質向上を目的に、随時更新を行う場合があります。