Figmaで複数のオブジェクトを選択して右クリックすると、
・グループ化
・フレーム化
・セクション化
※表示を「日本語」にしている人いも多いかもしれませんが、これ移行この３つを英語表記で書きます。
というのがあるのに気づいた人もいると思います。
以前、
Sectionについては、学習をしたと思いますが、
これらはどれも、「オブジェクトをまとめる」という役割になります。
なぜ3種類もあるのでしょうか？
この３つは、それぞれまとめる目的が違うので、
今回は、この３つに違いついてしっかりと確認をしたいと思います。
Frame/Group/Sectionの違い
| 機能 | 主な役割 |
|---|
| Group | 複数のオブジェクトをひとまとめにして扱う |
| Frame | オブジェクトを入れる「容器」として使う |
| Section | Canvas上のデザインを大きな単位で整理する |
ざっくりとした目的の説明は、この通りです。
でも、これだけだとわかりにくいので、実際に操作をしながら違いを理解していきましょう。
Group
オブジェクトを選択した状態で、右クリックして、「選択範囲のGroup化」を選択するか、
ショートカットで、「Command + G」（Windowsの場合は、「CTL + G」」で、Group化することができます。
Layersパネルをみると、次のような表示になります。
Group化の目的
Groupをセットすると、１回の操作（移動やスケール変更）などを、グループ単位でできるようになるので、
ボタン（Rectangle + テキスト）みたいな複数のオブジェクトだけど、１つの要素（オブジェクト）として扱いたい時に、使うとボタン１つを扱う操作で完結するので、効率的です。
もちろん、Groupの中には、１つずつのオブジェクトが入っているので、
ダブルクリックして、一つずつのオブジェクトを選択して操作することも可能です。
Frame
同じ手順で、選択したオブジェクトをフレーム化してみます。
Layersパネルを見ると、Group化と同じ状態で、Frame階層に収まっています。
FrameもGroupも同じようなグループ化ですが、これらの違いについては、ここから下を読むとよくわかります。
FrameとGroupの違い
右側の、インジケータパネルの「塗り(fill)」の + ボタンを押して、色をつけてみます。
とりあえず、わかりやすく赤色にしますね。
すると、次のようになります。
Groupも同じように「塗り」で赤色をセットしてみます。
すると・・・
違いがまるわかりですね。
Frameは、Frame自体に背景色をセットできるのに対して、
Groupは、Groupの中のオブジェクトに色をセットする仕様になります。
どうやら、Frameは、HTMLのdivみたいな扱いで、オブジェクトの親要素（オブジェクト）として、セットできる入れ物のようですね。
構造としての考え方
デザイン構築するときに、FrameとGroupを、どういう風に考えた方がいいかというと、
Frame
└─ Group
└─ Object
Groupは、複数のオフジェクトを扱っていてもあくまで１つのオブジェクトとして扱い、
Frameは、Group化したものも含めた、Objectの親改装になると考えた方がいいでしょう。
ちなみに、Sectionも赤色で塗りつぶしてみるとこんな感じです。
FrameとSectionの違い
Sectionも複数のものをまとめることができます。
では、
Frameと何が違うのでしょうか？
大きな違いは、
SectionはCanvas上のデザインを整理するためのもの、
Frameはデザインそのものを構成するためのもの
という点です。
Sectionも加えた構造思考は以下のような感じです。
Section
└─ Frame
└─ Group
└─ Object
もちろん、Sectionの中にSectionを複数持たせることもできますが、Figmaにおける、SectionとFrameの明確な違いは、
Sectionは、Frameで囲うことが出来ないということです。
Frameを複数選択した状態であれば、Sectionで囲うことができます。
でも、Sectionを複数選択しても、
Sectionで囲むか、
それぞれのSectionをFrameに変換する機能
しかありません。
このため、
Section > Frame > Group
この構造で扱うのが一番自然だということでした。
あとがき
今回学習した、Section、Frame、Groupは、
Figmaの基本的な構造を作る時に必要な概念でした。
でも、そもそもシンプルに考えると、
「Frameってなくてもいいんじゃないか？」
と思う人もいるかもしれません。
たしかに、SectionとGroupだけで、ページを構築することはできます。
でも、Frameは、今後学習する予定の機能（下のようなもの）で必要な器でもあります。
・Constraints
・Auto Layout
・Component
・Prototype
Frameは「デザインを構成するための入れ物」として、配置するように心がけましょう。
0 件のコメント:
コメントを投稿