Help us understand the problem. What is going on with this article?

Auto Layout for Sketchで複数の画面サイズのデザインを効率化しよう

More than 3 years have passed since last update.

テクニカルクリエイター.comで掲載している内容ですが、Qiitaぽいなーと思ってこちらにも書いてみました。

1-HemKn1OC2bh7tUpK7_p0Ng.png

Sketchで作ったデザインをObjective-CやSwiftで書き出すツール「Sketch to Code」を開発中のAnimaから、Sketch用プラグインの「Auto Layout for Sketch」がリリースされました。
Auto Layout for Sketch

Animaって何?という方はこちら!
これまで書いたAnima関連の記事

使い方

インストール


まずはこちらのページからプラグインをダウンロードします。
ダウンロードしたSketchプラグインのファイルを開くと自動的にインストールされます。
※Sketch to Codeのβ版をインストールしている場合、Sketch to CodeにAuto Layoutが上書きされてしまいます。Sketch to Code β版にはAuto Layout機能が含まれているのでインストールの必要はありません。

デザインを作成する


試しにiPhone7サイズのアートボードの中央に丸いシェイプを置いてみました。

レイアウトを設定する


作成した丸いシェイプを選択して、右のインスペクタに表示されたAuto Layoutの中にあるPinというところから2つのアイコンをクリックして下の図のような状態にします。

画面サイズを変更する

レイアウトが設定できたら、試しに画面サイズを変更してみます。アートボードを選択して、Auto Layout内にあるデバイス選択のアイコンをクリックすると、選択肢が表示されます。

アートボードをコピーして、端末別に並べてみました。

さきほど設定したようにど真ん中に丸いシェイプが来ています。

より細かい設定も


Xcode上のAuto Layoutのように右端から何%の位置にするとか、シェイプのサイズを相対値で指定するなど細かい設定をすることもできます。

複数の画面サイズを意識したデザインにAuto Layoutは必須

iPhoneアプリをデザインする際、昔はデバイスのサイズに違いがなかったため統一したレイアウトで行われることが多かったですが、最近はiPhone7サイズ・SEサイズ・4サイズ・iPad…など複数の画面サイズを意識しなければなりません。さらにAndroid端末やPCでの利用なども考慮すると画面の種類はさらに膨らみます。こういったデザインをする際にAuto Layout for Sketchは大いに活躍してくれそうです。

そして本命のSketch to Codeも日々開発が進んでいる様子です。Sketch+Animaでコーディングいらずのアプリ開発が可能になるのか…?今後がさらに楽しみです!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away