2-3. レイヤーパネルでレイヤーを管理する

1.Figmaの左サイドバーについて

Figmaの左サイドバーには3つの見出しがあります。

• Layers - レイヤーパネル
• Assets - アセットパネル
• Pages - ページリスト

それぞれクリックで開けますが、ショートカットは下記になります。

macOS
Layers Panel and Page List: [Option] + [1]
Assets Panel: [Option] + [2]

Windows
Layers Panel and Page List: [Alt] + [1]
Assets Panel: [Alt] + [2]

2.レイヤーパネルを操作する

キャンバスに追加したフレームやグループ、オブジェクトはレイヤーパネルで管理します。

新しいレイヤーはリストの一番上に追加されます。

レイヤーはグループやフレームを含め入れ子にすることができ、レイヤー名の左、三角マークをクリックすると開きます。

レイヤーがフレームやグループ、シェイプなどどの種類なのかはアイコンで判断できます。

3. レイヤーを選択する

レイヤーはクリックで選択でき、選択されると青くアクティブ状態になります。

レイヤーがキャンバス内のどこにあるのかは、レイヤーをマウスオーバーすることでハイライトがかかるので確認することができます。

4.レイヤーの重なり順を入れ替える

レイヤーパネルで、キャンバスでの重なり順を操作することができます。

また、一度グループやフレームに入れたレイヤーも外に出すことができるのでこまめに整理しましょう。

なおレイヤーパネルで重なり順を変更しても、キャンバス内でのポジションは変化しません。

レイヤーパネルで上にいるレイヤーほど、キャンバス内でも上に表示されます。
重なり順を変えたい場合はドラッグアンドドロップしましょう。

また、キャンバス内で直接右クリックからも重なりを変更できます。

• Bring Forward - 前面へ
• Bring to Front - 最前面へ
• Send Backward - 背面へ
• Send to Back - 最背面へ

ショートカットは下記になります。

• Bring Forward macOS: ⌘ + ] | Windows: Ctrl + ]
• Bring to Front macOS: ⌘ + ⌥ + ] | Windows: Ctrl + Shift + ]
• Send Backward macOS: ⌘ + [ | Windows: Ctrl + [
• Send to Back macOS: ⌘ + ⌥ + [ | Windows: Ctrl + Shift + [

5.レイヤーの表示/非表示を切り替える・レイヤーをロックするロック

レイヤーをマウスオーバーすると南京錠と目のアイコンが表示されます。

目のアイコンをクリックすることでキャンバスでの表示、非表示を切り替えられます。

南京錠アイコンをクリックするとレイヤーがロックされます。

ロックされたレイヤーは表示されたままですが、キャンバスで操作ができない状態となります。