ともすた Figmaでは、長方形や楕円などの「シェイプ」を組み合わせて、1つのオブジェクトとして扱うことができます。こうすることで、移動や変形などをやりやすくしたり、管理しやすくなります。
この時Figmaには「グループ化」と「結合」、「統合」、そして「コンポーネント化」という方法があります。それぞれの違いについて紹介しましょう。
最も手軽なグループ化
複数のシェイプをまとめる方法で、一番手軽なのが「グループ化」です。一時的にまとめておきたいときや、単純に複数のシェイプをまとめたい場合に使います。グループ化をする場合は、複数のシェイプを選択したら、メインメニューの「オブジェクト→選択範囲をグループ化」メニューをクリックします。
これで、1つのオブジェクトとして移動やサイズの変更などが行えます。レイヤーパネルをみると「Group 1」などと表示され、左側の▶をクリックすることで、中のシェイプをみたり編集することができます。また、オブジェクトをダブルクリックしても、各シェイプを編集することができ、グループ化したまま調整をすることもできます。
そして、後からグループ化をやめたい場合は、同じメインメニューの「オブジェクト→選択範囲のグループ解除」メニューを選べば、簡単に解除することができます。こうして、どんどん関連したシェイプをまとめることができます。
面白い効果を作れる結合
グループ化と似たまとめ方に「結合」があります。同じく複数のシェイプを選択したら、メインメニューから「オブジェクト→ブーリアングループ→選択範囲の結合」をクリックしましょう。グループ化と同じように、1つのオブジェクトにする事ができます。
レイヤーパネルでは「Union 1」などと表示されますが、中のシェイプはグループ化と同様に編集することができます。
ただし、グループ化と違って結合したオブジェクトは、それ自身が1つのシェイプとして扱われます。そのため、「塗り」や「線」の設定も1つしか保持できず、別々の設定をしているシェイプ同士を結合すると、統一されてしまいます。
また、結合したオブジェクトに「線」を引いてみるとグループ化の違いが分かります。グループ化の場合は線を引いても、それぞれのシェイプに線が引かれます。しかし、結合をしたオブジェクトに線を引くと、全体の周りにだけ線が引かれます。このように、グループ化とは違った加工が行えるようになります。
結合の種類
ブーリアングループには、結合の他にも次のような結合方法があります。
結合
2つ以上のシェイプをそのまま組み合わせます
型抜き
上に重なったシェイプの形に、下のシェイプが切り抜かれます
交差
2つのシェイプが重なっている部分だけが残ったオブジェクトになります
中窓
交差の逆で、重なっている場所だけが切り抜かれたオブジェクトになります。
最終的に行う統合
統合は、グループ化や結合と違って「解除」をする事ができません。また、レイヤーパネルでも中のシェイプを確認することができなくなります（ただし、ダブルクリックで編集することはできます）。
つまり統合は、グループ化や結合をして編集を行った後、最終的にそれ以上変更をしないといった場合に利用することがあります。とはいえ、実際にはあまり使うメリットはなさそうなので、使う機会はまれかと思います（筆者の知らないメリットがありましたらコメント欄で教えてください）。
再利用可能なパーツを作成できるコンポーネント
コンポーネントは、単に複数のシェイプをまとめるだけではなく、作成したオブジェクトを再利用可能なパーツにする事ができる、非常に高機能な概念です。
複数のシェイプを選択したら、メインメニューで「オブジェクト→コンポーネントの作成」をクリックしましょう。
基本的にはグループ化と同様に管理することができます。しかし、選択時の線の色やレイヤーパネル内での色などが他と変わる事が分かります。また、「アセット」パネルに作成したコンポーネントが表示されます。
コンポーネントは他のグループ化したオブジェクトなどと同様に、複製する事ができます。しかし、レイヤーパネルでの見た目などが異なっています。この状態で、最初に作成したコンポーネント（これをメインコンポーネントと言います）を編集してみましょう。
それに合わせて、複製したものも変化するようになります。
コンポーネントは、メインコンポーネントから派生したオブジェクト（これを、インスタンスといいます）は、メインコンポーネントで変更された内容を反映するようになります。これによって、例えば画面全体で利用するボタンなどのパーツをコンポーネントにすることで、全体の見た目の統一を保ったまま編集できるという訳です。コンポーネントについては、これ以外にもさまざまな使い方があるので、別の記事で改めて紹介しましょう。