> ## 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 設計匯出為 JPG 或 PNG 圖片檔案
> Flowstep 支援將設計匯出為 JPG 或 PNG。瞭解哪種格式適合您的使用案例，以及如何在幾次點擊中下載您的畫面。
當您準備好分享或交付設計時，Flowstep 可讓您將其匯出為靜態圖像 — JPG 或 PNG。這兩種格式在設計工具、簡報軟體和瀏覽器中得到廣泛支援，因此您可以將 AI 產生的設計帶到任何需要的地方。
## 如何匯出您的設計
在 Flowstep 中導覽至您要匯出的設計。
在工具列或設計面板中找到匯出選項。選擇它以開啟匯出設定。
根據您的使用案例選擇 **JPG** 或 **PNG**（請參閱下面的比較）。
確認您的選擇，並將匯出的圖像下載到您的裝置。
## JPG 與 PNG：您應該使用哪種格式？
| | JPG | PNG |
| -------- | ------------------ | --------------- |
| **最佳用途** | 共用預覽、簡報、利益相關者審查 | 具有透明背景的設計、高保真交付 |
| **檔案大小** | 較小 — 更快透過電子郵件或訊息傳遞 | 較大 — 保留完整圖像細節 |
| **透明度** | 不支援 | 支援 |
| **品質** | 略微壓縮 | 無損 — 無品質降低 |
如果您要將設計貼到投影片中或向客戶傳送快速預覽，JPG 通常是正確的選擇。如果您需要清晰的邊緣或透明背景 — 例如，將設計覆蓋在另一個圖像上 — 請使用 PNG。
## 匯出程式碼
除了圖像，**Code** 按鈕會將畫面匯出為 React + Tailwind 程式碼 — 複製片段，或將完整套件下載為 ZIP。套件是獨立的：設計中使用的圖像（包括您在聊天面板中附加的圖像）包含在 `public/assets/` 資料夾中，程式碼使用本機路徑參考它們，因此匯出按原樣執行。
下載的檔案 — 圖像和程式碼套件 — 都以它們所屬的畫面名稱命名（如果畫面未命名，則回退到檔案名稱），這使得在處理許多畫面時匯出易於識別。
如果您需要將設計帶入向量編輯工作流程，請直接複製到 Figma。請參閱[立即將 Flowstep 設計複製到 Figma](/zh-Hant/figma-integration)。