Sketch49でPrototypingが出来る用になったので早速試してみましたYO!!


ホットドッグちゃん🌭
フロントエンドエンジニアのホットドッグちゃんです。
DesignツールをSketchに変えました。
そんな中突然こんなビッグニュースが届きました!!

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

ホットドッグちゃん🌭
おっ まさか? ほぼsketchで完結出来きちゃうの?
しかも Easy to use!なの??

ホットドッグちゃん🌭
何はともあれ「ドキュメント読め!」ですよね!
早速、リリースノートを要約してみます。

Sketch49が登場し、エキサイティングな機能がいろいろ追加されたよ!!
だから!私達はとても興奮しています。
静的なデザインだと、それがどうワークするか、正しくワークするのかわかりません。
それだと本当のデザインではないよね。
全体の流れを見ないといけない時があります。
その為にはインタラクティブなプロトタイプを作るが必要!ですよね!
だから作ったよ!!
そしてさらに!sketch cloudとアップル公式のiOS 11のUIライブラリも追加したよ!!
公式だよ!!あと他にもいろいろ追加したよ!!

\(^O^)/

※詳しくは本物のドキュメントをご参照下さい。

ホットドッグちゃん🌭
ふむ。早速中身を見て見ましょう。

ホットドッグちゃん🌭
公式ドキュメントには「Prototyping Tutorial追加しといたから触ってみて!!」と書いてあるので、sketchを立ち上げてTemplates→Prototyping Tutorialを選択!

ホットドッグちゃん🌭
おっ!矢印で繋がっていますねぇ。

ホットドッグちゃん🌭
うん。なんとなくわかります。素晴らしいです!
ココでいろいろ設定するんですね!
Good UI!!

ホットドッグちゃん🌭
画面遷移させる為にはまずオブジェクトを選択して右上のLinkボタンを押すか、ショートカットキーWを押します。そうするとオレンジ色の矢印がマウスに付いてきます!コレを遷移させたい画面にコネクトします。

ホットドッグちゃん🌭
画面遷移させるためのオレンジ色の線はリンクという名前なんですね!

ホットドッグちゃん🌭
おっ!Backボタンのリンクが!インスペクタのPrototypingの項目を見て見るとTargetがPrevious Artboardになっています。
と言う事は前の画面って意味ですね。

ホットドッグちゃん🌭
これだと線がすっきりして見通しが良いですね!!

10分後。。。

ホットドッグちゃん🌭
軽く触って見ただけですが、とても直感的に触ることが出来ました!!

一言で言うと素晴らしい!!

ホットドッグちゃん🌭
じゃあ恒例の何時ものやつ行きますね!

せーのっ!

ホットドッグちゃん🌭
あたらいいの大好き〜

関連記事