Sketch社公式テンプレから学んだことを使ってTwitterトレースを整理してみた。

最近めっきり寒くなりましたね。
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

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

同世代のデザイナーの方ともっとつながりたいです! Twitter、ぜひフォローお願いします!

特技はヲタ芸です。スキありがとうございます!
45

Leo / Basecamp

#デザイン 記事まとめ

デザイン系の記事を収集してまとめるマガジン。ハッシュタグ #デザイン のついた記事などをチェックしています。広告プロモーションがメインのものは、基本的にはNGの方向で運用します。
1つのマガジンに含まれています
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。