まず違いを一言で
グループは複数の要素をひとまとまりとして扱うための機能です。一方、フレームはサイズを持つコンテナで、レイアウト、制約、Auto Layout、プロトタイプなどの機能を利用できます。
| 観点 | グループ | フレーム |
|---|---|---|
| 主な目的 | 要素をまとめる | デザインの領域・構造を定義する |
| サイズ | 中身に合わせて変わりやすい | サイズを明示的に設定できる |
| Auto Layout | グループを選んで追加すると、Auto Layoutを備えたフレームとして扱われる | 適用できる |
| 制約（Constraints） | 機能に制限 | 子要素に設定できる |
具体的な使い分け
- アイコンとラベルをひとまとめに扱いたい → グループでも可。
- カード、ボタン、Webページのセクションを設計したい → フレームが基本。
- 中の文章が増えても幅・高さのルールを守りたい → フレーム＋Auto Layout。
操作して比較しよう
- 四角形とテキストを作り、まずグループ化する（Mac：
⌘ G／Windows：Ctrl G）。 - 同じ要素を複製し、フレーム化してみる。
- テキストを長く変更して、サイズや位置の変化を観察する。
- フレームにAuto Layoutを加えた場合も比較する。