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

# Editează și itera pe design-urile Flowstep prin chat sau canvas

> Rafinează orice ecran generat de Flowstep prin editare vizuală manuală sau prompt-uri bazate pe chat — itera de câte ori trebuie până când design-ul este corect.

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

Design-urile Flowstep sunt complet editabile după generare. Nu ești blocat cu ceea ce produce AI-ul la început — poți ajusta vizual-urile direct în editor, folosi chat pentru a descrie schimbări în limbaj natural, sau cere Flowstep să genereze variații și ecrane noi. Folosește oricare metodă se potrivește schimbării pe care vrei să o faci.

## Două moduri de editare

<Tabs>
  <Tab title="Editare vizuală manuală">
    Fă schimbări direct pe canvas selectând și modificând elemente. Această metodă funcționează cel mai bine pentru ajustări precise — mutarea unei componente, schimbarea unei culori, actualizarea unei etichete sau reglarea spațierii.

    <Steps>
      <Step title="Selectează elementul pe care vrei să-l schimbi">
        Dă clic pe orice componentă sau strat din design pentru a-l selecta.
      </Step>

      <Step title="Fă schimbările tale">
        Folosește controalele editorului pentru a ajusta proprietăți cum ar fi culoare, dimensiune, poziție sau conținut text.
      </Step>

      <Step title="Revizuiește rezultatul">
        Schimbările tale se aplică imediat pe canvas. Continuă editarea sau treci la ecranul următor.
      </Step>
    </Steps>
  </Tab>

  <Tab title="Editare bazată pe chat">
    Descrie schimbarea pe care o vrei în limbaj natural și Flowstep actualizează design-ul pentru tine. Această metodă este mai rapidă pentru schimbări largi sau structurale — ajustarea aspectului, regândirea unei secțiuni sau aplicarea unei direcții de stil.

    <Steps>
      <Step title="Deschide panoul de chat">
        Selectează ecranul pe care vrei să-l editezi, apoi deschide intrarea de chat.
      </Step>

      <Step title="Descrie schimbarea ta">
        Tastează ceea ce vrei să actualizeze Flowstep. Fi specific despre ceea ce ar trebui să se schimbe și de ce, dacă ajută.
      </Step>

      <Step title="Revizuiește design-ul actualizat">
        Flowstep aplică schimbarea și ți-o arată rezultatul. Dacă nu este tocmai corect, trimite un mesaj de urmărire pentru a rafina mai departe.
      </Step>
    </Steps>

    Editările și regenerările actualizează ecranul selectat **in place** mai degrabă decât adăugând un nou ecran — în timp ce Flowstep transmite schimbarea, elementul pe care lucrează în prezent este evidențiat cu o margine punctată verde. Generarea fără a selecta un ecran adaugă în schimb un nou ecran.
  </Tab>
</Tabs>

## Editează doar o parte a unui ecran

Nu trebuie să editezi întregi ecrane. Selectează un sub-element — o carte, un buton, o etichetă text — și prompt-ul tău de chat se aplică doar acestuia, lăsând restul ecranului neatins.

* Comută la modul **Direct selection** cu **Shift+V** (sau meniu dropdown pe butonul bara de instrumente Select) pentru a selecta elementul cel mai adânc de sub clic. Apasă **V** pentru selecție normală, sau ține **Cmd** (Mac) / **Ctrl** (Windows) pentru a folosi selecția directă temporar. **Escape** iese din selecția directă.
* Selectează sub-elemente pe mai multe ecrane cu **Cmd+Shift** — un singur prompt poate edita până la 6 ecrane per mesaj.

Când un element de imagine este selectat (în afara modului wireframe), apare un panou **Image** în panoul proprietăților: previzualizează imaginea, schimbă-o prin tragerea unui nou fișier de imagine pe previzualizare sau dând clic pe **Pick image**, sau salveaz-o cu **Download image**.

## Restaurează o versiune anterioară

Fiecare generare AI din istoricul chat-ului păstrează rezultatul original. Dacă un ecran a fost editat sau șters de când a fost generat, mesajul de chat arată un buton **Restore** — **Restore original** pentru a reveni la editări, sau **Restore** / **Restore all** pentru a readuce ecrane șterse. Folosește-l pentru a reveni la o stare cunoscută bună după ce o editare merge în direcția greșită.

## Acțiuni cu un clic

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

Dincolo de editările directe, poți cere Flowstep să exploreze alternative:

* **Try again from scratch** — cere Flowstep să producă o versiune proaspătă a ecranului actual cu un aspect diferit sau direcție vizuală.
* **Show the next screen** — cere Flowstep să genereze ceea ce vine logic în continuare în fluxul utilizatorului.
* **Make it pretty** — ajustează spațierea, alinierea și culorile din design. Aspectul rămâne același.

Aceste opțiuni te lasă să itera rapid fără a fi nevoie să scrii un prompt de fiecare dată.

## Iterarea pentru a rafina

Design-ul rareori aterizează perfect la prima încercare. Folosește editarea bazată pe chat pentru fiecare rundă de feedback — descrie ceea ce funcționează și ceea ce nu, și Flowstep se ajustează de acolo. Nu există limită a câte ori poți itera pe un ecran.

<Tip>
  Când iteri prin chat, fă referință la elemente specifice după nume sau locație pentru a obține rezultate mai precise. De exemplu: "Mută butonul call-to-action la fundul ecranului și fă-l full-width" este mai eficient decât "fix butonul."
</Tip>