NSBlogger

意識高いブログ

SketchでAuto Layoutを考慮したデザインが作成できるプラグインが便利すぎる

f:id:Kamekiti:20170103162213j:plain

Auto Layout問題

iOSアプリを作成する際、なにかしらの方法でデザインをデザイナーから共有してもらうことがあります。
画像ファイルでもらったり、Sketchファイルでもらったり。
一部ではデザイナーがStoryboardを直接修正することも。

デザイナーとのやりとりで一番ネックとなるのが画面サイズが変わったときのデザインです。
iPhone 7の大きさをベースとしたデザインを1枚いただいたとしても、どこを可変にしてどこを固定にするか曖昧です。別途なにかしらの形で可変な部分や固定する部分を指定してもらってもよいですが、なかなか手間ですよね。
全画面サイズのデザインを作っても良いですが、デザイナーの負担が増すばかり。
これらの問題を解決してくれるのがAuto Layout for Sketchというプラグイン
※ちなみにFluid for Sketchというプラグインもあります。

Auto Layout for Sketch の使い方

1.プラグインのインストール

試しにAuto Layout for Sketchを使ってみました。
上記サイトからプラグインをダウンロードしてSketchにインストール。これで準備完了です。

2.ベースの作成

f:id:Kamekiti:20170103165000j:plain
Artboard」を選んで、右ペインに表示されるデバイスをどれでもよいので選択してスタート。

3.画面デザイン

f:id:Kamekiti:20170103165144j:plain
普通にデザインの作成を行います。iOS 10 GUI (iPhone) | Facebook Designからデザインをパクってきました。

4.制約をつける

f:id:Kamekiti:20170103165249j:plain
注目すべきは右下のこの機能。これこそがAuto Layout for Sketchによる拡張機能です。
Auto Layoutと同様に上下左右のマージンや縦幅・横幅の指定ができますよ。
水平方向、垂直方向のセンタリングも可能です。
Xcodeと違い、制約を付け忘れていても警告やエラーなどは表示されません。

5.Auto Layoutの動作確認

f:id:Kamekiti:20170103171557g:plain
Artboardの大きさを変更すると、デザインが自動的に大きくなったり小さくなったりします。
f:id:Kamekiti:20170103165527j:plain
また、その場で画面を回転させたときのデザインも確認できました。
f:id:Kamekiti:20170103165745j:plain
指定したデバイスに適用したデザインを確認することも可能。iOS以外にもAndroidや独自のレイアウトに適用させることもできます。

6.全画面サイズのデザインを書き出し

f:id:Kamekiti:20170103165900j:plain
Generate Overview」をすると、Auto Layoutに従った全画面サイズのデザインをまとめて書き出すことができますよ。エンジニアがSketchを使用していない場合は、全画面サイズのデザインを書き出して共有するのが良いかと思われます。

もう少し改善してほしい点

Auto Layoutの概念がSketchに適用されるだけでも満足ですが、実際に使ってみていくつか改善してほしいなぁと感じたことがあります。

指定できる値が要素間の値ではない

XcodeのAuto Layoutだと、隣接している要素間のマージンを指定できますが、このプラグインはそうではありません。ベースとなっているArtboardを基準としたサイズの指定になっているように感じました。
したがって、Auto Layoutと同様の感覚で制約をつけることはできません。

フォントサイズを小さくできない

要素の大きさを小さくした場合に、フォントサイズが自動的に小さくなってくれませんminimumFontSizeのような指定ができるとよいのですが。もしかしたら他のSketchプラグインと合わせるとできるのかも。

テキストの行数指定ができない

最大3行などの設定ができないので、そのあたりのデザインを表現するのは厳しそうです。

ある要素をベースとしたサイズ指定ができない

Artboard(全体のベース)に対する比率を設定することはできますが、「要素Aと要素Bの横幅を同じにする」といった、要素同士間の比率設定はできませんでした。

解決策

上記の問題点を解決させるには、「Generate Overview」で全画面サイズのデザインをまとめて書き出した後、それぞれのデザインを個別に修正するしかありません。
理想はAuto Layoutに対応されたSketchファイルを1つ作成して共有することですが、現状は全画面サイズを書き出して利用するほうが良いのかもしれません。
とはいっても、全画面サイズをAuto Layoutにしたがって自動的に書き出せるだけでも価値のあるプラグインだと思います。

おわりに

デザイン作成においてAuto Layoutの表現に困っていた方はぜひ使ってみてください。

Auto Layout for Sketch