Web制作で知っておくべきFigmaの学習 #Day03 「Layer/Objectの理解」

前回の学習で、Canvasの上にいろいろなものを置いて、それらをPageやSectionで整理できたと思います。。 今回は、Canvas内のLayerとObjetという概念（機能）について学習を進めていきます。 例えば、Canvasに、 ・タイトル ・説明文 ・ボタン ・画像 これらを置いた場合、 Figmaの左側にあるLayersパネルを見ると、それぞれが一覧として表示されているのがわかります。 「レイヤー」と書かれている所に、リストで置かれているのが、「オブジェクト」。 これが今回学習する、LayerとObjectです。

Objectとは？

Objectは、簡単に言えば、Figma上に存在する一つ一つの要素です。

・テキスト ・四角形 ・円 ・線 ・画像

などがあります。 画面下部のツールバーで作れるものがそれです。 Canvas上に四角形を1つ作れば、その四角形は1つのObjectです。 文字を1つ置けば、それもObjectです。 つまり、

Canvas │ ├─ 四角形 ├─ 円 ├─ テキスト └─ 画像

というように、Canvas上には複数のObjectが存在しています。 HTMLのタグのようなものと考えてもいいと思います。

Layerとは？

Layerは、Figmaの中でObjectなどを管理するためのレイヤー（階層）です。 左側の「レイヤー」にオブジェクトの一覧が並んでいるので、わかりやすいと思います。 Layerは、Objectを内包することから、 Canvasと同じと考えてもいいのですが、実は少しだけ違っていて、 Figmaの環境設定で、言語を「日本語」にセットして使っている人も多いと思いますが、「English (英語)」で表示すると、次のように表示されます。 「Layers」と書かれているので、実はこれは、Layerの複数形なんですね。 今回は、日本語の都合で　Layerとして説明していますが、Layersは、Layerをたくさん入れ込むための器ということになります。 そうなると、個別のLayerは、Objectとイコールというという風に考えてもいいと思います。 複数のLayerを、グループとして、多段の階層化にすることもできます。

Layer(Object)の名前を変える

四角や丸、テキスト文字などを、配置してそのままの状態だと、 Rectangleや、テキスト名、という状態のままになっています。 これを変更すると、後から見た時にレイヤー上での選択や、グルーピングをする操作が楽になります。 名前の変更方法は、Objectの箇所をダブルクリックするか、右クリックして、「名前の変更」を選択してください。 デフォルトのままにしておくよりも、変更して、スッキリさせておいた方が、はるかに見やすくなるのがわかりますよね。 こういう細かな作業もFigmaを管理する上では、重要な作業になります。 「人間がデザインを理解するための情報」とでも考えてもらえるといいかと思います。

Layerには順番がある

もう一つ重要なのが、Layerの順番です。 例えば、

Layers │ ├─ 背景 └─ タイトル

という2つのLayerがあったとします。 Canvas上では、

背景 ──────── タイトル

のような関係になっています。 Canvasの画面をみるとこんな感じです。 タイトルが、背景画像の下に潜っていますね。 なので、Layerの順番を入れ替えなければいけません。

順番を入れ替える

レイヤーリストで、タイトルをドラッグして、移動させます。 Layerパネルの一覧で上にあるものが、表示優先順位が高いという事がわかりましたでしょうか？

Layerの「親子関係」

igmaのLayerは、単純に上から下へ一列に並んでいるだけではありません。 Layer同士に、親と子という関係を作ることができます。

Webサイト ├─ ヘッダー │ ├─ ロゴ │ └─ ナビゲーション │ └─ メイン ├─ タイトル ├─ 説明文 └─ ボタン

サンプルですが、こんな構造が一般的ですよね？ これは実際のWebページのHTML構造にも少し似ています。 HTML

<header> <div class="logo">ロゴ</div> <nav>ナビゲーション</nav> </header>

Figma

ヘッダー ├─ ロゴ └─ ナビゲーション

こんな感じに構造を作ることができます。

あとがき

Objectはともかく、FigmaのLayer(Layers)について今回は学習してみました。 実際に触ってみたほうがわかりやすいので、是非動かしながら体感してみてください。 Figmaは、使い慣れてナンボという デザイン系ソフトで派閥を作りやすい構造でもありますので、 「苦手意識を取り除いたら、勝ち」 だと考えましょう。 Layerを制するものは、デザイン作業を制することができるかもしれませんよ。