Sketchで線を描くとX,Y の値が小数点になるのが困る

Q: Sketchで線を引くと、いつも始点と終点のX,Y値が小数点になるのがむかつく。




A:
むかついたんですね。笑。

結論から先に言います。使い分けてください。

  • アイコン作成時に線を描く: VectorでもLineでも扱いやすい方で
  • モバイルアプリのUI部品の区切り線を描く: Shadowか四角形で対応


「Sketchで線を引く」場合、一般的にはVectorShape > Lineを使うと思います。
まずはその2つについて説明します。
最後にUI部品の区切り線について説明します。

アートボードにグリッドを表示させてください。
View > Canvas > Show Pixel Grid



Vectorツールで線を引く場合

Vectorを選択する。



Round: Full Pixelsを選択する



これで、アートボード上の適当な位置をクリックして線を引いても、始点と終点が小数点の値になることはありません。

アイコンを描く場合はいいのですが、モバイルアプリのBar類や、TableViewの区切り線の場合はピクセルの境目にまたいで表示されるVectorだと不向きですね。




Shape > Lineで線を引く




Shape > Lineで線を引くと
X1, Y1, X2, Y2の値が全て小数点ですね。
これがむかついてしまう原因でしょうか?
グリッドには沿っているのですが、モバイルアプリのデザインで、NavigationBarやTableViewの下線がこうなってしまうと扱いづらいってことなのですよね、わかります。



モバイルアプリのUI部品をデザインする場合は、VectorShape > Lineでなく、Shadowか四角形でdividerを作成した方が良いと思います。

Sketchにはじめから入っているiOSのテンプレートを見てみるとよくわかります。

NavigationBarの下線のように端から端まで線を表示したい場合はShadow、



TableViewのように余白のあるものは四角形で。



ZeplinにImportしても、Shadowのカラーコードをエンジニアに伝えることができますね。





コメント