最近めっきり寒くなりましたね。
Basecampでデザイナー修行中のれおです。

最近、若手デザイナーの間でUIトレースが流行っていると思います。
僕も少し前から始めていたTwitterのトレースをようやく終えました。

トレースをし終えたのはいいのですが、落ち着いて見返してみると、シンボル化やOverrides機能などがうまく使いこなせておらず、レイヤーもぐちゃぐちゃ...。

トレースすることに必死になっていて、UIの構造を整理することができていませんでした。

Sketch社の公式テンプレがすごかった！

そこで、何かを参考にファイルを整理しようと、先日公開されたばかりのSketch社の公式テンプレをダウンロードしてみました。
これは、Sketch社が無料公開しているiOS UIキットで、Sketchの模範的なファイル構成を学ぶことができます。

さっそく、このテンプレを参考に自分のトレースを整理してみたところ、多くの学びがあったので、今回は、その中の幾つかを共有できればなと思います。

色のシンボル化

1つ目は、色のシンボル化です。
今までの僕は、色を変えるときに、1つ1つのパーツの色を手動で変更していたのですが、テンプレでは、色をシンボル化し、それをOverridesで管理することで、色を一括で変えられるようにしていました。

下の画像にある、"Tint"というレイヤーがシンボル化された色です。
パーツごとの形に合わせて、重ねるだけで、一括でカラー変更ができます。

また、Blendingを活用すれば、文字色までも一括で変えることができます。

"Tint"レイヤーのBlendingを「Screen」にし、テキストとの間にBlendingが「Difference」のレイヤー（今回はInvertというレイヤー）を挟むことで、文字色を"Tint"レイヤーの色に変えていました。

文字色の方は、Text Style機能で補える場合がほとんどだと思うので、使う機会は少ないかもしれませんが、デザインによっては、大活躍するテクニックだと思います。

ラインをアートボード外に引いてシンボル化

2つ目は、ラインをアートボード外に引いてシンボル化をする、というテクニックです。

リストなどのデザインでは、ディバイダーとしてのラインは必要不可欠ですが、同じシンボル内にあると、heightが端数になってしまい、リスト内のマージンを調整するのがめんどうですよね。
エンジニアや他のデザイナーの勘違いにもつながってしまいます。

この例では、60pxのリストのはずが、ディバイダーのせいで61pxになってしまっています。

ですが、あえてラインをアートボード外においてシンボル化することで、その問題を解決することができます。

これでシンボル本体とラインが分けられました。

試しに、シンボルを使ってみると、シンボル本体のheightは60pxのままなのに、その下にちょこんとラインがついてきます。

アートボード外のものもまとめてシンボル化できるんですね！
ラインをシンボル本体から切り離すことができるので、様々なところで応用できそうです。

Overrides機能の活用

3つ目はOverrides機能についてです。

僕は、ツイートのパーツををわざわざ個別にシンボル化していたのですが、テンプレでは、Overrides機能をフル活用し、1つのシンボルだけで複数のパターンを作っていました。

ポイントになるのは、Resizingです。

ツイートのパーツはアカウント名やID名などの長さがユーザーごとに違いますが、Resizingでパーツごとの距離関係を示してあげることで、長さが違うテキストにもしっかり対応してくれます。

Sketchは奥が深い

今回紹介したこと以外にも、多くのことをこのテンプレファイルから学びました。

キレイに構造化されたSketchデータを作ることで、急なデザイン変更やチームメンバーの増加にも瞬時に対応できるので、シンボルやファイルの整理を習慣化していきたいです。

ある程度、使えるようになったと思っていたSketchにもまだまだ使いこなせていない機能がある、ということもよくわかったので、自分の手足同然に操ることができるように、日々、Sketchスキルを磨いていきたいと思います。

今回作ってみた　Sketchデータを公開してみますので良かったら参考にしてください
https://www.dropbox.com/s/55v8nip0meeoy5y/Twitter_Home.sketch?dl=0