エンジニアにも使いやすいFigma入門
■第３話：グループ、フレーム、コンポーネント
（最終更新日：2023.07.27）
（絵が小さい場合はスマホを横に）
「効率的に作りたい！」
場当たり的に作りたいデザインから作ってしまうと、統一感がなく、どうしても非効率な作り方になってしまいがちである。
前回のカラースタイルとテキストスタイルに関してもそうだが、
良くつかうものに関しては部品化、構成要素として保存しておくことがベターである。
今回はそんなデザインの構成要素を作成するための、グループ、フレーム、コンポーネントについて説明する。
[目次]
１.レイアウトグリッドの表示
いよいよ、本格的に中身のデザインについて説明しよう。 とその前に一つだけ下準備をしておこう。 今の作製画面のままでは、コンテンツの位置が把握しにくい。そこでグリッド線を有効にする必要がある。 画面（iPhone14）のフレームを選択し、レイアウトグリッドの＋ボタンを押す。 すると画面に格子状の線（グリッド線）が現れる。線の間隔は変更可能であるが、ひとまずデフォルトの10pxで大丈夫だろう。 これで、コンテンツの位置調節をバッチリできるはずだ。
レイアウトグリッドの表示
２.グループ化
グループ化はパワーポイントで使うグループ化とほぼ同じである。 マウスで複数箇所を選んで、右クリックでグループ化を選べばグループ化できる。 例えば、写真と文章をグループ化した場合、 その大きさを変更した際は、いずれも大きさに追従して大きさや文字配置が変化する。 それらの背景色を変えることはできない。
グループ化は中身の大きさを調整する
３.フレーム化
フレーム化もグループ化とほぼ同様の操作で行うことができる。
対象とする複数箇所をマウスで選択して、右クリックを押してフレーム化を選ぶだけである。
フレーム化の特徴としては、背景色を入れられるというのと、
フレームの大きさの変更に対して画像、文字が追従しないということである。
（設定により、追従させることもできるが、デフォルトはしない）
また、オートレイアウト機能により、フレーム中のコンテンツの位置を調整することができる。
下図は上下左右中央寄せした例である。右上寄せ、左下寄せなども可能で、数値で調整することもできる。
コンテンツの大きさを維持し、余白を付けたい場合はフレームが向いている。
Fontフレームを作成し、テキストスタイルを登録する
４.コンポーネント化
コンポーネントは、一言で言えばひな形である。繰り返し使う部品をコンポーネントとして定義することができる。 コンポーネント化は、まとめたいパーツを複数選択した後、上にあるコンポーネントボタンを押せばできる。 下図では、ペンギンの画像と「今日のメニュー」という文字、背景色をコンポーネントとして作成した。 コンポーネント化の良いところは、コピー（インスタンス）を生成できる点である。 下図右では、新たにインスタンスを作成し、画像をエビに、文字を「明日のメニュー」に変更した。 インスタンス化する利点は、元のフォーマットを維持しながら一部中身を変更できる点である。 もしこの状態で、コンポーネント側の背景色を緑にしたら、インスタンスであるエビの背景色も緑になる。 フォーマット自体を一括変更できるのが良い。
コンポーネント化し（左）、インスタンスを作成、画像を変更（右）
５.まとめ
今回はFigmaのグループ化、フレーム化、コンポーネント化について説明した。 特に最後のコンポーネント化は前回のカラースタイル、フォントスタイルと同様、 デザインに統一感をもたらすのに非常に重要な役割を果たす。簡単なものからで良いので使えるようになろう。
▼参考図書、サイト
Figma公式サイト figma.com
Figmaの使い方 ｢完全攻略｣ 基本編を分かりやすく解説！【2022年最新版】 Uチャンネル（YouTube）
のんびり学ぶ Figma 〜コンポーネント編〜 SAKURA internet