Langsung ke konten utama
Screenshot 2026 05 06 At 14 19 49
Saat Anda siap untuk membagikan atau menyerahkan desain, Flowstep memungkinkan Anda mengekspor sebagai gambar statis — baik JPG atau PNG. Kedua format didukung luas di alat desain, perangkat lunak presentasi, dan browser, sehingga Anda dapat membawa desain yang dihasilkan AI ke mana pun Anda membutuhkannya.

​
Cara mengekspor desain Anda

1

Buka desain Anda

Navigasikan ke desain yang ingin Anda ekspor di dalam Flowstep.
2

Buka menu ekspor

Temukan opsi ekspor di toolbar atau panel desain. Pilih untuk membuka pengaturan ekspor.
3

Pilih format Anda

Pilih JPG atau PNG tergantung kasus penggunaan Anda (lihat perbandingan di bawah).
4

Unduh file

Konfirmasi pilihan Anda dan unduh gambar yang diekspor ke perangkat Anda.
Screenshot 2026 05 06 At 14 19 39

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

Jika Anda menempel desain Anda ke dalam slide deck atau mengirim pratinjau cepat kepada klien, JPG biasanya merupakan pilihan yang tepat. Jika Anda memerlukan tepi yang tajam atau latar belakang transparan — misalnya, untuk menempatkan desain di atas gambar lain — gunakan PNG.

​
Kode ekspor

Selain gambar, tombol Code mengekspor desain Anda sebagai kode React + Tailwind — salin snippet, atau unduh bundel lengkap sebagai ZIP. Anda dapat mengekspor satu layar, beberapa layar yang dipilih, atau seluruh file sekaligus. Ketika Anda mengekspor lebih dari satu layar, masing-masing menjadi file komponen sendiri dan navigasi apa pun yang telah Anda siapkan antara layar tersambung ke kode yang dihasilkan, sehingga aplikasi yang diekspor dapat diklik dari ujung ke ujung. Bundel bersifat mandiri: gambar yang digunakan dalam desain (termasuk yang Anda lampirkan di panel obrolan) disertakan dalam folder public/assets/ dengan kode mereferensikannya berdasarkan jalur lokal, jadi ekspor berjalan apa adanya. File yang diunduh — gambar dan bundel kode — dinamai menurut layar tempat mereka berada (kembali ke nama file jika layar tidak diberi nama), yang membuat ekspor mudah diidentifikasi saat Anda bekerja dengan banyak layar.

​
Kirim desain ke agen coding Anda

Alih-alih mengunduh file, Anda dapat menyerahkan desain langsung ke asisten coding AI. Klik Send to your coding agent di toolbar — atau buka dialog ekspor dan pilih opsi yang sama — untuk menyalin prompt siap-tempel untuk agen Anda:
Agen Anda membaca layar ini melalui MCP dan membangunnya di repo Anda. Tempel prompt ini ke dalam Claude, Cursor, atau agen pilihan Anda.
Prompt memberi tahu agen Anda untuk mengambil layar melalui server Flowstep MCP dan membangunnya kembali di basis kode Anda. Anda dapat menyerahkan satu layar, beberapa layar yang dipilih, atau seluruh file sekaligus — prompt menyesuaikan dengan apa yang telah Anda pilih. Ini menggunakan server Flowstep MCP, jadi sambungkan klien MCP terlebih dahulu. Lihat ringkasan server MCP untuk klien yang didukung dan Panduan Singkat untuk menghubungkan satu.
Jika Anda perlu membawa desain Anda ke alur kerja pengeditan vektor, salin langsung ke Figma. Lihat Salin desain Flowstep ke Figma secara instan.