第5章　Figmaを使用したWeb制作（デザインシステム）

第3節　デザインシステムの作成

この項では、レイヤーの操作について学習します。

第3項　レイヤーの操作

この項の学習目標

• レイヤー機能を理解する

レイヤーパネルの表示

この項から2つのFigmaファイルを開いて作業します。
前項で作成したファイル「5-1-3.fig」を開きます。
※途中ファイルがない場合は素材フォルダ [Figma05] - [comp] の中にあるファイル「5-3-2-comp.fig」を「5-1-3.fig」に名前を変更して進めます。

（１）画面左上の [#Master] をクリックしたあと【Enter】キーを押します。

（２）レイヤーパネル一番上の[Clip path group]を同様に開いてみましょう。
グループが展開され、グループ内に含まれるテキスト（カラーコード）とパス（正方形）の各グループが表示されます。

（３）それぞれクリックしてグループ内の要素を確認しましょう。

グループ名の編集

（１）カラースキームのエレメントを全て選択し、右クリックから [選択範囲のグルーブ化] をクリックします。

（２）グルーブがひとつになり、新たなグルーブ名が表示されます。
※グループ名の後ろの数字は手順により変わります。

（３）グルーブ名をダブルクリックし、「カラースキーム」と入力してください。

このように [レイヤーパネル] 上で表示される名称は管理しやすい名称に変更することができます。
このあとフレームに様々なパーツを追加していくので、レイヤーの操作が非常に重要になってきます。

この項のまとめ

• レイヤーパネルではフレーム上のオブジェクトを一覧で表示できる
• レイヤーの名称は自動的に割り振られるので、わかりやすい名称に変更して管理することが重要である

以上でこの項の学習は終了です。
次の項へ進んでください。