> ## 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 會顯示「正在準備你的設計 — 請保持此標籤頁聚焦，並保持畫面被選擇」；複製需要片刻才能完成。
  </Step>

  <Step title="貼到你的 Figma 檔案">
    切換到 Figma 並開啟要放置設計的檔案。在 Mac 上按 **Cmd+V**，或在 Windows 上按 **Ctrl+V** 貼上。Flowstep 畫面會出現在你的 Figma 畫布上，準備編輯。
  </Step>
</Steps>

<Note>
  複製到 Figma 使用你的瀏覽器剪貼板，所以瀏覽器必須允許 Flowstep 剪貼板訪問權 — 如果看到權限錯誤，請在瀏覽器設定中允許剪貼板訪問權，然後重試。在複製期間切換標籤頁會中斷傳輸；請保持 Flowstep 標籤頁聚焦，直到複製完成。
</Note>

<Tip>
  將畫面貼到 Figma 中專用的「AI imports」頁面，以保持工作檔案的組織。從那裡，你可以按自己的步調將元素移入主設計系統或元件庫。
</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>