背景
自分はiOSのエンジニアである。
UI周りの実装を行うときには、デザイナーからデザインデータをもらい、デザインツールでMarginやFontなどを確認しながらデザイン通りに実装を行う。実装が終わったら自分で再度デザインが間違っていないかを確認して、最後にデザイナーに確認してもらう。
しかし、デザイナーの確認のときに高い確率で「元のデザインとここが違うよ〜」ってデザイナーから指摘を受けて修正を行うことが多い。
例えば、「LabelのTextのlign-heightが違う」や「アイコンのbaseLineが少しずれている」などである。デザインデータは細かく見ているつもりだが、見落としてしまうことがある。。。
何度もデザイン確認を行っていたら、実装とデザイナーの時間が勿体ない。
書くこと
エンジニアがデザインを正確に確認する方法について
方法
デザインデータと実装したスクリーンショットを合わせて、違いがないかを確認する!!
例
赤色の枠のCellを実装する。（元データ - figmaresources）
① まずはデザインデータを参考に実装
実装!💪💪💪
デザインツールにcssやnativeのコードが表示されるので、参考に実装。
② 実装したら、スクリーンショットを取る
完璧っぽい。。。
③ 実際に重ねてみる！！
デザインデータの上にスクリーンショットを置いて、スクリーンショットのalphaを100から0に徐々に変化させている。
この段階で、デザイナーに確認してもらわなくても実装がデザインと違うことが一目瞭然!!
実際に実装を間違えている箇所
大体、ずれている箇所のデザインデータを見れば間違いがすぐにわかるはず。。。
わからなければ、デザイナーに相談しましょう。優しく教えてくれます。
Tips
- デザインデータを違うworkspaceにコピーして行う。（エンジニアはデザインデータへのWrite権限は基本ないと思うので、別のworkspaceにデザインデータをコピーしないと、スクリーンショットと重ねることはできないと思います。）
- スクリーンショットを貼ったら、スクリーンショットのwidthをデザインデータのwidhtni揃える。（デザインデータのwidhtは一律決まっていると思うので、すぐにその値へ！）
- 画像やボタンなどwidhtとheightが決まっているものを目安に合わせると、合わせやすい。
- alphaを徐々に変化させていくと、違いに気付きやすい。
- Labelの確認時にデザインデータとスクリーンショットで文言が違うときは、デザインデータの文言をスクリーンショットの文言に変更する。
感想
この方法に変えたら、デザインの実装ミスが一気になくなりました。あと、ばっちりデザインが合ったときは、すごい気持ちが良いです！笑
たまにデザインデータのミス（Fontが違うなど）に、エンジニアが気づくことがあります。
一番よかったのは、デザイナーとの確認のときにデザインデータとの違いについて話すのではなく、実際のシステムに実際のデータをデザインに適応したときにデザインが問題ないかについて話し合うようになり、より良いUIを作れるようになりました！！