読者です 読者をやめる 読者になる 読者になる

よりぶろ

アプリのUIとかについて書いてく予定

Sketch v44 betaで新しくなったResizingを試してみる

f:id:ryo_pan:20170508131224p:plain

思ったよりも早くSketchのv44 betaが公開されました。

Sketch - Beta

主なアップデート内容はResizingの刷新です。設定方法などに若干の癖があるので、自分の勉強も兼ねてメモとして書き残しておきます。
なお、β版で作成・編集したファイルは現バージョンでは開けなくなりますのでご注意ください。

 

Resizingとは

まず始めに、改めてResizingについておさらい。
Resizingは、v39で追加された「グループもしくはシンボル内のレイヤーに対し、親がリサイズされた時の挙動を設定できる」機能です。
もう少し具体的に書くと、例えばグループレイヤー内のあるオブジェクトにResizingの設定を付与することで

  • 親のリサイズされた割合と同じリサイズが掛かるStretch
  • サイズはそのまま、近い辺(上下左右)に位置固定されるPin to corner
  • 親とのマージンを保ったままリサイズされるResize object
  • サイズはそのまま、位置の比率が変動するFloat in place

といった効果を得られます。
これまでは、以上の4つの種類を切り替えることでResizingを使い分けていました。

f:id:ryo_pan:20170508133350p:plain

↑ v43のResizing

 

v44のResizingの変更点

ではv44ではどのように変わったのでしょうか。下記が新しいResizingのUIです。

f:id:ryo_pan:20170508150820p:plain

ひと目見ただけで一新されたことがわかりますね。上記設定からできるのは、

  • 子(選択しているレイヤー)の上下左右どの辺を固定するかどうか(以下、ピンを置く、と呼称)
  • 子のWidth / Heightを保持するかどうか

の2つです。これまでリストで選んでいたものに比べると、少し複雑化したようにも思えますが、使ってみるとこちらのほうが(やや)直感的であることがわかります。
※……やや、と書いたのはまだ自分自身慣れてないため

それでは新しいResizingの挙動を見ていきましょう。まずは何も設定していない状態の動きです。なお、サンプルのルールとして「RectangleとOvalをグループ化し、OvalにResizingの設定をする」ものとしています。

20170508152935

グループ全体が伸び縮みしている、一般的な挙動ですね。次に「右と上にピンを置いた状態」にしてみました。

20170508200310

わかりやすいように上下左右のスペースを可視化しています。グループレイヤーをリサイズしても、Ovalの右と上のスペースに変化がないのが分かると思います。Width・Heightも固定していないので、option + ドラッグの時だけ、比率を保っていますね。
さて、ここまで書いて気付いた方もいらっしゃると思いますが、親に対してのマージンが保っている状態というのは、旧バージョンの「Resize object」と同じなのですね。
そう、新しいResizingは、設定するパターンによって従来4種類だったResizingを使い分ける仕様になっているのです。
というわけで、4種類のパターンを再現してみました。

20170508153629

左から

  • Stretch:指定なし
  • Float in place:子レイヤーのサイズは固定だがピン位置は変動……しかし中心に置いてしまったので動いていない😇
  • Resize object:子レイヤーのピン位置(上図では左右)は固定だがサイズは変動
  • Pin to corner:子レイヤーのサイズ、ピン位置ともに固定

です。
「Fix Width」と「Fix Height」は、それぞれチェックを入れると、Heightは左右どちらかのみ、Heightは上下どちらかのみのピンだけ置けるようになります。逆に言うと、左右にピンを置いている状態ではFix Widthにチェックは入れられません。

最初は戸惑うかもしれませんが
「グループレイヤーをリサイズした時に子レイヤーの位置は上下左右どこが固定 or 変動するか」
「その時、子レイヤーのWidthもしくはHeightは固定 or 変動か」
で考えると、スムーズに設定できるようになると思います。

 

新しくなったアートボードの設定と組み合わせる

さて、実は新しくなったのはResizingだけではありません。アートボードにも新しい変更が加えられています。

  • アートボードの縦横比切り替え
  • アートボードのサイズ切り替え
  • 内包レイヤーをアートボードのリサイズに対応させるかどうかのチェックボックス

の3つです(ちなみに、アートボード作成時のUIもちょこっと変わりました)。 

20170508210655

20170508210921

先ほどのグループレイヤーを、今度はOvalのResizingを解除し、グループに対し同じResizingを設定してみました。

20170508201339

上図のように、アートボードのリサイズに応じて変化しているのがわかります。

アートボードと連動するResizingによって何が起こるかと言うと、グループレイヤー内のResizing・アートボードに対するResizingを掛け合わせることで「アートボードのリサイズに耐え、且つ位置固定のできるコンポーネント」が作れるようになりました。ざっくり↓のイメージ。

20170508211040

この動き、どこかで見たことありませんか?そう、Animaが開発しているAuto Layoutプラグインの挙動とそっくりなのです。

animaapp.github.io

って、最近Launchpadという機能が追加されて、どうやらプラグイン名もそっちに変わったぽいですが。まあとにかく、全ての機能をカバーできているわけではありませんが、これまでプラグインに頼っていたことがSketch単体でできるようになったことは喜ばしいことだと言えます。

 

最後に

というわけで、新しいResizingについての覚え書きでした。ちなみに、旧Resizingを設定している場合、44 betaで開いてもパラメータは引き継がれていました。安心ですね。

さらに余談。先日校了したSketch本ですが、もちろんこのResizingについては未対応です!涙 このあたりソフト系書籍のつらいところですね。。
どうにかしてケアしたのですが、現状あまり良い手段が思いつかないため、いつもよりブログの文章を執筆寄りにしてみました。ひょっとしたらこの記事を使うかもしれません。。

UIデザイナーのための Sketch入門&実践ガイド

UIデザイナーのための Sketch入門&実践ガイド

 

ですが、それを差し引いてもいい感じに書けたと思っているので、ぜひぜひお手にとって頂けますと幸いです…!🙇