Figma ショートカットを覚えよう Tips （今回はレイヤー操作）

Figma の Command + / で呼び出すクイックアクションは偉大です。日々日常多用しています。
アクションもプラグインの呼び出しもこのクイックアクションを使っています。

コマンドパレットの呼び出しやコンテキストメニューに慣れて過ぎているため、逆にキーボードコマンドで打てる操作でもコマンドが覚えられないということが起こっています。
ちょっとこの機会に直接コマンド打てるものは覚えて効率化してみようと、よく使う操作のショートカットを少しまとめてみたいと思います。

私個人のよく使うアクション中心で書いているので、すべてを網羅していません。また、キーボードショートカットは Mac でのものとなります。

Figma 使いのヒントにしていただけると幸いです。

オブジェクト・レイヤーの操作

マウスでオブジェクトを選択してドラッグしてレイヤーを移動…再背面へ移動はコンテキストメニューで…と操作しがちなのですが、キーボードで操作してしまう方が楽ちんなのでこの際覚えてしまいます。

レイヤー操作についてはデザイナーだけでなく、Viewer 権限のエンジニアがデザインデータを見るときにも使えるショートカットです。レイヤーの選択は Viewer 権限でも使えるので、活用できそうですね。

レイヤーの選択

選択しているオブジェクトの子要素は、親オブジェクトを選択した状態で Enter で中の子のオブジェクトを一括選択できます。
親レイヤーのオブジェクトの場合は、Shift + Enter で選択できます。
同じ階層内での選択の移動は Tab でできます。

選択したレイヤーの移動

レイヤーを選択したら配置（並び順）を動かしたい。
レイヤーを動かす場合はこのコマンドで重ね順を変えられます。

• 前面に移動: Command + ]
• 背面に移動: Command + [
• 最前面に移動: ]
• 最背面に移動: [

最全面への移動はついクイックアクションで入力していましたが、ショートカットのほうが断然楽じゃないか。
知らないって、損かもしれませんね。。

レイヤーの折りたたみ

階層の深いデータを作っているときに便利なのが、レイヤーの折りたたみ（Collapse Layers）。 レイヤーパネルの折りたたみを一気に閉じることができます。

Option + L

レイヤーの中の深いところまで表示しているときにこれでスッキリ表示に戻すことができます。 私は深いレイヤーのデザインを作りがちなので、かなり重宝していますが、 Command + / からの Collapse ... で操作することが多かったです。こちらもコマンドで入力できると圧倒的に入力の操作が減りますね。
早く知るべきだった…。そして、この記事を書いたきっかけは、このコマンドを覚えようと思ったからでもあります。

キーボードショートカットの確認

キーボードショートカットの一覧を確認できます。Figma 公式のチートシートのようなものですね。

Control + Shift + ?

キーボードショートカットで操作するぞ、覚えるぞ、となったので、ここで確認するようにしたいです。
今まで Help メニューにあったのにちゃんと見ていなかったりしたのですが、とても便利な機能です。

使ったことのあるキーボードショートカットはハイライトされています。
（ただし、いつのまにか押していた、ショートカットもあるように思います。私の場合は特にですが）

おわりに

今回は、Figma でマウスで操作しがちだけどキーボードで操作できると時間が短縮できそうなものについて書いてみました。
地味〜に使えそうな Tips ではありますが、少しでも操作を楽に簡単にして手早く作業を進められるヒントになればと思います。

Gaji-Laboでのデザインツールの使いかたを紹介した記事をまとめました。UIデザインのプロジェクトでどんなふうにツールを活用しているのか、他のデザイナーのやりかたや実際に行っている作業内容などが知りたい方におすすめの内容です。