きっかけ
overflowが気になった。
SketchのPrototypingで線繋いで手元で遷移確認して、そのままOverflowにアップロードしたらめちゃくちゃ見やすい遷移図+簡易プロトタイプが見れるとか神すぎるやろ。俺の1日返して。しかもシェアしたリンクはパスワードがかけられる
— Ryo Nakae (@ryo_dg) 2018年4月23日
デザイナーが選んだ。私が好きなデザイン 2018年2月号 – Adobe Creative Stationにて、
Get obachanをご紹介されていたRyo Nakaeさんのツイートを見て気になり触ってみました。
overflowとは？
アプリを作るときに必要な画面の遷移図、みなさんはどのように作っていますか？
このツールでは、簡単に作成できるフローチャートを元にプロトタイプを作ることができます。
フローを描くためのラインをきれいに引けるだけでなく、様々な種類から選択してカテゴリー分けをして、役割を記載することも可能です。新しいものが大好きなGoodpatchで3月に話題になったアプリ、サービス、デザインまとめ | Goodpatch Blog
- ・遷移図（フローチャート）・簡易なプロトタイプが作れるツール。
- ・SketchのデフォルトのPrototypingで設定した内容を引き継げる。
SketchのデフォルトのPrototypingを引き継げるサービスを他に知らないので、とても素敵だなと思いました。（2018年5月現在）
諸々のメモ
01. overflowアプリのダウンロード
- overflowのサイトから「Request early access」ボタンを選択。
メールアドレスを登録し、アプリをダウンロードする。
Sketchファイルのアップロード
- チャートフロー（遷移図）を用意したい、対象のSketchファイルを開く。
- ・メニューバー「Overflow > Sync All Artboards」
ショートカット：Option (⌥) + Shift (⇧) + E - ・メニューバー「Overflow > Sync Selected Artboard(s)」
02. Overflowと同期する
03. メニューの内容
- ・メニュー「Select document」
ファイルを新規作成 / 既存ファイルの選択 - ・ボタン「Open an Existing Document…」
既存のOverflowファイルを読み込む - ・メニュー「Select board」
Overflowのboardを新規作成 / 既存のboardを選択 - ・メニュー「Design density / Export density」
読み込み/出力のサイズ - ・ボタン「Sync to Overflow」
同期を開始する
インスペクタから同期も出来る
- 1. Sketchのレイヤーリストから、アップロードしたいレイヤーを選択。
- 2. インスペクタからボタン「Sync to Overflow」を押すと同期が開始する。
デバイス・スキン
レイヤーにiPhone,iPad…などのデバイスを模した外枠をつけることができる。
- 1. Overflow内で対象のレイヤーを選択。表示されたツールバーの左から4つ目のアイコンを選択。
- 2. セレクトボックスからデバイスの種類を選択。（画像の「iPhone8」部分）
- 3. 「Device Skin」を有効することでデバイスが表示。
- 4. 「Mask content to device」を有効すると、ディスプレイ部分のみ / デザイン全体 の表示を選択する。
