SketchのSmart Layout活用術その1 - パンくずリスト

Q:
以前（Sketchのver. 58以前）、SketchのResizingを使って文字数が変わっても追従してくれるパンくずリストのコンポーネントを作っていましたが、ver.58で"Smart Layout"の機能が追加されてからそのコンポーネントが壊れてしまいました。
もうあの便利なパンくずリストは作れなくなったのでしょうか？


A:
今までできていた便利な機能がバージョンアップで使えなくなるというのは考えにくいです。
Smart Layoutの機能が追加されたので、それを使いこなしましょう！

Sketch ver.58までの使い方

ver.58 までは図のようなパンくずリストのSymbolを作成し、Resizingの設定とテキストの幅を"Auto"にしておくことによって、ページによって文字数が変わっても要素が追従して右にずれてくれていました。




Sketchのアートボード上に配置されたパンくずリストのSymbol

テキストのAlignmentを"Auto" に設定しておけば...





文字数が変わると、矢印マークの余白を維持したまま右にずれてくれていました。




ところがver.58でSmary Layoutの機能が追加された途端、「パンくずリストが壊れてしまいました！」という相談がいくつも寄せられました。




文字数に合わせて次の要素が右にずれなくなってしまいました。

ver.58からはSmart Layoutを使おう！

あの便利な機能がなくなってしまった。。。と、ガッカリしなくていいんです。



Create new Symbolの設定をここでは右方向に伸びて欲しいので、"Left to Right Layout"を選んだ上でSymbolの作成をしてください。
たったこれだけです！以前よりも簡単になりましたね！！




"Overrides"のテキストフィールド内のテキストを入力しなおせば、その右側の要素は余白を維持したまま右にずれてくれます。


ついうっかり"No Layout"のままCreateボタンを押してしまっても大丈夫です。

Symbolページのインスペクタにある"LAYOUT"の欄で"Horizontal", "Left to Right" を選び直せば設定を変更できます。


是非やってみてください。