Figmaの基本構成：キャンバス、セクション、フレーム、グループを理解する
まずはFigmaの基本構成を理解しましょう。下記はFigmaの基本的な作業画面です。
真ん中のグレーの部分がキャンバスで、作業スペースとなります。
左に「ページ」という項目がありますが、1ページにつき、1つのキャンバスが存在します。
同じく左に「レイヤー」という項目があります。ここには、キャンバス内の要素が表示されます。レイヤーにはテキスト、画像などデザインを作るときの材料が表示されます。同じくレイヤー内に表示されるセクション、フレーム（frame）、グループ（group）をざっくり説明します。
- セクション：キャンバス内の仕切り。1セクション内に複数のフレーム（frame）を入れて、見た目上まとめる、などが可能。
- フレーム（frame）：デザインを作成する際の枠。バナーデザインであれば、バナーサイズのフレーム（frame）が必要、WEBサイトデザインであれば、WEBページ1画面のフレームが必要。
- グループ（group）：複数の要素をまとめるフォルダ。要素を整理したり、まとめて移動させる際に使用。
※フレームは他のデザインツール（Photoshop、Illustratorなど）で言うアートボードのような役割です
Figmaの「フレーム」と「グループ」の機能的な違い
一言でいうと、2つの違いは「中身（中の要素）と外枠（全体のサイズ）の関係性」にあります。
① グループ：中身に合わせて「自動でサイズが変わる」
グループ（group）は、複数の要素を「ただの透明な袋にひとまとめにした状態」です。
袋自体に大きさは無いので、中の要素のサイズ＝グループ（group）のサイズになります。そのため、中身のテキストを拡大したり、オブジェクトを移動したりすると、外枠（青い選択線）も自動的に変化します。
逆に、グループ（group）の外枠を拡大・縮小すると、中身の要素も拡大・縮小します。
② フレーム：中身とは独立した「独自のサイズ」を持つ
一方でフレーム（frame）は、中の要素とは関連しない独自のサイズを持った枠です。
そのため、中身のサイズを変えても、フレーム（frame）のサイズは「横300px・縦100px」といったように、自由な大きさを保ち続けることができます。中身を動かしても、外枠のサイズは勝手に変わりません。
また、フレーム（frame）自体に「背景色を塗る」「角を丸くする」「はみ出た中身を見えなくする（クリップする）」といった設定が単体でできるのが大きな特徴です。
オートレイアウトについて
フレームとグループの違いに付随して、フレーム（frame）で使用できるオートレイアウトという機能を簡単に解説します。
オートレイアウトは、フレーム（frame）内の中身の文字量やサイズに合わせて、余白や並び順を自動で調整してくれる機能です。
簡単な例として、下記のようなボタンの場合、オートレイアウトを使用すると、ラベルの長さに伴ってボタンの幅も変わってくれます。
フレームにオートレイアウト機能を追加すると、右側のプロパティパネルにオートレイアウトの項目が表示されます。
【どっちを使う？】使い分けの基準・用途の違い
「違いは分かったけれど、具体的にどう使い分ければいいの？」という方のために、ノンデザイナーのWeb担当者の方がよく遭遇するシーン別の使い分けをまとめました。
具体的な3つの使い分けで違いを理解する
1. ボタンやバナーを作る時 ⇒ 【フレーム（frame）】
Webサイトの「ボタン」や「バナー」を作る時はフレーム（frame）を使いましょう。
フレーム（frame）を使えば、「文字数が変わっても、ボタン全体のサイズや綺麗な余白（マージン）を自動でキープする」という、Figma最強の便利機能（オートレイアウト）が使えるようになります。
2. スマホやPCの「画面そのもの」を作る時 ⇒ 【フレーム（frame）】
「iPhone15の画面サイズで資料を作りたい」「Webサイトのヘッダーを作りたい」という時も、土台となるのはすべてフレーム（frame）です。
3. イラストやアイコンを「1つの塊」として動かしたい時 ⇒ 【グループ（group）】
例えば、いくつかの丸や線で作った「矢印アイコン」や「イラスト」など、バラバラになると困るパーツを「1つのイラストデータ」として扱いたい時。こういう時こそ、ただ要素をまとめるだけの「グループ（group）」の出番です。
Figmaを活用したWeb制作のご相談はスタジオカレンへ
「社内でFigmaを導入したけれど、デザインのルール化が難しい」
「Figmaで作ったワイヤーフレームをベースに、プロに本格的なWebサイトを作ってほしい」
WEB制作会社のスタジオカレンでは、Figmaを活用したスムーズな連携や、ノンデザイナーの担当者様向けのWeb制作・デザインサポートを承っています。自社サイトのリニューアルや新規立ち上げでお困りの際は、ぜひお気軽にご相談ください！
※本記事で紹介した内容は記事作成時点（2026年5月）の情報です
※記事作成において分かりやすさを重視して平易化するため、厳密な解説を省いている部分があります