> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flowstep.ai/llms.txt
> Use this file to discover all available pages before exploring further.
# 將 Flowstep 設計預覽為互動原型
> 將任何 Flowstep 檔案作為可點擊的原型打開 — Flowstep 會自動連結你的畫面，你可以為每個元素手動設定或鎖定導覽。
Flowstep 可將檔案中的畫面轉變為可點擊的原型。在編輯器工具欄中點擊 **Preview**，Flowstep 會以整頁原型播放器打開，你可以點擊瀏覽你的流程 — 這對測試使用者旅程或將其呈現給利益相關者很有用。
## 打開原型
在編輯器工具欄中，點擊 **Preview**。原型播放器以整頁檢視方式打開，與編輯器分開。
如果你的檔案有兩個或更多畫面，Flowstep 會在你打開預覽時自動連結互動元素 — 按鈕、卡片、選單項目 — 到其目標畫面（你會看到「Bringing your screens to life」訊息）。只有在你的畫面自上次執行以來已變更時，連結才會重新生成。
點擊任何連結的元素 — 按鈕、卡片、選單項目 — 以導覽到其目標畫面。側欄列出檔案中的所有畫面，以便你可以直接跳到任何畫面，**Back to editor** 會將你帶回檔案。
自動連結需要檔案中至少有兩個畫面。如果連結生成失敗，請使用播放器中的 **Retry** 按鈕。
## 手動設定導覽
你可以精確控制元素導覽的位置：
1. 在編輯器中，選擇元素（例如按鈕）。
2. 在右側的屬性面板中開啟 **Navigation** 面板。
3. 從下拉清單中選擇目標畫面 — 或選擇 **No navigation** 以移除連結。
若要阻止 Flowstep 的自動連結覆蓋你自己設定的連結，請點擊導覽面板中的 **Lock link**。當連結被重新生成時，鎖定的連結保持不變。
## 互動控制
原型不只是可點擊的導覽 — 你畫面上的控制項在你預覽時會做出回應。翻轉開關、勾選核取方塊、選取單選按鈕、從下拉菜單選擇、切換標籤、在欄位中輸入，或增加計數器，畫面會實時更新以反映新狀態。
檔案中的畫面在預覽工作階段期間共用一個原型狀態，所以你在一個畫面上進行的變更會在你點擊進入其他畫面時延續。你也可以在淺色和深色外觀之間切換畫面，以查看它如何回應。
互動行為會自動從你的畫面生成 — 沒有任何要連線的東西。預覽檔案以試試看。