【Figma】初心者向け。オブジェクト・グループ・フレームのそれぞれ違い
Index
今回はFigmaの基礎「フレーム・グループ・オブジェクト」についての解説です。
オブジェクトとグループはAdobeのIllustratorやPhotoshopのオブジェクト要素とグループとほぼ同じ概念ですが、Figmaのフレームには便利な機能がたくさんありAdobeでいうアートボードとは異なります。
フレームを使いこなせるようになると、表現の幅も広がり、作業効率も上がると思うので、「フレーム・グループ・オブジェクト」の特徴をそれぞれ解説し、フレームのここが便利だよ。ってところまで書いていきたいと思います。
この記事を読んでる人におすすめの書籍
フレーム・グループ・オブジェクトの関係
それぞれを解説する前にフレーム・グループ・オブジェクトの関係を説明します。 基本的には下のような関係が表現できます。
フレーム(一番上の階層) > フレーム または グループ または 無し > オブジェクト
ちなみにグループの中にフレームを入れることも出来ます。※最上位は必ずフレーム
では早速それぞれを説明していきます！ 理解しやすいようにオブジェクト・グループ・フレームの順で説明します。
オブジェクトとは
オブジェクトは画面上に配置される基本的な要素です。線、文字、図形、画像などがあり、デザインを構成する最小単位の要素です。それぞれのオブジェクトには、変形、配置、スタイル(色やフォントなど)の操作を行うことができます。
オブジェクトができること
- 基本的な形状の作成: 線、四角形、楕円、三角形などの基本的な形状を作成できる
- テキストを入力し、フォントや文字サイズ、色などを調整できる
- 画像ファイルを挿入し、サイズや位置を調整できる
- ペンツールやブラシツールを使用して、自由な形状を描画できる
- リサイズや回転、スケールアップなどの図形の変形ができる
グループとは
グループは複数のオブジェクトをまとめることでデザインを整理するための要素です。複数のグループをさらにグループ化し階層構造を作ることも出来ます。また、配置、変形、スタイルなどの操作を一括で行うことができます。
グループができること
- 複数のオブジェクトをまとめることができる
- 複数グループを更にグループ化することができる
- グループとしてまとめて移動、変形、表示・非表示、プロパティの適用ができる
フレームとは
フレームは複数のオブジェクトやグループをまとめることでインタラクティブなデザインを作成するための要素です。
グループと似ていますがフレーム内のオブジェクトまたはグループを自動で整列させたりすることが出来ます。また、プロトタイプを作成するときにアニメーションやスクロールビューなどのインタラクティブな動きに対し可変するエリアを表現することが出来ます。
フレームができること
- 複数のオブジェクトやグループを配置することができる
- フレーム内に配置されたオブジェクトやグループは、グループ化と同じようにまとめて移動や変形などの操作ができる
- スクロールビューを作成することができます
- オートレイアウト(自動的に配置や整列)が設定できる
- 可変するインタラクティブな動き対応することができる
フレームのここが違う！
フレームには、スクロール、タブ、アコーディオンなどのインタラクティブなUIを表現することが出来ます。また、フレームの中にフレームを入れるような使い方が出来ます。というか頻繁に使います。
フレームの機能その1. オートレイアウト
オートレイアウト機能はフレームに配置したオブジェクトの整列を数値で設定することが出来ます。
例えば下記のようなカード式のデザインで横に繰り返し配置するレイアウトを作るとき、各カードのマージン(間隔)や上下左右の余白の数値を設定して並べることが出来ます。
オートレイアウトを設定したフレームに新しいオブジェクトを追加すると自動的に設定した数値のルールに準じて横に並んでいきます。
オートレイアウト設定項目
- レイアウトの並び方向
- レイアウトの並び方向の始点
- 隣り合う要素との間隔
- オートレイアウトの左右の余白
- オートレイアウトの上下の余白
オートレイアウトとプロトタイプでアコーディオンを作る
オートレイアウトを設定すると親フレームは設定した余白の数値に合わせるため高さや横幅は自動で可変するようになります。この特性を利用するとプロトタイプでインタラクティブな表現が可能になります。
例えば、アコーディオンのアニメーションを含めたデザインを作成したとします。その際に、アコーディオンの開閉時に合わせフレームサイズが可変することが可能になります。
サンプル
下記はサンプルの設定です。オートレイアウトで各アコーディオンを10pxの間隔で縦に整列しています。また、親フレーム(ここではAccordion)の横幅と高さがオフになり、そのかわり「ハグ(子要素のサイズにフィットする)」設定に切り替わります。
Figmaのプロトタイプをもっと学びたい人にもおすすめ
フレームの機能その2.スクロール
スクロール機能はスクロールを設定したフレーム内の子要素スクロールをすることが出来ます。
今度は、下記のようなスマホでよく見る横スライド式のカードUIを表現したい時にフレームのスクロール機能を活用します。
サンプル
設定方法はスクロールさせたい要素の親フレームにプロトタイプタブから「オーバーフロースクロール」でスクロールする方向を設定します。
オーバーフロースクロール設定項目
- スクロールなし
- 横スクロール
- 縦スクロール
- 横スクロールと縦スクロール
上記のように、フレームには、グループにはない独自の機能があり、デザインをより効率的かつスマートに作成することができます。
また、アコーディオンや横スクロールだけでなく、テキストの文量によるコンテンツの可変など様々な表現が可能となり、デザイナーからエンジニアへのイメージの共有もしやすくなるのでコミュニケーションエラーの回避にも繋がります☝️
フレームとグループの使い分けるときの参考
- グループ: 複数のオブジェクトをまとめ、一つの要素として扱いたいとき
- フレーム: インタラクティブなデザインで表示形式が可変するときや、複数のグループ、オブジェクトを配置し、整体としてデザインを作成したいとき
まとめ
いかがでしたか？初心者向けということで、オブジェクト・グループ・フレームの基礎機能を簡単に説明しました。良ければこちらも合わせて読むと理解が更に深まると思います。では！
この記事を読んだ人におすすめの書籍
