> ## 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.

# Unduh desain Flowstep sebagai file gambar JPG atau PNG

> Flowstep mendukung ekspor desain sebagai JPG atau PNG. Pelajari format mana yang cocok untuk kasus penggunaan Anda dan cara mengunduh layar Anda dalam beberapa klik.

<Frame>
  <img src="https://mintcdn.com/flowstep/UmnbuTkaA7N6vp1N/images/Screenshot-2026-05-06-at-14.19.49.png?fit=max&auto=format&n=UmnbuTkaA7N6vp1N&q=85&s=b9d31a01c99bae3d325fdbfee34529dc" alt="Screenshot 2026 05 06 At 14 19 49" width="1824" height="1388" data-path="images/Screenshot-2026-05-06-at-14.19.49.png" />
</Frame>

Saat Anda siap untuk berbagi atau menyerahkan desain, Flowstep memungkinkan Anda mengekspor sebagai gambar statis — baik JPG atau PNG. Kedua format didukung luas di berbagai alat desain, perangkat lunak presentasi, dan browser, sehingga Anda dapat membawa desain yang dihasilkan AI ke mana pun Anda membutuhkannya.

## Cara mengekspor desain Anda

<Steps>
  <Step title="Buka desain Anda">
    Navigasikan ke desain yang ingin Anda ekspor di dalam Flowstep.
  </Step>

  <Step title="Buka menu ekspor">
    Temukan opsi ekspor di bilah alat atau panel desain. Pilih untuk membuka pengaturan ekspor.
  </Step>

  <Step title="Pilih format Anda">
    Pilih **JPG** atau **PNG** tergantung kasus penggunaan Anda (lihat perbandingan di bawah).
  </Step>

  <Step title="Unduh file">
    Konfirmasi pilihan Anda dan unduh gambar yang diekspor ke perangkat Anda.
  </Step>
</Steps>

<Frame>
  <img src="https://mintcdn.com/flowstep/UmnbuTkaA7N6vp1N/images/Screenshot-2026-05-06-at-14.19.39.png?fit=max&auto=format&n=UmnbuTkaA7N6vp1N&q=85&s=8f3132e26a9a759315dd87a7a624fe00" alt="Screenshot 2026 05 06 At 14 19 39" width="1828" height="1522" data-path="images/Screenshot-2026-05-06-at-14.19.39.png" />
</Frame>

## JPG vs PNG: format mana yang harus Anda gunakan?

|                   | JPG                                                              | PNG                                                                         |
| ----------------- | ---------------------------------------------------------------- | --------------------------------------------------------------------------- |
| **Terbaik untuk** | Berbagi pratinjau, presentasi, tinjauan pemangku kepentingan     | Desain dengan latar belakang transparan, penyerahan dengan fidelitas tinggi |
| **Ukuran file**   | Lebih kecil — lebih cepat untuk berbagi melalui email atau pesan | Lebih besar — mempertahankan detail gambar penuh                            |
| **Transparansi**  | Tidak didukung                                                   | Didukung                                                                    |
| **Kualitas**      | Sedikit terkompresi                                              | Lossless — tidak ada pengurangan kualitas                                   |

<Tip>
  Jika Anda menempel desain ke slide deck atau mengirim pratinjau cepat kepada klien, JPG biasanya pilihan yang tepat. Jika Anda memerlukan tepi tajam atau latar belakang transparan — misalnya, untuk menumpangkan desain pada gambar lain — gunakan PNG.
</Tip>

## Ekspor kode

Selain gambar, tombol **Code** mengekspor layar sebagai kode React + Tailwind — salin cuplikan, atau unduh bundel lengkap sebagai ZIP. Bundel berdiri sendiri: gambar yang digunakan dalam desain (termasuk yang Anda lampirkan di panel obrolan) disertakan dalam folder `public/assets/` dengan kode yang mereferensikannya dengan jalur lokal, sehingga ekspor berjalan apa adanya.

File yang diunduh — gambar dan bundel kode — dinamai sesuai layar yang mereka miliki (kembali ke nama file jika layar tidak bernama), yang membuat ekspor mudah diidentifikasi saat Anda bekerja dengan banyak layar.

<Note>
  Jika Anda perlu membawa desain ke alur kerja pengeditan vektor, salin langsung ke Figma. Lihat [Salin desain Flowstep ke Figma secara instan](/id/figma-integration).
</Note>