UI/UXデザインツール『Figma』入門

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

  • UIデザイン
  • UXデザイン
  • プロトタイピング

フレームやオブジェクト、キャンバス内の要素はレイヤーパネルで管理できます。

公開日:2019/05/29最終更新日:2021/07/20

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.レイヤーの表示/非表示を切り替える・レイヤーをロックするロック

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

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

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

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

理解度チェック





UI/UXデザインツール『Figma』入門

1. Figmaの概要とインストール

2.Figmaの基本操作

3.ツールバーの操作

4. プロパティパネルの操作

5. プロトタイピング

6. 共有とバージョン管理

7. 料理写真投稿アプリを作ってみよう



このレッスンの著者