Figmaのレイヤー周りの基本操作｜グループ化やマスク、オブジェクトのロックや表示切り替えなどのレイヤーでできること

いままでテキスト、図形、パス、画像とひと通りFigmaで使用するオブジェクトの基本操作をまとめてきました。

Webrandum

Figmaのテキスト編集周りの基本操作｜テキストの追加方法からグラデーション設定や...

https://webrandum.net/figma-text

今回はFigmaのテキスト関連の操作についてまとめておきます。テキスト追加の基本まずはツールバーから選択するか、Tを押して、テキストツールに切り替えます。あとはテキストを追加したい位置をクリックすると、黒い線が表示されるので、キーボードで文字を打ち込みます。escかcommand + enterで入力完了です。テキストオブジェクトとなるので、入力後は移動ツールで移動させられます。修正したい場合は、移動ツールの状態でテキストオブジェクトをダブルクリックするか、テキストツールでクリックすれば編集状態に切り替わります。ポ...

Webrandum

Figmaの図形周りの基本操作｜図形の作成方法から細かい設定項目まで

https://webrandum.net/figma-shape

今回はFigmaの図形関連の操作についてまとめておきます。図形描画系のツール図形描画系のツールは下記の4つになります。ツール名キー内容長方形ツール（Rectangle）R長方形の作成ができる楕円ツール（Ellipse）O楕円の作成ができる多角形ツール（Polygon） 多角形の作成ができるスターツール（Star） 星形の作成ができる直線ツールと矢印ツールは、ツールバーの同じカテゴリ内に入れられていますが、性質がパスに近いので今回は省きます。図形描画の基本まずは長方形ツールに切り替えましょう。切り替えた状態でフレーム上を...

Webrandum

Figmaのパス周りの基本操作｜基本的な描画方法からペンツールと直線ツールの細かい...

https://webrandum.net/figma-path

今回はFigmaのパス関連の操作についてまとめておきます。パス描画系のツールパス描画系のツールは下記の4つになります。ツール名キー内容ペンツール（Pen）Pベジェ曲線を使用したパスの作成ができる鉛筆ツール（Pencil）shift + Pフリーハンドで線の作成ができる直線ツール（Line）L直線の作成ができる（1本線）矢印ツール（Arrow）shift + L矢印の作成ができる（1本線）曲線にも対応したペン系ツールと、直線のみ作成できる直線系ツールの2分類で、ショートカットキーもそれぞれP（Pen）とL（Line）で、shiftを押すともう片方のツール...

Webrandum

Figmaの画像周りの基本操作｜画像の追加方法や色補正、切り抜き方法まで

https://webrandum.net/figma-image

今回はFigmaの画像関連の操作についてまとめておきます。画像配置の基本画像を配置する方法は下記の3つあります。 ドラッグアンドドロップで追加 画像ツール（shift + command + K）で追加 画像ツールで図形マスクをする形で追加 Fillに画像を設定他のデザインツールの場合は、画像の追加方法によってふるまいが変わることもありますが、Figmaの場合は現状どんな方法を使っても同じ振る舞いになるので、やりやすい方法でOKです。ドラッグアンドドロップで追加まずは画像をFinderなどから直接ドラッグアンドドロップで追加する方法です...

今回はそれらがまとまって表示されているレイヤーパネルの見方や操作についてまとめておきます。

レイヤーパネルの概要

レイヤーパネルにはまず1番に「フレーム（アートボード）」が表示され、その中にあるオブジェクトが並んでいきます。

レイヤーの並び順は新しいオブジェクトを作ると必ず1番上に追加されていき、レイヤーで上に表示されているものの方が前面に表示されます。

レイヤーに表示されている項目をドラッグして下の方に持って行くと背面に移動しますし、上の方に持って行くと前面に移動します。

ページの切り替え

レイヤーパネル右上の「Page 1」と表示されている部分をクリックすると「Pages」項目が表示されます。

「Pages」右上の「＋」アイコンをクリックしてページの追加ができるので、ページを分けたい場合はここから分けられます。

グループ化

複数のオブジェクトをグループ化して1つのオブジェクトにまとめることができます。

shiftを押しながら複数のオブジェクトをクリックするか、もしくはドラッグして複数選択した状態で右クリックして［Group selection（command + G）］でグループ化できます。

グループ化するとオブジェクトが1つにまとめられ、マウスでの移動も一気にできるようになります。
グループ内のオブジェクトを個別に選択したい場合はダブルクリックしてグループ内に入るか、もしくはcommandを押しながらクリックで個別に選択できます。

レイヤー上もグループができて、その中に各オブジェクトが入っています。
グループ化した直後は折りたたまれていますが、レイヤーのグループ項目左の三角アイコンをクリックして表示するか、メイン画面でグループをダブルクリックすると、レイヤーパネルでも折りたたまれていた項目が表示されます。

グループ化を解除するときはグループを選択してから右クリックして［Ungroup（shift + command + G）］で解除できます。

ちなみにグループができたときのレイヤーの位置ですが、グループ化されたオブジェクトの中から1番上のオブジェクトがある位置にグループオブジェクトが追加されます。

グループ解除したときはそれぞれ元いた位置に戻るのではなく、そのままグループオブジェクトが消えてそのレイヤー位置に全オブジェクトが残ります。

これを利用すると、グループ化する意図ではなくレイヤー整理のために集めたいオブジェクトをグループ化してすぐ解除するなんて使い方もできますね。

マスク

画像とオブジェクトをグループ化し、画像が上（手前）の状態で図形を右クリックで選択し、「Use as mask（control + command + M）」を選択すると図形でマスクできます。

ちなみに画像と図形両方選択した状態でマスクしても、影響するのは一番下（背面）のオブジェクトに対してのみです。
レイヤーの表示もマスクしたオブジェクトから上に向かって矢印が表示されます。

グループ化しなくても使えますが、グループ化しないと上に並ぶ全てのオブジェクトに対してマスクしてしまいます。

レイヤー項目の操作

名前の変更

レイヤー項目をダブルクリックまたは右クリックして［Rename（command + R）］でレイヤー項目の名前を変えられます。

複製・削除

レイヤー項目をクリックすると、メイン画面でも該当のオブジェクトが選択されたことになるので、その状態でcommand + D、またはcommand + Cでコピーしてcommand + Vでペーストしてで複製できます。

もしくは、レイヤー項目やオブジェクトをoption + ドラッグすると、マウスを離したレイヤー位置に複製できます。

右クリックから「Copy」もできますが、よく使うのでショートカットキーを使うようにしましょう。

オブジェクトのロックと表示切り替え

レイヤー項目にマウスオーバーすると右に「鍵アイコン」と「目のアイコン」が表示されます。

鍵アイコンをクリックするとロック状態になり、そのオブジェクトを操作できなくなります。
目のアイコンをクリックすると、そのオブジェクトが非表示になります。

それぞれ再度アイコンをクリックして解除できます。

ちなみに、わざわざレイヤーパネルに移動しなくても、ショートカットキーも用意されていてロック切り替えがshift + command + Lで、表示切り替えがshift + command + Hです。
ただし、非表示にしてから選択を解除してしまうと、選択できなくなってしまうのでその場合はレイヤーパネルからアイコンクリックで再度表示にする必要があります。