こんにちは、山田です。
最近ワイヤーフレームをつくる機会があったので、普段ならGoogleスライドを使用するところ「figma」というツールを使用してみました。
使いこなせたかというと…
まったくもって使いこなせず、その場しのぎの技を使用しまくり、
「とりあえず最後PDFにするからまあいいか」という仕上がりでした。
なので今回は、ちょっとずつfigmaを勉強していこう！ということで、一番よく分からなかった概念「Group」「Frame」「Section」の違いを備忘録として残しておきます。
Groupについて
これは一番わかりやすい。イラレと近い感覚。
レイヤーの構造整理にもなる。
できること
①子要素のプロパティ一括変更（まとめて編集できるよ）
②子要素への間接的なデザイン適用（一気に影つけたりできるよ）
Frameについて
私がもともと知っていたfigmaの機能で、これを使いこなしたかった。
ただ今回使いこなせなかった。
これそのものにデザインのプロパティ情報を持つ。
できること
①子要素はConstraintsというプロパティ情報を持っていて、
親のサイズが変わったりしたときにどう振舞うかを指定できる
②Auto Layout!
Frameの固有プロパティであるこれを指定することでレイアウトを指定できる
ポイントは「レイアウトの指定」。
UI要素が強い。
Sectionについて
キャンバス内の情報を整理して、管理しやすくするもの。
プロパティとかの情報は持っていない。
htmlのsectionとわりと近い感じなのだろうか。。
できること
①GroupやFrameの親になる
反対に、この二つの中にSectionは作ることができない
②うっすらグレー文字で出る
「このうっすらグレー文字なんだろう？」と思ってたの、これだったのか…
まとめたことで結構勉強になりました(´ω`)
いつかリベンジしたいものです。
