これは no plan inc. Advent Calendar 2023 の 7 日目の記事です。

担当しますのは、現在ハッピーニート中の skinnybrian です。デザインネタが得意で、好きなエディタは Vim です( ´ ▽ ` )ﾉニート最高！！

最後に書いたアドカレは 2019 年。実に 4 年ぶりに Qiita に書くのでいろいろ日本語がおかしいところあるかもしれませんが、現役エンジニア、そしてデザイナーの皆様にも楽しんでいただけたらなと思います

この記事では、初心者もベテランも意外と落とし穴にハマりやすい Figma の "Group" と "Frame" 機能について書いてみました。

TL;DR

Figma において、オブジェクトをまとめてグループ化したいときは原則 Frame を使おう！
Figma で Group を多用してしまうと、今後のデザイン調整でとても不便になる。
Frame は、むしろ Figma が用意してくれた "めちゃめちゃすげぇ Group 機能" と捉える。
Group を使うシーンは、実際の現場ではほとんど無し。ただ、キャンバスに散らばったオブジェクトを一時的にまとめて移動させたりする程度には便利に使えるときもある。

はじめに

昨今、Web サービスの UI デザインツールにおいては Figma が主流になりました。なぜこんなにも Figma が愛されるようになったかは、実際にプロダクトに導入している企業やデザインチームが一番その恩恵を理解していると思います。

現場で Figma を使う人達は様々。デザイナーに限った話だと、Figma が出る前まではこれまで Adobe XD や Sketch で Web or UI デザインをしていた、という時代もあれば、更に過去歴史をたどると Adobe Photoshop で Web デザイン作って、マークアップエンジニアが Photoshop から画像やアイコンをスライスして画像抽出しながらコーディングしていた…なんて時代もありました（懐かしい…）。

しかしながら、そんな時代背景もあったせいか、僕自身いろんなデザインの案件で UI/UX デザインをしていたとき、Figma のデザインファイル内で辛い事態に遭うことがあります。その1つが、Figma の重要な概念の一つである Frame が正しく使われておらず、 Group を多用してしまっていることだったりします。そして Group を多用することが、デザイン修正がスムースにできずデザイン負債となってしまうことも。なぜこのようなことが起きてしまうのでしょうか。

Figma における "Group or Frame" 問題

この問題を取り扱う前に、まずは Figma において Group と Frame のそれぞれの機能の定義を抑えておきましょう。

Group とは

By default, groups take on the combined dimensions of their children.

訳: デフォルトでは、Group は子要素たちの次元を合わせたものになる。

と書かれています。要するにオブジェクトをまとめる上で最も一般的は機能のようです。

Frame とは

Sometimes, it is useful to have a layer whose size is explicitly set by you. These are called Frames.

訳: レイヤーのサイズを明示的に設定すると便利な場合があります。これをフレームと呼びます。

と書かれています。そして更に

Selecting and moving items within a Frame works exactly the same way as groups.

訳: Frame 内の項目の選択と移動は、Group とまったく同じように機能します。

とも書かれています。要するに、Frame は Group と同じ機能を持ち合わせ、更に Frame 自体のサイズを指定することができると解釈できます。この時点でも Frame はめちゃくちゃ便利な Group 機能と捉えることもできます。

同じデザインを Group と Figma で表現すると

つらつら文章で書いていきましたが、百聞は一見にしかずです。今回は例として、以下のようなエディター機能によくありそうな「編集ボタン」を Figma で作ってみました。上が Group を用いて作ったもの、下が Frame を用いて作ったものです。

ご覧の通り、見た目的にはほぼ完全に一致しています。 そう、ぶっちゃけ Group を使おうが Frame を使おうが Figma では同じデザインを実現することができます。 ですが、これを拡張したり、大きさを変えて編集しようとした場合に、Group ではちょっと（いや、正直とても）辛いことがおきます。

以下で、主要なケースについて Group と Frame について比較してみます。

1. オブジェクトを拡大・縮小するとき

Group 化された状態で、そのオブジェクトの大きさを変えると、オブジェクトの変形に合わせて中のオブジェクトも変形してしまいます。1:1サイズでアイコンが作られていた場合ですと、比率を保持したまま変形しない限りは図のようにアスペクト比が崩れる場合があります。

一方 Frame でまとまった状態でオブジェクトの大きさを変えた場合、中の配置されているオブジェクトにそれぞれ Constrains を定義しておけば、Frame の変形に合わせてオブジェクトが追従するようにセットすることができます。また Group のように、 Frame に配置したアイコンを Frame の変形に合わせて変形するようにセットすることもできます。これを実現するには、 Constrains で縦or横に対して Scale を選択することで実現できます。

2. オブジェクトをまとめたいとき

Group 化したものに対して、更にそこにオブジェクトを追加したいときは、Group 化したレイヤーに含ませることでまとめることができますが、Frame では基本的にロックされていない限り、 Frame 上にオブジェクトを置くことで簡単にオブジェクトをまとめることができます。Group 化されたものに同様に加えたいオブジェクトを置いたとしても別扱いされてしまうため、 Frame のほうがその点ではとても優秀です。

3. Auto Layout を使いたいとき

Figma では、縦並びor横並びのレイアウトを簡単に組んで並び替えも容易にできる Auto Layout という機能があります。対象の複数のオブジェクトを Auto Layout で組んだ場合、仕様として その親オブジェクトは必ず Frame になります。 Group 化されたオブジェクトで Auto Layout は組めないのですが、最初から Frame でまとめたオブジェクトであればいつでも Auto Layout を有効にすることができるので便利です。将来的にオブジェクトが複数縦横に並んだり、テキストオブジェクトを基準に Padding や Margin がセットされる場合には迷わず Auto Layout を使用しましょう。

以上のように、基本的に Group でも似たようなことはできるものの、 Frame で取り扱うことのメリットが多いです。Figma ではぜひまずは Frame をベースにデザインを組むことをおすすめします。

Figma の Frame って、Photoshop や Illustrator でいうところのアートボードと同じなの？というのは間違い

主に Adobe 系のデザインソフトウェアを使用していたデザイナーが Figma を初めて操作するとき、「あーね！ Frame がつまりアートボードだから、ここにデザインしていけば良いんだな」と気づいた方は多いんじゃないかと思います（僕も最初そうでした）。
そこまでは理解として大丈夫なのですが、Figma では「Frame の中に Frame をネストすることで複雑なオブジェクトを作る」ことがケースとして多いです。これはつまり Adobe Illustrator で表現するならば「アートボードの中にアートボードをネストする」ということになるのですが、Illustrator でそれは不可能ではないものの、アートボードごとにレイヤーの管理ができないので基本的にはこういう使い方はしません。むしろグループ機能を活用したり、レイヤーグループを分けたりして管理します。

Figma においては、基本的に上位の Frame が実質アートボードのような役割（iOSデバイスやWebブラウザのウィンドウサイズ）を果たします。そして、Frame の中にテキストオブジェクトも配置できることはもちろん、Frame を配置することもできるのでより複雑なオブジェクト配置が容易になります。Figma ではこのやり方が推奨されます。

Frame でまとめるときは `<div>` タグ等の要素を使いそうなところを意識する

では Figma ではどのように Frame をネストしていくのがベストなのか。一番シンプルなのは、マークアップするときに <div> 等のブロック要素でまとめられたりするものは全部 Frame にしてしまうことです。上図のように、 Modal が親 Frame で、そこにそれぞれ Header 、Content、 Footer のように Frame を配置しています。ちなみにここで使われている Frame は、アイコンを除いてすべて Auto Layout を有効にしているので、オブジェクト間の間隔や、ボタンの Padding も定義しているため、シンプルな構造でこのようなモーダル UI を実現することができます。

また Auto Layout では設定次第でレスポンシブを考慮できるので、このように Frame の横幅を変えると文字やボタンがデザイン崩れず正しく周り込んだりすることもできます。

Figma の Frame はこうみると機能が多いように見えますが、なれるとかなりデザインが作りやすくなるので、ぜひ理解を深めてみてください！

さいごに

ここまで読んでくださりありがとうございました！

エンジニアにおいてチーム開発するとき、「他人が読んでもわかりやすいコードを書くこと」を意識することが開発体験をより高くする上で大切なうちの1つです。それと同じように、チーム開発におけるデザイン、あるいはチームでデザインをすることにおいても「他人がデザインデータをみても取り扱いしやすくする」というのは僕としても重要であると考えています。

また開発とは違って、特に Figma はデザイナーだけでなく PdM やエンジニアなど、業種問わず触れる機会の多いデザインツールなので、もし社内で Figma の勉強会を開催する際は、ぜひ Frame の便利さを広めていただけると嬉しいです。

もし更に Group と Frame について理解を深めたいなと思ったら、末尾にあります参考の Figma Learn のリンクや、Figma の公式記事である "Groups vs. Frames" をぜひ読んでみてください！

Enjoy Figma〜!( ´ ▽ ` )ﾉ