Figmaのframeとgroupの違い

前回のFigmaに関するnoteがバズったので調子に乗ってまたFigma関連の記事を書きたいと思います。

前回の記事↓

私がSketchからFigmaに切り替えた時に最初に「ファッ？」ってなったのが、frame(フレーム)とgroup(グループ)の違いです。

みなさん、なんとなくでやってませんか？
実は似て非なる機能を持つ、frameとgroup。今回はこの二つの違いについて徹底的に解説していきます。

groupとは

groupはその名の通りレイヤーをグルーピングしたもので、それ以上でも以下でもありません。groupの役割を理解するにはframeを先に理解した方がいいかもしれません。

frameとは

frameもgroupのようにレイヤーをまとめる機能であることに違いはないのですが、最大の違いは、子要素の整列基準になることです。

FigmaではiPhone 11 ProやGoogle Pixel 2などのデバイスサイズのテンプレートが標準で用意されているので、使っている人も多いと思いますが、実はこれも「frame」なのです。（ちなみに、オートレイアウトもframeです。オートレイアウトを追加すると自動的に要素がframeに変換されます）

この、デバイスフレームの中に四角形などの要素を配置すると、点線で要素の整列基準が表示されます。

これは、frameのサイズを変更した時に、要素がどの位置に配置されるかを決める「constraints(制約)」を表しています。デフォルトでは左端と上端が基準となっているので、frameサイズを変更すると以下のようになります。

そこで、constraintsを変更してみます。試しに、左右方向を中央揃えにしてみます。

左右にframeを長くしても、四角形はセンタリングされたままです。

このようにframeとconstraintsをうまく使うことによって、デバイスの幅や親要素のframeのサイズが変わってもいい感じに整列・リサイズすることができます。

一方、groupをリサイズした時は中の要素を「引き延ばす」仕様なので、場合によっては「違う、そうじゃない」というリサイズになってしまいます。

グループをリサイズすると、中の要素が引き延ばされる。これでいい場合もあるが、今回は「違う、そうじゃない。」

そこで、groupをframeに変換します。

リサイズしたときの挙動が変わった。（引き延ばされなくなった）。が、まだ理想的ではない。中の要素のconstraintsを指定していないからだ。

constraintsを全ての子要素に対して設定した。すると、親要素を拡大縮小しても、全てが引き延ばされることなく、要素によっては左揃えのままになったり、右揃えのままになったり、いい感じにリサイズされるようになった。

constraintsの種類には分かりににくいものもあるが、色々試しながらリサイズしてみると分かると思います。

詳しくはこちら。

おまけ

前回、オートレイアウトでできないことに関して「レスポンシブができない」と書きましたが、恐るべきことに先週、アップデートでレスポンシブ機能が追加されました。ですが、残念なことに、（本日2020/02/08時点で）私の環境ではまだできませんでした。Figmaのカンファレンススピーチでのデモも確認したのですが、それを設定するためのメニューと思われるUIが表示されないので、まだ配信されていない感じでした。再起動もしたのですがダメでした。。。

と思いきや・・・

これでできるらしい！気づかんかった

Auto Layout の レスポンシブ対応、画面右上のボタンでよしなにできるっぽい#figma pic.twitter.com/Q4I1XjI2HT

— ふじけん / Cookpad Inc. (@kenshir0f) February 6, 2020

合わせてどうぞ