サイトやアプリの画面遷移を分かりやすく見せる、ユーザーフローを作成する要素が揃ったプラグイン -UserFlows

Webサイトやスマホアプリの画面遷移を伝えるフローチャートやユーザーフローを3つのショートカットで作成できるSketchのプラグインを紹介します。

ラインやアロー、条件付きロジック、フローダイアグラムなどが簡単に作成できます。

サイトのキャプチャ

UserFlows
UserFlows -GitHub

UserFlowsの使い方

UserFlowsの使い方はシンプルで、簡単です。
3つのショートカットを使用するだけで、フローを作成できます。

リンクの定義

2つのアートボード間のリンクを定義するにはレイヤーとリンク先のアートボードを選択し、「command+shift+K」を実行します。

条件付きロジック

条件付きロジックを追加するには、「command+shift+D」を実行します。編集するには、アートボードを選択して同じコマンドを実行します。

フローダイアグラムの生成

すべてのリンクを定義したら、「command+shift+F」を実行します。開始画面を選択し、フローの詳細を入力して、「Generate Diagram」をクリックします。

コネクションの表示・非表示

作成したコネクションは、「command+shift+9」で表示、「command+shift+0」で非表示にできます。

UserFlowsの設定パネル

UserFlowsの設定パネル

コネクションのカラーやサイズ、リンクのサイズ、エクスポート時に加える名前などを個別に設定できます。

UserFlowsのダウンロード

ダウンロードは、下記ページから。

サイトのキャプチャ

UserFlows

「Download Plugin」をクリックすると、すぐにダウンロードできます。
インストールは解凍したファイルの「UserFlows.sketchplugin」をダブルクリックするだけです。

top of page

©2018 coliss