Blog

WebサイトのデザインはphotoShopを使うことが多いのですが、開発系のデザインでFigmaを使う機会がありました。アプリや管理画面のデザインに本当に便利です。

Version 114.6.1
画面キャプチャが古いものとなっています。Figmaは進化が早いですね。

デザインツールとして、FigmaとphotoShopとの違い

Figmaを触ってみて、最初は、Frame（フレーム）…？オートレイアウト…？何？となっていましたが、だんだん理解してきました。一言で言うと、「キッチリしたデザインが簡単に作れる」ソフトだと思います。

キッチリというのは、余白の統一感を出しやすいとか、コンポーネントの機能が充実してるという意味です。

photoShopはどちらかというと細かいデザインに向いていて、写真加工や細かいレイヤーの調整によって一枚の絵画のようなデザインの作品を作ることができます。

対してFigmaは機能重視で統一感のあるUX/UIデザインがしやすくなっていて、「余白はこれくらい」「使うカラーはこれ」と、ある程度決まっていれば、それを配置しやすい機能（動作の軽さも含め）が備わっています。

FigmaとphotoShopを比べるのも変な感じですが（photoShopの位置にあるのはXDですし）、デザインを作るツールという意味では対極の位置にある…
だからこそ、Figmaのレイアウトに関する機能には最初とまどいましたが、やっていくうちに、Frameの便利さがデザインのしやすさにつながっていることがわかりました。

そしてFrameは（InspectのCodeに出てるけど）Flexboxだ。とわかり、Flexで覚えようと思ったら理解が深まったので記事にすることにしました。

コーディングの知識がない人には逆に分かりにくいと思いますが、CSSがわかる方には是非読んでいただきたい内容です。

ちなみに、要素をまとめるものとしてGroupもありますが、FrameとGroupの違いは、「Frameは大きさや色設定ができる箱であり、Groupは箱じゃない（ただのレイヤー上のグループ）」です。

Frameには２種類ある

オートレイアウトありと、なしの２種類に分けて考えます。画面左のLayersを見ると、同じFrameでもアイコンが２種類あります。

• 縦（または横）に長方形が並んだアイコン…オートレイアウトありのFrame
• シャープみたいなアイコン…オートレイアウトなしのFrame

このうち、オートレイアウトが付いているFrameがFlexboxの役割を果たします。
オートレイアウトの入り切りは、画面右の「Auto layout」の「＋」「-」でできます。

Frameの共通機能

オートレイアウトありなし関係なく、Frameは以下の特徴があります。

1、直下の要素の位置を決める基準になる

• 子要素の「整列」基準
  ※子要素を整列させたいときは、Frameそのものではなく、中身の要素を選択して整列のボタンを推します。
• Frameの大きさが変わった時の子要素の位置の基準
  子要素のConstraintsの基準（後述）

2、「Clip content」をオンにすると、Frameからはみ出た部分は非表示になる

3、子要素同士の間隔を設定できる（「 ]|[ 」みたいなアイコン）

Frame（オートレイアウトあり）

ConstraintsとResize

Frameの中に入っているものは、「Frameの変化によって、こう動いてほしい、こうリサイズしてほしい」という設定ができます。
設定しておくことによって、親に合わせて大きさや位置を自動的に変更してくれます。
ほとんどの要素はなにかしらのFrameの中にありますので、ほぼすべてに「Constraints」と「Resize」の設定パネルがあります。

一言で役割をいうと

• Constraintsは位置を決めます。absoluteでの設定。
• Resizeは、大きさを決めます。決め打ちか、flex-grow:1（親要素や兄弟要素の伸び縮みによって変わる）かなどを選択。

flexboxは親要素にjustify-contentなどを設定することによって、子要素の位置を制御することができます。つまり、親の方から子の位置を決めることになるので、オートレイアウトのFrameの中にはいってるものは、Constrainsの設定はありません。

Constraints（absoluteでの位置決め）

Constraintsパネルで、線をポチッとおすと青くなり、そこが固定されます。

真ん中を選択すると、そのシェイプの真ん中が固定されるので、親要素が大きくなっても中央を維持することができます。
ちなみに余談ですが、ど真ん中をチェックした時のCodeのCSSは下記のようになっています。（中央を維持するために計算を頑張ってる感じがとてもする）

left: calc(50% - 89px/2 - 107px);
top: calc(50% - 63px/2 - 41.5px);

ぱっと見間違いやすいと思うのですが、Constraintsは位置が固定されるだけなので、整列させるものではありません。

親Frameに対して左、中央などに配置させたい場合は、整列ボタンを押してください。

Resize（大きさ決め）

シェイプや画像は、コンテンツの大きさに合わせる「Hug contents」がありません。（コンテンツ幅という概念がないからでしょうか…）

まとめ

これだけわかっただけでも、格段に操作がしやすくなります。一個大きさが変わったらほかのものもずらさないといけないということがなくなり、勝手に余白を保ったまま位置が変わったり、リサイズしてくれるので、コンポーネントを配置していくようなデザインには重宝すると思いました。