Figmaでデザインする際にグループとフレームの使い分けに迷ったことはありませんか？
本記事ではそれらの大きな違いと使い分けのポイントを解説します。
グループとフレームの使い分けについて、Figmaの公式記事では以下のように記されています。
次の場合にグループを使用します:
複数のオブジェクトを1つの管理可能なレイヤーにまとめたい
拡大縮小しても固定関係が維持される要素をグループ化したい場合（例：複数の図形で構成されたロゴやシンボル）
グループ内のオブジェクトのサイズを変えたときに、グループの枠のサイズも自動的に変えたい
次の場合にフレームを使用します:
フレームのサイズを、その中のオブジェクトとは独立して制御したい
子要素のサイズ変更動作を定義したい
フレーム内のオブジェクトのサイズがフレームの枠を超えたときに、表示させるかどうかを選択したい
プロトタイプ内のUIコンポーネントにスクロール動作が必要な場合（例：水平カルーセル、または垂直および水平にパンできるマップ）
フレーム内にレイアウトグリッドを使用したい
出典：https://www.figma.com/ja-jp/best-practices/groups-versus-frames/
いくつかポイントはありますが、最も大きな違いはグループやフレームを拡大縮小した際の中の要素の動き方です。
グループは「拡大縮小すると中の要素も一緒に拡大縮小する」という特徴があります。
一方、フレームはグループと違い拡大縮小をしても基本的には中の要素の大きさは変化しません。しかし「配置をコントロールできる」という特徴があります。
配置をコントロールするためには「制約（Constraints）」を使います。
このように「左下に固定」などフレームの大きさに関わらず要素を置く位置を固定することができます。
また、オートレイアウトを使うとフレーム内にある全ての要素に対して配置を決めることができます。
そのため画面サイズを変えても要素の位置が崩れないようにしたい場合などに利用すると良いでしょう。
また、フレームを使うとプロトタイプ上で横スクロールをさせることもできます。
グループとフレームの違いを正しく理解して、使い分けができるようになりましょう！
