> ## 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 和 Figma 之间移动设计

> 将任何 Flowstep 框架复制粘贴到 Figma，或将 Figma 框架导入 Flowstep 作为可编辑的屏幕。在两个工具之间无缝工作。

<Frame>
  <img src="https://mintcdn.com/flowstep/UmnbuTkaA7N6vp1N/images/Screenshot-2026-05-06-at-14.19.04.png?fit=max&auto=format&n=UmnbuTkaA7N6vp1N&q=85&s=0e31f66d221bc267a060704be409d9f2" alt="Screenshot 2026 05 06 At 14 19 04" width="1838" height="1266" data-path="images/Screenshot-2026-05-06-at-14.19.04.png" />
</Frame>

Flowstep 旨在融入你已在使用的设计工作流中——而非替代它。你可以在 Flowstep 中生成设计，然后通过简单的复制粘贴立即将其引入 Figma，或反向操作，将 Figma 框架导入 Flowstep。这意味着你可以结合 AI 辅助设计生成的快速性与 Figma 中你依赖的精确性和协作功能。

<Note>
  Flowstep 和 Figma 是互补工具，不是竞争对手。Flowstep 帮助你快速生成和探索 UI 设计想法；Figma 是你优化、协作和构建生产就绪工作的地方。同时使用两者能给你最佳体验。
</Note>

## 如何将 Flowstep 设计复制到 Figma

<Steps>
  <Step title="在 Flowstep 中选择一个或多个屏幕">
    点击一个屏幕来选择它——或选择多个屏幕以一次性复制所有屏幕。确保选择内容在画布上突出显示。
  </Step>

  <Step title="复制选择内容">
    在 Mac 上按 \*\*Cmd+\*\*⇧+**C**，在 Windows 上按 \*\*Ctrl+\*\*⇧+**C**。Flowstep 将显示 "Preparing your design — stay on this tab and keep the screen selected"（正在准备你的设计——请保持此标签页打开并保持屏幕选中）；复制会在片刻完成。
  </Step>

  <Step title="粘贴到你的 Figma 文件">
    切换到 Figma 并打开要放置设计的文件。在 Mac 上按 **Cmd+V**，在 Windows 上按 **Ctrl+V** 粘贴。Flowstep 屏幕出现在你的 Figma 画布上，准备编辑。
  </Step>
</Steps>

<Note>
  复制到 Figma 使用你浏览器的剪贴板，所以浏览器必须允许 Flowstep 剪贴板访问——如果你看到权限错误，在浏览器设置中允许剪贴板访问并重试。在复制过程中切换标签页会中断传输；请保持 Flowstep 标签页聚焦直到复制完成。
</Note>

<Tip>
  将框架粘贴到 Figma 中的专用"AI 导入"页面，以保持你的工作文件井然有序。从那里，你可以按自己的进度将元素移动到你的主设计系统或组件库中。
</Tip>

## 从 Figma 导入设计

你也可以反向操作，将 Figma 框架作为可编辑屏幕引入 Flowstep。导入对所有人开放——连接一次 Figma 账户，然后从框架链接导入。

<Steps>
  <Step title="连接 Figma">
    从你的设置中将 Figma 账户连接到 Flowstep。Flowstep 使用 Figma 的授权来读取你有访问权限的文件。
  </Step>

  <Step title="在 Figma 中复制框架链接">
    在 Figma 中，右键点击你想要的框架，选择 **Copy link to selection**。你也可以复制指向整个页面的链接，以一次性导入该页面上的所有顶级框架。
  </Step>

  <Step title="导入到 Flowstep">
    使用 Flowstep 工具栏中的 Figma 导入选项并粘贴链接。Flowstep 将框架转换为你画布上的可编辑元素。重新导入相同框架会就地更新它。
  </Step>
</Steps>

### 导入的内容

Flowstep 将 Figma 框架重新创建为本地、可编辑的元素——而非平坦图像。导入会带来：

* 框架及其嵌套层
* 文本，包括按字符样式如权重、颜色和粗体
* 来自你 Figma 变量的颜色
* 图像填充、SVG 图标和形状
* 投影、内阴影以及图层和背景模糊
* 虚线和点线笔画

<Note>
  该文件的组织必须已连接 Figma。如果框架无法导入，Flowstep 会显示一条可操作的消息，告诉你下一步该做什么——例如，如果你的授权已过期，请重新连接 Figma；如果 Figma 速率限制或响应缓慢，请等待并重试；或者对于社区模板，先将其复制到你的团队，然后粘贴新链接。
</Note>