はじめに
Figmaを触っていると、こんな場面はないでしょうか。
「このテキストを選択したいだけなのに、Frameしか選択できない...」
私はこれまで、目的のレイヤーを選択するためにダブルクリックを何度も繰り返したり、左側のLayers panelで該当のレイヤーを探していました。
しかし、Figmaを触っているうちにDeep selectという機能を知り、
「え、これ1ストロークで選べるの...?」
と驚きました。
そこで今回は、Deep selectを中心に、Figmaでレイヤーを選択する方法とその使い分けについて整理してみます。
Deep selectとは
Deep selectは、ネストされたレイヤーをキャンバス上から直接選択する操作です。(出典：Figma公式「Select layers and objects」)
操作方法
- Mac：
⌘ + Click - Windows：
Ctrl + Click
例えば、以下のような階層があったとします。
親レイヤー → … → … → 選びたいレイヤー
通常クリックでは、まず親レイヤーが選択されますが、Deep selectを使えば、画面上に見えている選びたいレイヤーを直接選択できます。
⌘ + Clickなので、もしかしたら直感的に触ったことがある方もいるかもしれませんね。
関連する選択機能について
今回記事を書くにあたって、FigmaにあるDeep select以外のレイヤー選択・移動機能についても比較しながら整理してみます。それぞれの役割を整理すると以下のようになります。
| やりたいこと | 使う方法 |
|---|---|
| 見えている子レイヤーをすぐ選びたい | Deep select |
| 親子関係を確認しながら1階層ずつ移動したい | Select Child |
| 重なったレイヤーの中から正確に選択したい | Select layer menu |
| 全体のレイヤー構造を確認したい | Layers panel |
以降では、それぞれの機能について詳しく見ていきます。
Select Child
returnまたはダブルクリックで、選択中の要素から1階層下の子要素を選択できます。
階層構造を確認しながら少しずつ潜りたい場合に使えます。
Deep select
前述の通り、見えている子レイヤーへ直接アクセスしたい場合に使います。
Select layer menu
右クリックから利用できるSelect layerでは、カーソル位置の下にあるレイヤーを一覧から選択できます。
複数のレイヤーが重なっている場面では、一覧から対象を指定できます。
Layers panel
Layers panelでは、レイヤーの親子関係を確認しながら対象を選択できます。
私の場合、単純に見えているレイヤーを選ぶときはDeep selectを使い、構造そのものを確認したいときはLayers panelを使う、という使い分けが良さそうだと感じました。
まずはDeep selectを第一候補として使い、うまく選択できない場合にSelect layer menuやLayers panelを使う、という流れが合いそうです。
Tips：選択機能を組み合わせる
ここまで紹介した機能を組み合わせた、実践的な使い方を2つ考えてみました。
1. Deep selectで選択してからSelect Parentで戻る
Deep selectを調べていて、もう一つ便利だと思ったのがSelect Parentです。
Shift + returnで、現在選択しているレイヤーの親へ移動できます。
つまり、
- Deep selectで目的の子レイヤーへ一気に移動する
-
Shift + returnで必要なところまで親へ戻る
という操作ができます。
ここは実際に使ってみて、階層が深い場面ほど便利だと感じました。
2. 同じ階層のレイヤー間を移動する
同じ階層にあるレイヤー間は、以下のショートカットで移動できます。
-
Select Next Sibling：
Tab -
Select Previous Sibling：
Shift + Tab
Deep selectで目的の階層まで入った後、近くの要素を順番に確認したい場合には、マウスで毎回選び直す必要がありません。
おわりに
今回は、Udemyで学習する中でDeep selectを知り、Figmaのレイヤー選択について改めて整理してみました。
まだUdemyのコンテンツ全体の20%程度しか進んでおらず、本当に「初心者」ですが、記事を通して頭の中を整理しながら理解を深め、これからも地道にコツコツ学んでいこうと思います！
ここまでのまとめスライド (with ChatGPT)
