クライアントサイドのエンジニアはデザイナーからデザインファイルを受け取って実際に組み込み作業をするが、受け取ったデザインファイルの作業方法がデザイナー毎に異なっていたり、組み込みが難しいデザインになっていたりするので、デザインファイルをチェックするための作業ガイドラインが必要だと思ったのでメモとして残す。(Sketch.app 前提)
デザインファイルを一つにする
Photoshop や Illustrator はファイルサイズが大きい傾向があり、画面ごとにファイルを分ける必要がある。
Sketch.app は比較的小さいサイズになるので、基本一つのファイルで作業する。
それでも、ファイルサイズが大きくなってきたら、PC と モバイル、iOS と Android 等の大きな単位から分割していく。
参考:
現在僕のいるプロジェクトでは以下のように分割しています。
- android.sketch
- ios.sketch
- pc.sketch
- sp.sketch
Page、Artboard、Shape、Text 等に命名する
Sketch.app で Page や Artboard 等を作成すると Page 1 や Artboard 1 等のように連番で自動的に名前が付けられる。
これだと組み込み作業をするときに名前から推測して探すことが難しいので全てのものに名前をつける。
Artboard 内には様々な Shape や Text などが作成されるので、コンポーネント毎に命名したり、ツリー構造にしたり、必要であればシンボル化したりして、対象のものを探しやすくする。
参考:
各 Page には複数の Artboard が作られるので、Page はグループ化されたページ郡の名前をつける(ログイン済みのユーザーに表示するページ、決済フロー関連のページ等)。また、Artboard にはページ名やURLのパス等を割り当てる。
x、y、width、height、font-size 等の値は整数にする
対象物をドラッグで移動させたり、サイズ変更するとサイズや位置が小数点が含まれてしまい、組み込みするまえに確認作業が発生する。
整数になっているかチェックするのを習慣にしたり、最終的なサイズ調整や位置調整は直接値を入力すると整数になる。
スペースも含めたデザインにする
アイコンのみのボタンをデザイン上で表現するときにアイコンだけ作成すると、アイコン周辺のスペースがわからないので、アイコンの後ろに透明の Shape を作成してタップエリアもわかるようにする。
良い例:
良くない例:
版管理する (可能ならば)
Git管理して必要なくなった Shape や Text 等は削除する。バイナリファイルは差分見れないのでコミットメッセージは丁寧に記述する。(作業内容を全部記述しないと後で探すことが不可能)
コミットメッセージの書き方
デザイナーの方に説明用に渡したキャプチャーです。
デザインファイルは差分を見るのが難しいので、コミットメッセージを丁寧に記載してもらっています。
README.md を作成して作業内容を記述する
Sketch Plugin を使ったり、命名規則等、違うデザイナーに引き継ぐ際に必要な情報は README.md を作成して記述する。