はじめまして。まあのんです。普段はアプリのUIデザイナーをやっています。
好きな食べ物はゆでたまごです。
世の中にプロトタイプツールってたくさんありますよね。
私の場合、トランジション（遷移）系はProttもしくはinVisionで安定してきているんですが、（XDにシフトするかもしれないけれど）
インタラクション（動き）系はPixate勉強してみよっかなと思ったらサービス終了しちゃったり、Origami難しくて根気が続かなかったりで本命不在の状態でした。
でもやっぱりエンジニアやクライアントとイメージの共有には欠かせないので一つ選んで学習しよう！ということでProtoPieに決めました。
www.protopie.io
なんとこの記事
さよなら Pixate, よろしくProtoPie – heru – Medium
によるとたった5時間学習するだけでこんなことができるようになるみたいなんです。
www.youtube.com
しゅごい。
ProtoPieはビデオチュートリアルとサンプルデータがあるんですよね。
ProtoPie - Learn
ページングとかスティッキーヘッダーとかかゆいところに手がとどくチュートリアルありがとうございます。
私もみんなみたいにProtoPieを使いこなせる希望が湧いてきました。
ということでこれを動かしてみたいと思います。
つくってみた
やりたいことはこれ⬇️
Step1.Sketchデータをインポート
File→inport from Sketch(⌘I)を開いてみましょう。
うーーんわかりそうで何が何やらって感じです。説明していきます⬇️
■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機能は今年の２月にアップデートされました。細かい部分まで設定できるからprotopieを操作するときはぜひsketchとセットでチャレンジしてみてください！
ということで、インポートできた。いちいちparts化せずに済むのでとーーってもありがたきTT
今日はここまでー。
次回からがっつりアニメーションチャレンジしていきます！
12月18日更新予定です。
参考記事
https://www.protopie.io/learn/
さよなら Pixate, よろしくProtoPie – heru – Medium
