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

# Sunting dan iterasi desain Flowstep melalui chat atau kanvas

> Perbaiki layar apa pun yang dihasilkan Flowstep melalui penyuntingan visual manual atau prompt berbasis chat — iterasi sebanyak yang diperlukan hingga desainnya sempurna.

<Frame>
  <img src="https://mintcdn.com/flowstep/iVYFuG-E2bJvmdDE/images/Screenshot-2026-05-06-at-14.25.48.png?fit=max&auto=format&n=iVYFuG-E2bJvmdDE&q=85&s=0a67045dde91f73cae39afde3d359269" alt="Screenshot 2026 05 06 At 14 25 48" width="2338" height="1510" data-path="images/Screenshot-2026-05-06-at-14.25.48.png" />
</Frame>

Desain Flowstep dapat disunting sepenuhnya setelah dibuat. Anda tidak terkunci pada apa yang pertama kali dihasilkan AI — Anda dapat menyesuaikan elemen visual secara langsung di editor, menggunakan chat untuk menjelaskan perubahan dalam bahasa alami, atau meminta Flowstep menghasilkan variasi dan layar baru. Gunakan metode apa pun yang sesuai dengan perubahan yang ingin Anda lakukan.

## Dua cara untuk menyunting

<Tabs>
  <Tab title="Penyuntingan visual manual">
    Buat perubahan langsung pada kanvas dengan memilih dan memodifikasi elemen. Metode ini paling cocok untuk penyesuaian yang tepat — memindahkan komponen, mengubah warna, memperbarui label, atau menyesuaikan jarak.

    <Steps>
      <Step title="Pilih elemen yang ingin Anda ubah">
        Klik komponen atau lapisan apa pun dalam desain Anda untuk memilihnya.
      </Step>

      <Step title="Buat perubahan Anda">
        Gunakan kontrol editor untuk menyesuaikan properti seperti warna, ukuran, posisi, atau konten teks.
      </Step>

      <Step title="Tinjau hasilnya">
        Perubahan Anda diterapkan segera pada kanvas. Lanjutkan penyuntingan atau pindah ke layar berikutnya.
      </Step>
    </Steps>
  </Tab>

  <Tab title="Penyuntingan berbasis chat">
    Jelaskan perubahan yang ingin Anda buat dalam bahasa alami dan Flowstep memperbarui desain untuk Anda. Metode ini lebih cepat untuk perubahan luas atau struktural — menyesuaikan tata letak, meninjau ulang bagian, atau menerapkan arah gaya.

    <Steps>
      <Step title="Buka panel chat">
        Pilih layar yang ingin Anda sunting, kemudian buka input chat.
      </Step>

      <Step title="Jelaskan perubahan Anda">
        Ketik apa yang ingin Flowstep perbarui. Jadilah spesifik tentang apa yang harus berubah dan mengapa, jika itu membantu.
      </Step>

      <Step title="Tinjau desain yang diperbarui">
        Flowstep menerapkan perubahan dan menampilkan hasilnya. Jika tidak sepenuhnya benar, kirimkan pesan lanjutan untuk menyempurnakannya lebih lanjut.
      </Step>
    </Steps>

    Penyuntingan dan regenerasi memperbarui layar yang dipilih **di tempat** daripada menambahkan layar baru — saat Flowstep mengalirkan perubahan, elemen yang sedang dikerjakan disorot dengan batas putus-putus hijau. Membuat tanpa layar yang dipilih menambahkan layar baru.
  </Tab>
</Tabs>

## Sunting hanya bagian dari layar

Anda tidak harus menyunting seluruh layar. Pilih sub-elemen — kartu, tombol, label teks — dan prompt chat Anda hanya berlaku untuk itu, meninggalkan bagian layar lainnya tidak berubah.

* Beralih ke mode **Direct selection** dengan **Shift+V** (atau dropdown pada tombol toolbar Select) untuk memilih elemen terdalam di bawah klik Anda. Tekan **V** untuk pemilihan normal, atau tahan **Cmd** (Mac) / **Ctrl** (Windows) untuk menggunakan pemilihan langsung sementara. **Escape** keluar dari pemilihan langsung.
* Pilih sub-elemen di beberapa layar dengan **Cmd+Shift** — satu prompt dapat menyunting hingga 6 layar per pesan.

Ketika elemen gambar dipilih (di luar mode wireframe), panel **Image** muncul di panel properti: pratinjau gambar, tukarkan dengan menyeret file gambar baru ke pratinjau atau klik **Pick image**, atau simpan dengan **Download image**.

## Pulihkan versi sebelumnya

Setiap generasi AI dalam riwayat chat menyimpan hasilnya yang asli. Jika layar telah disunting atau dihapus sejak dibuat, pesan chatnya menunjukkan tombol **Restore** — **Restore original** untuk mengembalikan perubahan, atau **Restore** / **Restore all** untuk membawa kembali layar yang dihapus. Gunakan untuk kembali ke status yang diketahui baik setelah penyuntingan ke arah yang salah.

Arahkan kursor di atas pesan apa pun di panel chat untuk melihat kapan pesan itu dikirim. Pesan baru menunjukkan waktu; yang lebih lama menunjukkan berapa lama yang lalu (misalnya, "1 hari lalu"), dengan tanggal dan waktu lengkap di tooltip.

## Tindakan sekali klik

<Frame>
  <img src="https://mintcdn.com/flowstep/iVYFuG-E2bJvmdDE/images/Screenshot-2026-05-06-at-14.29.34.png?fit=max&auto=format&n=iVYFuG-E2bJvmdDE&q=85&s=52e0f38e4c4506adbecdccc7a95be652" alt="Screenshot 2026 05 06 At 14 29 34" width="2436" height="1528" data-path="images/Screenshot-2026-05-06-at-14.29.34.png" />
</Frame>

Selain penyuntingan langsung, Anda dapat meminta Flowstep menjelajahi alternatif:

* **Try again from scratch** — minta Flowstep menghasilkan versi segar dari layar saat ini dengan tata letak atau arah visual yang berbeda.
* **Show the next screen** — minta Flowstep menghasilkan apa yang logis berikutnya dalam alur pengguna.
* **Make it pretty** — sesuaikan jarak, penyelarasan, dan warna di seluruh desain. Tata letak tetap sama.

Opsi ini memungkinkan Anda melakukan iterasi dengan cepat tanpa harus menulis prompt setiap kali.

## Melakukan iterasi untuk penyempurnaan

Desain jarang sempurna pada percobaan pertama. Gunakan penyuntingan berbasis chat untuk setiap putaran umpan balik — jelaskan apa yang berfungsi dan apa yang tidak, dan Flowstep menyesuaikan dari sana. Tidak ada batas berapa kali Anda dapat melakukan iterasi pada layar.

<Tip>
  Ketika melakukan iterasi melalui chat, referensikan elemen spesifik berdasarkan nama atau lokasi untuk mendapatkan hasil yang lebih akurat. Misalnya: "Pindahkan tombol call-to-action ke bagian bawah layar dan buat lebar penuh" lebih efektif daripada "perbaiki tombol."
</Tip>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.