Figma

Figmaのフレームとグループの使い分けのポイント

最終更新日:2024.08.30編集部
Figmaのフレームとグループの使い分けのポイント

Figmaでデザインする際にグループとフレームの使い分けに迷ったことはありませんか?

本記事ではそれらの大きな違いと使い分けのポイントを解説します。

グループとフレームの使い分けについて、Figmaの公式記事では以下のように記されています。

次の場合にグループを使用します:

  • 複数のオブジェクトを1つの管理可能なレイヤーにまとめたい

  • 拡大縮小しても固定関係が維持される要素をグループ化したい場合(例:複数の図形で構成されたロゴやシンボル)

  • グループ内のオブジェクトのサイズを変えたときに、グループの枠のサイズも自動的に変えたい

次の場合にフレームを使用します:

  • フレームのサイズを、その中のオブジェクトとは独立して制御したい

  • 子要素のサイズ変更動作を定義したい

  • フレーム内のオブジェクトのサイズがフレームの枠を超えたときに、表示させるかどうかを選択したい

  • プロトタイプ内のUIコンポーネントにスクロール動作が必要な場合(例:水平カルーセル、または垂直および水平にパンできるマップ)

  • フレーム内にレイアウトグリッドを使用したい

出典:https://www.figma.com/ja-jp/best-practices/groups-versus-frames/

いくつかポイントはありますが、最も大きな違いはグループやフレームを拡大縮小した際の中の要素の動き方です。

グループは「拡大縮小すると中の要素も一緒に拡大縮小する」という特徴があります。

一方、フレームはグループと違い拡大縮小をしても基本的には中の要素の大きさは変化しません。しかし「配置をコントロールできる」という特徴があります。

配置をコントロールするためには「制約(Constraints)」を使います。

このように「左下に固定」などフレームの大きさに関わらず要素を置く位置を固定することができます。

また、オートレイアウトを使うとフレーム内にある全ての要素に対して配置を決めることができます。

そのため画面サイズを変えても要素の位置が崩れないようにしたい場合などに利用すると良いでしょう。

また、フレームを使うとプロトタイプ上で横スクロールをさせることもできます。

グループとフレームの違いを正しく理解して、使い分けができるようになりましょう!

この記事の関連シリーズ
Figma

関連記事

Related Articles

  • Figma Config 2025キーノートレポート!これまでにない速さで"アイデアをプロダクトに"できる世界に
    Figma2025.05.08
    Figma Config 2025キーノートレポート!これまでにない速さで"アイデアをプロダクトに"できる世界に
  • Figmaのオートレイアウトの基本的な使い方
    Figma2024.10.16
    Figmaのオートレイアウトの基本的な使い方
  • Figmaで画面遷移図やフローチャートをつくる方法
    Figma2024.10.10
    Figmaで画面遷移図やフローチャートをつくる方法
  • Figmaのコンポーネント化を解除してフレームに戻す方法
    Figma2024.10.08
    Figmaのコンポーネント化を解除してフレームに戻す方法

最新の記事

Latest Articles

  • 【2025年最新】フォトショップの買い切り版はまだある?価格比較と代替ソフトを紹介
    Photoshop2025.06.30
    【2025年最新】フォトショップの買い切り版はまだある?価格比較と代替ソフトを紹介
  • おすすめWebデザインスクール10選|安心の「最大70%給付金対象」のみ厳選
    おすすめWebデザインスクール10選|安心の「最大70%給付金対象」のみ厳選
  • 今すぐできる!動画からGIFへ簡単に変換できるおすすめ無料ツール紹介
    動画2025.06.30
    今すぐできる!動画からGIFへ簡単に変換できるおすすめ無料ツール紹介
  • 東京のスタートアップで働いていたデザイナーが「神山まるごと高専」でデザインの授業を担当する理由
    デザイン教育2025.06.18
    東京のスタートアップで働いていたデザイナーが「神山まるごと高専」でデザインの授業を担当する理由

デジタルデザインの最新情報をお届け!

unprintedのメールマガジンにご登録いただくと、デジタルデザインの最新情報をメールで受け取ることができます。今までに配信したバックナンバーも公開中!

※登録ボタンを押すと利用規約に同意されたものとします。