overflowのLOGO

きっかけ

overflowが気になった。

デザイナーが選んだ。私が好きなデザイン 2018年2月号 – Adobe Creative Stationにて、
Get obachanをご紹介されていたRyo Nakaeさんのツイートを見て気になり触ってみました。

overflowとは?

アプリを作るときに必要な画面の遷移図、みなさんはどのように作っていますか?
このツールでは、簡単に作成できるフローチャートを元にプロトタイプを作ることができます
フローを描くためのラインをきれいに引けるだけでなく、様々な種類から選択してカテゴリー分けをして、役割を記載することも可能です。

新しいものが大好きなGoodpatchで3月に話題になったアプリ、サービス、デザインまとめ | Goodpatch Blog

  • 遷移図(フローチャート)・簡易なプロトタイプが作れるツール。
  • SketchのデフォルトのPrototypingで設定した内容を引き継げる。

SketchのデフォルトのPrototypingを引き継げるサービスを他に知らないので、とても素敵だなと思いました。(2018年5月現在)

リンク:https://overflow.io/

諸々のメモ

01. overflowアプリのダウンロード

  • overflowのサイトから「Request early access」ボタンを選択。
    メールアドレスを登録し、アプリをダウンロードする。

Sketchファイルのアップロード

  • チャートフロー(遷移図)を用意したい、対象のSketchファイルを開く。
アートボードの同期

アートボードの同期
アートボードの同期
  • ・メニューバー「Overflow > Sync All Artboards」
    ショートカット:Option (⌥) + Shift (⇧) + E
  • ・メニューバー「Overflow > Sync Selected Artboard(s)」

02. Overflowと同期する

Sketchファイルのアップロード(前半)

Sketchファイルのアップロード(前半)
Sketchファイルのアップロード(前半)
Sketchファイルのアップロード(後半)

Sketchファイルのアップロード(後半)
Sketchファイルのアップロード(後半)

03. メニューの内容

  • メニュー「Select document」
    ファイルを新規作成 / 既存ファイルの選択
  • ボタン「Open an Existing Document…」
    既存のOverflowファイルを読み込む
  • メニュー「Select board」
    Overflowのboardを新規作成 / 既存のboardを選択
  • メニュー「Design density / Export density」
    読み込み/出力のサイズ
  • ボタン「Sync to Overflow」
    同期を開始する

インスペクタから同期も出来る

インスペクタから同期も出来る

インスペクタから同期も出来る
設定後のイメージ
  1. 1. Sketchのレイヤーリストから、アップロードしたいレイヤーを選択。
  2. 2. インスペクタからボタン「Sync to Overflow」を押すと同期が開始する。

デバイス・スキン

デバイス・スキン

デバイス・スキン
デバイス・スキン

レイヤーにiPhone,iPad…などのデバイスを模した外枠をつけることができる。

  1. 1. Overflow内で対象のレイヤーを選択。表示されたツールバーの左から4つ目のアイコンを選択。
  2. 2. セレクトボックスからデバイスの種類を選択。(画像の「iPhone8」部分)
  3. 3. 「Device Skin」を有効することでデバイスが表示。
  4. 4. 「Mask content to device」を有効すると、ディスプレイ部分のみ / デザイン全体 の表示を選択する。

その他(Youtube)


Meet Overflow – From Design to Playable User Flow [UX Design]

Tags