よりデザイン

2017年12月14日ツールの話

Sketch公式のUI Kit「Elements」を解剖してみる

この記事はSketch Advent Calendar 2017 14日目の記事です。

 

昨日、唐突にBohemian CodingがリリースしたUI Kit、Elements。

公式のサンプルデータということで、これを紐解くことによりSketchを作っている会社がSketchをどのように使っているのかの一端が見えてくるのではと思い、中身を覗いてみることにしました。

全体像

DLした.sketchファイルを開くとApps Pageに各テーマの画面が並んでいます。

解像度のベースはiPhone Xです。5種類のテーマ x 7画面 = 35画面が並んでおり、ある程度のシチュエーションに耐えられるように作られたことが伺えます。

それでは手始めに最上段の「Food」アプリのレイヤー構造を眺めてみましょう。

きわめてシンプルですね。さすがにレイヤー名もちゃんと付けられています。
よく見るとBackgroundがSymbolになっていますが、これは背景色のSymbolを画面幅いっぱいに伸ばしてレイヤーロックしている状態になっています。常々「背景色はArtboardの設定じゃなくてSymbolで管理したほうがラクだよな〜」派の自分としては「自分たちもやってるんじゃん!」とツッコミしながら握手をしたい気持ちになりました。

自分なんかはすぐSymbol化しちゃうのですが、上記のようにレイヤー構造を保っているコンポーネントも多く見受けられました。このあたりどうルール化して作っているのか気になります。

続いてはSymbolを見ていきます。

Symbol

細かくてみづらいですが、175個のSymbolが格納されています。使われている階層は

  • Bars
    • Details Bar
    • Navigation Bar (Large Title)
    • Navigation Bar
    • Tab Bar
    • Toolbar
  • Colors
  • Controls
    • Button
    • Segmented Control
  • Food
    • Cells
  • Icons
  • Misc.
    • Header
    • Map
  • Music
    • Cells
  • Overrides
    • Card
    • Filter
    • Gradient
    • Guide
    • Header
    • Music Header
    • Navigation Bar
    • Post
    • Segmented Control
    • Stars
  • Photography
  • Social
    • Conversation
    • Stories
  • Travel
  • iPhone

です。Overrides専用に階層が作られているのが新鮮で面白いですね。なるほどそういう分け方があるのかと。
おそらくOverridesに用いる項目が決められていて、それ以外はNested Symbolはしないというルールになっているのかもしれません(それが何故なのかまでは分かりませんが。サンプルだから理解しやすい構造にしている?)。
その他は素直に作られているなという印象です。いつもこれくらいの粒度なのか、サンプル用にあえて変えているのかが気になります。
あと、階層分けに使う「/」って前後にスペースあっても生きるんですね。知りませんでした。

今度はSymbolの作り方に注目してみます。

 

Colors

ColorsはStyleが適用されているRectangleです。そしてColorsのSymbolがあるということは……

 

Icons

アイコン類は全て、ColorsのSymbolをシェイプでMaskしている作り方になっていました。

最近はこの作り方もメジャーになりましたが、Bohemian Codingも使うんですね。全てのアイコンがデフォルトで黒に統一されているのが分かりやすい感じがします。真似しようかな。

 

Blendingを活用した作り方

さてここまでであれば「あーなるほど、まあそういう作り方ですよねー」という感想なのですが、なかなかにトリッキーな仕組みのSymbolがいました。

上の2つ、一見すると普通に作られたコンポーネントに見えますが、レイヤー構造が独特になっています。

例えばこれはTab Barのレイヤーなのですが、最上部にTintというレイヤーが配置されています。でもそんなレイヤーないよな……と思ってSymbolを触ってみると、

なんとColorのSymbolがArtboard全体に拡がっていました。そしてよく見るとBlendingがScreenに。

Normalに戻すとこのとおり。

非表示にするとこのようになりました。

Segmented ControlのColorも非表示にしてみました。つまりは擬似的にiOSのTint Colorを再現しているのでしょう。よく見たらレイヤー名もTintだった。

Sketch上でオブジェクトの色管理をどうするかについては以前から話題に挙げられることも多く、1つの解決策としてColorのSymbolをMaskする手法が使われてきました。今回Bohemian CodingがElementsの中で使っているこの手法も、ひょっとしたら何かしらを解決できるのかもしれません。

まあZeplinで見ると#000000になっちゃうんですけどね(事前にTint Colorを共有しておけば問題はなさそうだけど……)。他にも、背景に違う色があるとBlendingの影響を受けちゃうとか、Tab Barのようにinactiveなものに切り替えようとすると、結局切り替える個数分のTintが必要になっちゃう、とかありそうです。

その他だと、Shadowsの設定が細かくて面白いなーとかありました。

ElementsはSketch初学者もマニアック層も勉強になる

……と、このように、Sketch初学者の方はファイルの構造やSymbolの作り方を学べて、ちょっとディープな層には「Bohemian Codingはこういう思惑で作ってるのか」と感心できる、面白いファイルでした。
業務の隙間で記事を書いたためあまり深いところまでは踏み込めていないので、気になる方はぜひ実際に触ってみてください。

このエントリーをはてなブックマークに追加

似ている話