見出し画像

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に変換されます)

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

スクリーンショット 2020-02-08 19.57.31

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

画像2

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

画像3

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

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

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

画像4

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

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

画像5

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

画像6

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

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

おまけ

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

画像7

と思いきや・・・

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


合わせてどうぞ


この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

ナイス!
66
大阪弁トランスレーター UI・UX designer。某自動車メーカーでUIデザイナーをしていました。現在はdely株式会社で新規事業のUI/UXデザインを担当しています。
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。