Sketch
Pocket

最近Sketchに入門しました。

Sketch便利でよいですね。特に、みんながよく言ってるように、シンボルのオーバーライドは感動です。

もともとはこの業界に入る前に勉強でPhotoshopを使った程度で、その後はコードを書く人になったのでまともにデザインツールを触ってなかったせいもありますが、ここまでデザインツールは進化してるのかと驚きました。

Sketchを使っていて一つ疑問が。シンボルのオーバーライドすごく便利ですが、アイコンの色変更ってどうしてるの?ってことです。

例えば、こんな感じのカードがあって、右下のハートマークがクリックによって色が変わるようなものをデザインしていた場合。

icon-color-symbol1

やっていた方法

真っ先に思いつく方法だと思いますが、アイコンを色パターンごとにシンボル化しておく方法です。

icon-color-symbol2

こうしておくとオーバーライドで、アイコンの色を変更できます。

icon-color-symbol3

この方法でもいいと思いますが、面倒な時があると思いました。

  • アイコンが増えるたびに必要な色のシンボルを増やしていく必要があったり(今回2色だからいいけど何パターンかある場合、面倒…)
  • 色の調整が入った時、アイコンそれぞれに設定してる色を変更する必要がある

アイコンの増減や色の変更時に面倒なことがあるなと思っていました。

教えてもらった方法

元ツイートの動画を見れば分かりますが、アイコンとは別に色シンボルを作っておいて、アイコンにマスクをかけておく方法です。

色とシンボルを別々に管理できるので、シンボルの変更はシンボルをいじるだけ、色の調整があれば色シンボルを調整するという感じになります。

オーバーライドが深くなっていって、管理が難しくなる問題もあるそうですが、一度作っておけば使い回ししやすそうなので便利かなと思います。

最終的にこちらの動画が分かりやすいと教えてもらいました。

やってみた

こんな感じで、アイコンとは別に色をシンボル化しておきます。

icon-color-symbol4

そしてアイコンのシンボル内で、アイコンの上に重ねます。

icon-color-symbol5

アイコンを選択して、右上の「Mask」をクリック

icon-color-symbol6

するとこんな感じに

icon-color-symbol7

あとは、使う時にオーバーライドで色を選択すれば、簡単に色を切り替えられます。

icon-color-symbol8

アイコンをシンボル化する時に一手間加えるだけで、後々のオーバーライドでの変更がすごく楽になりました。

引き続き、Sketchを使って勉強になったことをまとめていこうと思います。

Pocket