このところバージョンアップの発表がなかったSketchが、まさかのプロトタイピング機能を突然リリースしました。

Sketch

Prototyping, Libraries on Sketch Cloud and an official iOS UI kit in Sketch 49

https://blog.sketchapp.com/prototyping-libraries-on-sketch-cloud-and-an-official-ios-ui-kit-in-sketch-49-bf090c70796c

The latest update introduces Prototyping, the ability to subscribe to Shared Libraries in Sketch, and a built-in Apple UI Design Resource.

β公開なしでいきなり発表…？！

これまでSketchは新機能についてはβ版でリリースを行い、一部のユーザーに使ってもらってから正式リリースするというのが定番でした。

しかし今回はあまりに突然の発表…。何の前触れもなくバージョン49の新機能として組み込まれていました。

今回のバージョンアップに合わせて、Sketchのランディングページもリニューアル。プロトタイピング機能を動画で説明する内容になっています。

気になるその機能は…？

SketchをバージョンアップしたらFile→New from Template→Prototyping Tutorialを開いてみましょう。

ページ遷移が行われる箇所にはオレンジ色の矢印の曲線が描画されています。

Link・Previewが追加されています。Sketch Cloudについても変化が。

プロトタイピング機能の使い方

まずはリンクエリアにしたいレイヤーを選択します

続いてリンクボタンをクリック

矢印が出現するので、飛びたい先の画面を選んでクリックします

アニメーションの種類を選択することもできます

また前の画面に戻る、新しいタブを開くなどのアクションも行うことができます。
プレビューボタンを押すと、実際に動くプロトタイプが表示されます。

すごい…動くぞ、Sketchで画面遷移ができる！！

さっそく試してみた。何が素敵かって、コレSymbolに遷移先の設定できるんですよ。つまりこのGIFだと、ヘッダのロゴに「ホーム画面に戻る」遷移をつけてるんだけど、全部のInstanceに設定が反映されてる。よすぎる。 pic.twitter.com/s4GLhdm2rS

— Ryo.Yos (@ryo_pan) 2018年2月28日

Adobe XD・InVision Studio・Figma…あなたはどれを使う？

実は昨日、Figmaもプロトタイピング機能を発表したばかりだったんですよね。

Figma Design

Figma prototyping: now with transitions – Figma Design

https://blog.figma.com/figma-prototyping-now-with-transitions-197f817ae7a8

Design involves far more than just the designer these days. Engineers, marketers, project managers, and other stakeholders collaborate…

そして皆さんお待ちかねのInVision Studioはまだ来ない！てっきりInVisionがSketch買収しちゃったのかと思ってたら、そうではなかったようです。

さてさて、UIデザインツールの大定番であるSketch、ここからAdobe・InVision・Figmaとはしのぎを削って戦わなければなりません。特にSketchはMac版しかないので、そこは不利。今後どのような展開をしていくのでしょう？

その他のアップデートも良さげ！

・ライブラリ機能がSketch Cloudでも使えるようになった
・Apple iOS UIキット
・その他バグフィックス
なども注目の内容になっております。

Sketch

Prototyping, Libraries on Sketch Cloud and an official iOS UI kit in Sketch 49

https://blog.sketchapp.com/prototyping-libraries-on-sketch-cloud-and-an-official-ios-ui-kit-in-sketch-49-bf090c70796c

The latest update introduces Prototyping, the ability to subscribe to Shared Libraries in Sketch, and a built-in Apple UI Design Resource.

そういえばデザイン記事の共有ができるサービスをリリースしました。

ついでに書くのですが、siori.designというサービスを先日リリースしました。これについては開発秘話的なことをまた書きたいと思います。

siori.design

siori.design

https://siori.design

siori.designは、デザインに関するWebページを、かんたんに保存・共有できるサービスです

書き手：小島 芳樹 Webやスマートフォンアプリによるサービスを開発・提供する会社で働いています。 Twitter： @yoshikikoji