フロー

フローとは、互いにリンクした保存済みプロトタイプのまとまりです。たとえば、ボタンからチェックアウトページが開く料金ページなどです。各画面を個別に構築してから、Vibrにリンクを依頼します。

画面同士をリンクする

1. リンク先にする画面（チェックアウトページなど）を構築し、［保存］を選択します。
2. ［新規］を選択して、次の画面を始めます。
3. リクエストの中で、保存済みの画面を@screen/でメンションします。例：「3つのプランがある料金ページ。Get startedで@screen/a-checkout-page-with-an-order-summaryを開く」

保存済みプロトタイプの画面名は、そのタイトルから付けられます。@screen/と入力すると一覧が表示されます。または、@に続けてタイトルの最初の数文字を入力します。

キャンバス内でリンクしたボタンをクリックしても、下書きから移動しません。Vibrは開く画面を表示し、［再生］を使うよう案内します。

フローを再生する

下書きがほかの画面にリンクしていると、キャンバスの上に［再生］ボタンが表示されます。選択すると、ユーザーと同じようにフローをクリックして確認できます。

• キャンバスの上の履歴に、表示した画面が並びます。
• ［戻る］で前の画面に戻り、［最初から］で最初の画面に戻ります。
• ［完了］またはEscで再生を終了します。

リンク先の画面が保存されていない場合は、再生中にその旨が表示されます。その名前でプロトタイプを保存するか、別のリンク先にするようVibrに依頼してください。

フローをエクスポートする

［エクスポート］で［フロー（.zip）］を選択すると、この画面とリンク先のすべての画面をWebページとしてダウンロードできます。index.htmlを開いて始めます。リンクした各画面はそれぞれ独立したページになり、リンクも機能します。フローのエクスポートには最大30画面まで含められます。ライブラリとエクスポートをご覧ください。