Galapagos Tech Blog

株式会社ガラパゴスのメンバーによる技術ブログです。

ProtoPie キミに決めた!(たぶん)第1回

はじめまして。まあのんです。普段はアプリのUIデザイナーをやっています。
好きな食べ物はゆでたまごです。


世の中にプロトタイプツールってたくさんありますよね。

私の場合、トランジション(遷移)系はProttもしくはinVisionで安定してきているんですが、(XDにシフトするかもしれないけれど)

インタラクション(動き)系はPixate勉強してみよっかなと思ったらサービス終了しちゃったり、Origami難しくて根気が続かなかったりで本命不在の状態でした。

でもやっぱりエンジニアやクライアントとイメージの共有には欠かせないので一つ選んで学習しよう!ということでProtoPieに決めました。

www.protopie.io



なんとこの記事 さよなら Pixate, よろしくProtoPie – heru – Medium によるとたった5時間学習するだけでこんなことができるようになるみたいなんです。 www.youtube.com

しゅごい。

ProtoPieはビデオチュートリアルとサンプルデータがあるんですよね。

ProtoPie - Learn

ページングとかスティッキーヘッダーとかかゆいところに手がとどくチュートリアルありがとうございます。 私もみんなみたいにProtoPieを使いこなせる希望が湧いてきました。

ということでこれを動かしてみたいと思います。

f:id:glpgsinc:20171207200238p:plain:w300f:id:glpgsinc:20171207200231p:plain:w300

つくってみた


やりたいことはこれ⬇️

  • スクロールする

  • イメージをタップすると詳細ページに遷移する

  • 詳細ページに遷移する時にイメージが拡がる

  • 一覧に戻る時イメージが縮む


    AppStoreのTodayタブがお手本です。


    実際に動きをつけるのは第2回から。
    今回はSketchデータをインポートするところまで。



Step1.Sketchデータをインポート

File→inport from Sketch(⌘I)を開いてみましょう。
f:id:glpgsinc:20171208181927p:plain:w300
うーーんわかりそうで何が何やらって感じです。説明していきます⬇️


■Artboard
→Sketchファイルの中でインポートするアートボードを選択します。
インポート前に画面が把握できるように名前をつけておきましょう!

■Import Size
→レイヤーの倍率を設定します。Sketchで制作したアートボードのサイズによって変わります。

■layer to import

All layer structure
→アートボード内の全てのレイヤーをフォルダ構造を維持したままインポートします。
Exportable layers
→アートボード内のレイヤーで、exportable(エクスポート可能)に設定されているレイヤーだけをインポートします。部分的にインポートしたい時に便利!


■Re-Import Options

Overwrite positions of layers
→再インポートする時にSketchレイヤーの位置の値を上書き。

Overwrite sizes of layers
→再インポートする時にSketchレイヤーのサイズの値を上書き。

Update layer orders and grouping structure
→再インポートする時にSketchレイヤーの順番と構造を上書き。

Remove layers deleted in Sketch
→再インポートする時にSketchから削除されたレイヤーがあればProtoPieからも削除します。

Re-Import項目はこまめにSketchと平行して作業したいなら全部チェックしちゃえばいいかもです。


ちなみにlayer to importとRe-Import Options機能は今年の2月にアップデートされました。細かい部分まで設定できるからprotopieを操作するときはぜひsketchとセットでチャレンジしてみてください!



f:id:glpgsinc:20171208185042p:plain:w300
ということで、インポートできた。いちいちparts化せずに済むのでとーーってもありがたきTT



今日はここまでー。

次回からがっつりアニメーションチャレンジしていきます!
12月18日更新予定です。


参考記事
https://www.protopie.io/learn/
さよなら Pixate, よろしくProtoPie – heru – Medium