sketchのコンポーネント機能紹介

Sketch概要

2010年にリリースされたUIツール。
adobe fireworksが開発終了した煽りで一気に人気になりましたが、最近日本ではXDに押されがちな印象です。しかしUIの分かりやすさやシンボル周りの思想は秀逸であり、apple design awardは伊達ではありません。
開発元はボヘミアンコーディング。macOSのみ対応。
ライセンスはその年のアップデート権を買い、ライセンス購入をやめるとそのバージョンが半永久的に使える方式です。
2020/3現在バージョン63。10年の積み重ねを感じますね。ちなみにXDは24だった気がする。
https://www.sketch.com/

強み・特徴

複雑さに対しての耐性が高い
カスタマイズ性の高さ
抽象的ですが、この2点に尽きます。
オブジェクト指向のクラスに近いコンポーネント機能と豊富なプラグインはとっつきにくいかもしれませんが、地盤を整理し続ければ他のデザインツール以上につかいやすいものになります。

早く木を切りたいなら斧を研ぐべきだとよく言いますが、sketchほど研げば研ぐほど早く木を切らせてくれるものはないと思っています。

逆に研ぐまでもない小枝を切るのにsketchはオーバースペックです。

弱み

プロトタイピング機能やアニメーション機能は最低限しかありません
プラグイン等はチーム内で揃えないとあり得ないバグが起きる場合があります

機能紹介

コンポーネント機能

sketchのコンポーネント機能はシンボルと呼ばれています。
このシンボル機能は非常に柔軟性が高いため使いやすくも使いにくくも出来る諸刃の剣です。
今回は使いにくくならないように僕が気をつけているやり方を実際に物を作りながら紹介します。

今回はボタンを作ってみます。

作ってみました。 データは以下です。

これを右クリックでシンボル化します。名前は/で区切ることでまとめられます。 No Layoutと書かれているところはそのオブジェクトが小さくなったり大きくなったりした時の振る舞いを規程します。

今回は文字が真ん中寄せなのでhorizontallyを選びました。なんだか難しそうな名前ですが、horizon単体だと地平線という意味になります。読みはホライゾンだと信じています。こう聞くと覚えやすいですね。

シンボルを作るとこういうのが出てきます。
シンボル自体はオブジェクト指向のクラスに近い存在です。なので値の切り替えも可能だし、違うクラスを噛ませることも出来ます。
なので下には文字データ書き換えのテキストボックスが出てますね。

クライアントの気が変わってログイン以外の文言が良いと言われたとしましょう。
そんなコロコロ文言変えられていてはログインの四文字をデフォ文言にするのは怖いのでマスターデータを書き換えます。
右端のウィンドウからEdit Masterを選択し、シンボルページへ飛びます。
上の画像だと上から二番目の項目のDetachの横です。
飛ぶとこうなります。
文字をダブルクリックして最大文字数量のダミーで埋め尽くしましょう。

文字ウィンドウの揃えを真ん中にするのを忘れず…。

こんなもんでしょう。

ついでに色が変更になった時に備えて色もシンボル化しておきます。
500x500の四角を用意します。シンボル化します。色は今のところ何色でもいいです。
名前はcolor/redで

そしてこれを元々のボタンの四角にマスクします。
マスクは画面真ん中上。

出来たら隣くらいにあるcolor/redシンボルを赤色にしましょう。

せっかくなんで何パターンか作ります。 ⌘＋Dで複製し、アートボードをクリックして⌘Rで名前を変更していきましょう。

色々作ってみました。 本当は使う色しか作らなくていいです。 では左のレイヤーパネルからpage1に飛びましょう。 ちなみに、そこを見たら自分がシンボルページにいることが分かるとおもいます。

はい、戻ってきました。

まずはダミー文言を「メンバーになる」とかにしましょう。
先ほど説明したテキストホルダーに文言を入れます。
真ん中揃えにしていたら良い感じになると思います。変な感じになったらそれはデフォの左揃えです。

ついでに色も変えましょう。
シンボルは入れ子構造が可能なので色をシンボル登録するとこういうことが出来るのです。
下のcolor/redをクリックして違う色を指定します。

緑にしてみました。

増やしてみました。

緑が気に食わない色をしていたので違う緑にします。 シンボルページに飛んで緑を変更します。
これを

こう

いいですね。夜道を歩いても轢かれなそうな色になりました。素材はゴアテックスでしょうか？
では色を変更して満足したので元のページに戻ります。

なんてこった！ここは自治体管理の古いwebか！？ボタンは夜道を歩かないからこんな色にしなくていいんだよ！！！誰がこんなことをしたんだ！！！

はい、僕です。
当たり前ですがシンボルを編集すると全てにそれが適応されます。
変更に強いと言われるのはこれが由縁ですね。
ボタンのテキストもスタイルを変えると全部変わります。
これを活用すると一度作ったものはもう二度と作らなくていいのです。嬉しいですね。

嬉しいついでにボタンをもっと増やしたいと思います。

左端のウィンドウは実は状態を二つ持っていて、現在はレイヤーウィンドウですが、その隣にCOMPONENTSというボタンがありますね。
その文字をクリックするとシンボルを呼び出す状態に変化するのです。

このように名前のネストに合わせてグルーピングされています。
無意味に思えた/の区切りは実はこうやってシンボルが氾濫しないためにあるのでした。
色はいらないので隠してしまいましょう。
矢印をクリックすると仕舞えます。

そしてその上のボタンのloginを好きな場所にドラッグ＆ドロップしてみましょう。
空のボタンインスタンスが登場しました。

これをまたボタンぽちぽちでお好みに作り変えて、というのを繰り返しデザインデータを作っていきます。

このように、シンボルの入れ子構造と名前の/区切りでシンボルは氾濫せず最小限の手数で変更に強いデザインデータを作れます。
また、sketchのシンボル機能はオブジェクト指向のクラスに近いと書きましたが命名規則と作り方ではOOUIベースのデザインを作成するのに最適なツールとなりますのでそれはまた今度紹介します。