跳转到主要内容
Screenshot 2026 05 06 At 14 19 04
Flowstep 的设计初衷是融入您已在使用的设计工作流，而不是取代它。您可以在 Flowstep 中生成设计，然后通过简单的复制粘贴立即将其带入 Figma；您也可以反过来，将 Figma 框架导入 Flowstep。这样，您既能获得 AI 辅助设计生成的速度，又能保留您在 Figma 中依赖的精确度与协作功能。
Flowstep 与 Figma 是互补的工具，而不是竞争对手。Flowstep 帮助您快速生成并探索 UI 设计构想；Figma 则是您进一步完善、协作并打磨出可投入生产成果的地方。两者结合使用，可以发挥各自的优势。

​
如何将 Flowstep 设计复制到 Figma

1

在 Flowstep 中选择一个或多个屏幕

点击屏幕即可选中它，也可以选中多个屏幕，一次性全部复制。请确保画布中的选区处于高亮状态。
2

复制所选内容

在 Mac 上按 **Cmd+**⇧+C，在 Windows 上按 **Ctrl+**⇧+C。Flowstep 会显示 “Preparing your design. Stay on the current tab.”（正在准备您的设计，请停留在当前标签页），复制过程很快就会完成。
3

粘贴到您的 Figma 文件中

切换到 Figma，打开您想放置设计的文件。在 Mac 上按 Cmd+V，在 Windows 上按 Ctrl+V 进行粘贴。Flowstep 屏幕会出现在您的 Figma 画布上，可以直接编辑。
复制到 Figma 使用的是浏览器的剪贴板，因此浏览器必须允许 Flowstep 访问剪贴板。如果您看到权限错误，请在浏览器设置中允许剪贴板访问，然后重试。复制过程中切换标签页会中断传输，请保持 Flowstep 标签页处于焦点状态，直到复制完成。
将框架粘贴到 Figma 中专门的 “AI imports” 页面，可以让您的工作文件保持井然有序。之后，您可以按自己的节奏，将元素移入主设计系统或组件库。

​
从 Figma 导入设计

您也可以反过来，将 Figma 框架导入 Flowstep，作为可编辑的屏幕。所有用户都可以使用导入功能：只需连接一次 Figma 账户，之后即可通过框架链接进行导入。
1

连接 Figma

在设置中将您的 Figma 账户连接到 Flowstep。Flowstep 使用 Figma 的授权来读取您有权访问的文件。
2

在 Figma 中复制框架链接

在 Figma 中，右键点击您想要的框架，然后选择 Copy link to selection。您也可以复制整个页面的链接，一次性导入该页面的所有顶层框架。
3

导入到 Flowstep

使用 Flowstep 工具栏中的 Figma 导入选项，并粘贴链接。Flowstep 会将框架转换为画布上可编辑的元素。每次导入都会新增一个屏幕。重新导入同一框架不会替换之前的导入结果，因此如果您不再需要旧屏幕，请将其删除。

​
导入的内容

Flowstep 会将 Figma 框架重建为原生的可编辑元素，而不是扁平的图片。导入会带入以下内容：
  • 框架及其嵌套的图层
  • 文本，包括逐字符的样式，例如字重、颜色和加粗
  • 来自您 Figma 变量的颜色
  • 图片填充，以及 SVG 图标和形状
  • 投影和内阴影，以及图层和背景模糊
  • 虚线和点线描边
文件所属的组织必须已连接 Figma。如果框架无法导入，Flowstep 会显示可操作的提示，告诉您下一步该怎么做。例如：如果您的授权已过期，请重新连接 Figma；如果 Figma 正在限流或响应缓慢，请稍等片刻再重试；如果是 Community 模板，请先将其复制到您的团队中，然后粘贴新的链接。