Figma姉さんの7つの小言｜よいデータ作りの知恵袋

スマートキャンプデザインブログ、プロダクトデザイナーのdreamです。
好きなデザインツールは「Figma」です。

3年前にデザイナーへの転向を決めてから今日まで頑張れているのも、ジョブチェンジと同時に使い始めたFigmaに助けられた側面が大いにあります。

デザインツールとしてのシェアが広がり、Figma人口が増えていることは本当に嬉しいことです。私も人のFigmaデータを見せてもらったり、使い方を教えたりする機会が増え、Figmaの浸透を感じている日々です。

今回はFigmaが浸透していく世を見据え、Figmaを抱いて心中するつもりのFigma姉さんとして、デザインデータ作りについて言い残したいことをまとめます。

※
くだけた表現や、個人的なやり方に偏る部分がありますが、
Figma好きで楽しむあるある記事だと思ってご容赦ください。

1. line-heightをpxで指定しないで

頻出すぎる「line-height問題」。固定値で設定してしまうと、文字サイズを大きくしたときに「こ、困りますお客様ぁ〜〜〜〜ｯｯ泣」となってしまうので、line-heightは%指定で...何卒よろしくお願いします....。

文字を大きくしても一定の行間が保たれる方が、絶対に便利.....！！！！！

2. 使った色は最後に登録カラーに置き換えて

色をつけるとき、ついついスポイトで吸いがち。スポイトってまじ便利ですよね。一通りの作業が終わったら、作業範囲を選択して右のSelection Colorsをチェック。

登録カラーと重複する色があったら、登録されているカラーに置き換えておきましょう。どんなに色数があっても、意外と5分程度で終わる作業です。

毎回の作業後にできなくても、思い出したときにやっておくと、カラーパレットの変更が即反映されて「やっておいてよかった...」と感じるはず。

3. 小数点を撲滅しようよ

Figmaに限ったことではないけど、コーディング前提のデータからは小数点を撲滅したい....！

特に拡大縮小したテキストボックスや画像には要注意です。画像のwidthやheightは切りの良い数字に直し、テキストボックスは中要素に依存させるかガイドに沿った大きさに直しておきましょう。

大事なことは小数点が悪なのではなく、意図しない不思議な数値を残したままにしないことです。実装者が迷わなくて良いデータ作りを心がけたいですね...！

4.画像の切り取りは、マスクよりクロップの方がよくない？

これは派閥が分かれるだろうか....。画像を円形や四角形に切り取る場合は、マスク機能を使う必要はない、と思う派です。クロップを使いましょう。

マスクのメリットといえば、切り取り前の画像を保持できることですが、クロップでもいつでも切り取り範囲を変更できます。

見た目は同じ

クロップでも元画像は保持される

マスクではダメなのか？といえばそうではありませんが、マスク用のレイヤーが1つ増えれば、画像レイヤーとマスクレイヤーを同時に掴んで作業する手間も増えてしまいます。他作業者のことを考えると簡潔なレイヤー構造の方が喜ばれるはずです。

5. 写真の調整レイヤーはFillでかけたいナ

乗算やスクリーンなどの調整レイヤーで写真全面に加工を施すなら、レイヤー代わりの図形を描画せず、Fillを追加するほうがレイヤーがスッキリしておすすめ。

調整レイヤー代わりの図形を足してしまうと、書き出し時にレイヤーの選択ミスが起こりやすくなり、デザインが想定通りに書き出されない事故につながります。

6. 変な形のテキストボックスを排除したい

3. の小数点と近い問題だけど、もう一度書きたい....。
変な形のテキストボックスとは、これ......！！！！！↓↓↓↓↓↓↓↓↓

歪なテキストボックスが存在すると、テキスト周辺の余白を正しく測れなくなり、実装する人も共同デザイン者にも辛い未来が待っています。
（正しい余白を測れるように実装者が頑張るか、デザインデータを整理し直す必要がある）

これが起こるほとんどの原因は、他オブジェクトと一緒に行う拡大縮小が原因です。拡大縮小してもフォントサイズは変わりませんが、テキストボックスが変形してしまいます。テキストボックスを選択して拡大縮小をするのはやめた方が良いです。

7. Auto Layoutは難しくない！使わないと損！

Auto Layoutは初期のFigmaにはなかった機能です。デザインにpaddingの概念を取り込めます。実装された時は歓喜しました。

paddingとは...
コーディングに用いられるCSSプロパティのひとつで、オブジェクトの内側、上下左右に余白を持たせることができる。
paddingの余白は要素内に含まれるので塗りつぶしや枠線などのスタイルを付与できる。

Auto layoutは、余白を与えたいオブジェクトを選択してShift+Aを押すだけで設定できます。

Auto Layoutで上下20px、左右100pxのpaddingを設定したボタン

Auto Layoutを一言で言い得るのは難しいのですが、
・スマートに余白をコントロールできる
・CSSのpaddingやflexでできることが、デザインデータ上でできる
・登録フォームなど、同じコンポーネントを繰り返すデザインを楽に作れる
どれかにピンと来てもらえたら、使う価値ありです。

ボタンや要素の整列など、活用シーンは様々です。使い方を覚えるだけで、不要なレイヤーを減らし、要素の配置をコントロールできますので、チュートリアルなどを活用してぜひ使ってみてください。

コラボレーションしやすいデザインデータを

Figmaは、使いやすいUIや優れた拡張機能など、取り柄の多いツールですが、一番の特長は「コラボレーションのしやすさ」にあると感じています。

デザイナーとエンジニア、デザイナーと営業、デザイナー同士…など、多様な職種の人がFigmaでコラボレーションできるのはとても素晴らしいことです。

同時にFigmaで作成されるデザインデータが、多くの人にとって理解しやすく触りやすいものであるように配慮することも重要だと感じています。

この記事を読んでくださった方のFigma時間が、充実したものになりますように！さて！執筆後もFigmaでデザインしてきます！！！！！

WRITER：Yume Takamatsu ( Product Designer / TW: @dream_yt95 )