2016/12/12

アートボードから画面遷移図を生成するUser Flowsプラグイン - Sketch Plugin Advent Calendar 2016

Sketchプラグインを適当に選んで紹介していく、Sketch Plugin Advent Calendar 2016 12日目は、アートボードから画面遷移図を生成する「User Flowsプラグイン」です。

GitHub: https://github.com/abynim/UserFlows
ウェブサイト: https://abynim.github.io/UserFlows/（はじめに、プラグインのダウンロードはSketch ToolBoxではなく、ウェブサイトから行ったほうがよさそうです。）

オブジェクトとアートボードを矢印でつなげて、画面遷移図を作成するプラグインです。正直なところ、ウェブサイトの動画を見れば、このページを見る必要はほとんどないのですが……

遷移を表す矢印の挿入・削除・アップデートや条件分岐アートボードの追加、作成した遷移図全体を書き出せるようにまとめる機能などがあります。

遷移の矢印を追加するには、アートボードとアートボード以外のオブジェクトを選択し、「Create Link」（ショートカット：Command ＋ Shift ＋ K）を実行します。

つなげた矢印は、「Remove Link」（ショートカット：Command ＋ Shift ＋ U）で削除します。

条件分岐フローも挿入でき、「Add/Edit Conditinons」（ショートカット：Command ＋ Shift ＋ D）で条件を入力するダイアログが表示し、［Save］ボタンをクリックします。

入力した内容で条件が生成されます。

次のような感じで、追加した条件からアートボードへリンクさせます。

条件は最初2つまでしか作成できませんが、作成後に条件分岐のアートボードを選択した状態で再度Add/Edit Conditionsを実行すると、条件を1つ追加できます（繰り返すことでいくつでも追加可能）。

ちなみに日本語を入力すると、ベースラインがずれているという残念な感じになります。

オブジェクトやアートボードを移動した場合でも、「Show or Redraw Connections」（ショートカット：Command ＋ Shift ＋ 9）でアップデートできます。

作成した遷移図をまとめるには、「Generate Flow Diagram」（ショートカット：Command ＋ Shift ＋ F）を実行します。ダイアログが表示されるので、タイトルや説明・生成するページを選択します。

「Keep _Flow Page Organized」のチェックボックスは「_Flow」ページでもプラグインによる整列を有効にするかどうかのオブションです。チェックボックスを入れておくと、アートボードが水平に7つ以上並ばないように配置されます。

［Generate Diagram］ボタンをクリックすれば、アートボードをビットマップに変換したものが配置され、タイトルや説明などが挿入されたアートボードにまとめてくれます。

一時的に矢印を隠すには、「Hide Connections」（ショートカット：Command ＋ Shift ＋ 0）を選択します。

リンク先を持っているオブジェクトを選び「Go to Linked Artboard」（ショートカット：Command ＋ Shift ＋ .）をすると、遷移先のアートボードをキャンバスの中央に表示します（とはいえ、ライバルといわれるAdobe XDでは、インタラクティブにプレビューすることができますけどね…早くSliver Flowsがリリースされてほしい）。「Go Back to Link Layer」（ショートカット：Command ＋ Shift ＋ ,）でリンク元のレイヤーへ移動します。

「Setting」ではリンクを表す矢印の色や、まとめるアートボードの解像度などを設定できます。