> ## 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 会打开一个全页原型播放器，你可以点击浏览你的流程——适合用于测试用户旅程或向利益相关者演示。

## 打开原型

<Steps>
  <Step title="点击 Preview">
    在编辑器工具栏中点击 **Preview**。原型播放器会以全页视图打开，与编辑器分离。
  </Step>

  <Step title="让 Flowstep 链接你的屏幕">
    如果你的文件中有两个或更多屏幕，打开预览时 Flowstep 会自动链接交互元素——按钮、卡片、菜单项——到其目标屏幕（你会看到 "Bringing your screens to life"（正在让你的屏幕栩栩如生）消息）。仅当屏幕自上次运行以来已更改时，才会重新生成链接。
  </Step>

  <Step title="点击浏览你的流程">
    点击任何链接的元素——按钮、卡片、菜单项——导航到其目标屏幕。侧边栏列出文件中的所有屏幕，因此你可以直接跳转到任何一个，**Back to editor** 会将你返回文件。
  </Step>
</Steps>

<Note>
  自动链接需要文件中至少两个屏幕。如果链接生成失败，使用播放器中的 **Retry** 按钮。
</Note>

## 手动设置导航

你可以精确控制元素导航的位置：

1. 在编辑器中，选择元素（例如，一个按钮）。
2. 在右侧属性面板中打开 **Navigation** 面板。
3. 从下拉菜单中选择目标屏幕——或选择 **No navigation** 来移除链接。

要防止 Flowstep 的自动链接覆盖你自己设置的链接，点击 Navigation 面板中的 **Lock link**。锁定的链接在链接重新生成时保持不变。

## 交互控制

原型不仅仅是可点击导航——你屏幕上的控件在预览时会响应。翻转开关、勾选复选框、选择单选选项、从下拉菜单中选择、切换标签页、在字段中输入或增加计数器，屏幕会实时更新以反映新状态。

文件中的屏幕在预览会话期间共享一个原型状态，因此你在一个屏幕上进行的更改会在你点击进入其他屏幕时保持。你也可以在屏幕的浅色和深色外观之间切换以查看它如何响应。

<Note>
  交互行为从你的屏幕自动生成——无需设置任何内容。预览文件试试。
</Note>
