Skip to main content
Flowstepはファイル内の画面をクリッカブルプロトタイプに変換できます。エディタツールバーでPreviewをクリックすると、Flowstepはフルページのプロトタイププレイヤーを開き、フローをクリックして移動できます。ユーザージャーニーをテストしたり、ステークホルダーに提示したりする場合に便利です。

​
プロトタイプを開く

1

Preview をクリック

エディタツールバーでPreviewをクリックします。プロトタイププレイヤーがエディタから独立したフルページビューとして開きます。
2

Flowstepに画面をリンクさせる

ファイルに2つ以上の画面がある場合、プレビューを開くときに、Flowstepはボタン、カード、メニュー項目などのインタラクティブ要素をターゲット画面に自動的にリンクします（“Bringing your screens to life”というメッセージが表示されます）。リンクは前回の実行以降に画面が変更された場合にのみ再生成されます。
3

フローをクリックして移動

ボタン、カード、メニュー項目などのリンク済み要素をクリックして、その対象画面に移動します。サイドバーにはファイル内のすべての画面がリストされているため、任意の画面に直接ジャンプでき、Back to editorをクリックするとファイルに戻ります。
自動リンク生成にはファイルに少なくとも2つの画面が必要です。リンク生成に失敗した場合は、プレイヤーのRetryボタンを使用してください。

​
ナビゲーションを手動で設定する

要素がどこにナビゲートするかを正確に制御できます：
  1. エディタで要素（たとえばボタン）を選択します。
  2. 右側のプロパティパネルでNavigationパネルを開きます。
  3. ドロップダウンからターゲット画面を選択するか、No navigationを選択してリンクを削除します。
Flowstepの自動リンク機能が自分で設定したリンクを上書きするのを防ぐには、NavigationパネルでLock linkをクリックしてください。ロックされたリンクはリンクが再生成される場合でも変更されません。

​
インタラクティブコントロール

プロトタイプはクリッカブルなナビゲーションだけではなく、プレビュー中に画面上のコントロールが応答します。スイッチを切り替え、チェックボックスにチェックを入れ、ラジオオプションを選択し、ドロップダウンから選択し、タブを切り替え、フィールドに入力するか、カウンターをインクリメントするとき、画面はリアルタイムで新しい状態を反映するように更新されます。 ファイル内の画面はプレビューセッション中に1つのプロトタイプ状態を共有するため、1つの画面で行う変更は他の画面をクリックして移動する際に引き継がれます。また、画面をライト及びダーク外観の間で切り替えて、それがどのように応答するかを確認することもできます。
インタラクティブな動作は画面から自動的に生成されます — 配線するものはありません。ファイルをプレビューして試してください。