Naar hoofdinhoud gaan
Screenshot 2026 05 06 At 14 25 48
Flowstep-designs zijn volledig bewerkbaar na generatie. Je bent niet vastgesteld op wat de AI eerst produceert — je kunt visuele elementen direct in de editor aanpassen, chat gebruiken om wijzigingen in natuurlijke taal te beschrijven, of Flowstep vragen om variaties en nieuwe schermen te genereren. Gebruik welke methode het beste aansluit bij de wijziging die je wilt aanbrengen.

Twee manieren om te bewerken

Breng wijzigingen rechtstreeks aan op het canvas door elementen te selecteren en aan te passen. Deze methode werkt het beste voor nauwkeurige aanpassingen — een component verplaatsen, een kleur veranderen, een label bijwerken, of de afstand aanpassen.
1

Selecteer het element dat je wilt wijzigen

Klik op een component of laag in je design om deze te selecteren.
2

Breng je wijzigingen aan

Gebruik de editor-besturingselementen om eigenschappen aan te passen, zoals kleur, grootte, positie of tekstinhoud.
3

Controleer het resultaat

Je wijzigingen worden onmiddellijk op het canvas toegepast. Ga door met bewerking of ga naar het volgende scherm.

Bewerk slechts een deel van een scherm

Je hoeft niet alle schermen te bewerken. Selecteer een subelement — een kaart, een knop, een tekstlabel — en je chat-prompt geldt alleen voor dit element, terwijl de rest van het scherm ongewijzigd blijft.
  • Schakel naar de modus Direct selection met Shift+V (of de dropdown in de Select-knop in de werkbalk) om het diepste element onder je klik te selecteren. Druk V voor normale selectie, of houd Cmd (Mac) / Ctrl (Windows) vast om directe selectie tijdelijk te gebruiken. Escape sluit de directe selectie af.
  • Selecteer subelementen over meerdere schermen met Cmd+Shift — één prompt kan tot 6 schermen per bericht bewerken.
Wanneer een afbeeldingselement is geselecteerd (buiten wireframe-modus), verschijnt een Image-paneel in het eigenschappenpaneel: geef een voorbeeld van de afbeelding, vervang deze door een nieuw afbeeldingsbestand naar de preview te slepen of klik op Pick image, of sla het op met Download image.

Elementen kopiëren en plakken

Kopieer een selectie en plak deze waar je ze nodig hebt — in hetzelfde bestand, in een ander bestand, of in een ander browsertabblad, omdat kopieën naar het klembord van je systeem gaan.
  • Kopiëren met Cmd+C (Mac) / Ctrl+C (Windows), knippen met Cmd+X / Ctrl+X, en plakken met Cmd+V / Ctrl+V.
  • Dupliceer een selectie op dezelfde plek met Cmd+D / Ctrl+D.
  • Geplakte elementen komen iets verschoven ten opzichte van de originelen, zodat ze die niet bedekken.
Deze sneltoetsen werken op de geselecteerde elementen; terwijl je tekst bewerkt, vallen ze terug op gewoon tekst kopiëren en plakken.

Schermen op het canvas een naam geven

Elk scherm toont zijn naam op een label erboven op het canvas. Een scherm dat je nog geen naam hebt gegeven, toont Screen.
  • Dubbelklik op het label om het scherm te hernoemen, en druk vervolgens op Enter om op te slaan — klikken buiten het label slaat ook op. Namen mogen maximaal 100 tekens bevatten.
  • Klik één keer op het label om het scherm te selecteren, en sleep het daarna over het canvas om het te verplaatsen.

Dekking, mengmodus en hoeken aanpassen

Selecteer een element om het uiterlijk ervan fijn af te stellen in het eigenschappenpaneel:
  • Opacity (dekking) — stel in hoe transparant het element is, van 0 tot 100%. Hetzelfde paneel bevat een mengmodus (Normal, Multiply, Screen, Overlay, en meer) die bepaalt hoe het element zich mengt met wat er achter ligt.
  • Corners (hoeken) — rond de hoeken van het element af. Stel één Corner radius (hoekradius) in voor alle vier, of schakel Per corner (per hoek) in om de linkerbovenhoek, rechterbovenhoek, rechteronderhoek en linkeronderhoek elk een eigen radius te geven. Elke waarde kan een Token uit je thema zijn of een Custom-bedrag.

Inzoomen tot op de pixel

Zoom het canvas in tot 25.600% om afstand en uitlijning nauwkeurig te controleren. Boven 200% verschijnen pixel-uitgelijnde rasterlijnen. Hoe verder je inzoomt, hoe zichtbaarder ze worden, zodat je elementen precies kunt uitlijnen.

Een vorige versie herstellen

Elke AI-generatie in de chatgeschiedenis behoudt het oorspronkelijke resultaat. Als een scherm sinds de generatie is bewerkt of verwijderd, toont het chatbericht een Restore-knop — Restore original om bewerkingen ongedaan te maken, of Restore / Restore all om verwijderde schermen terug te brengen. Gebruik dit om na een mislukte bewerking terug te gaan naar een bekende goede staat. Beweeg over een willekeurig bericht in het chatpaneel om te zien wanneer het is verzonden. Recente berichten tonen het tijdstip; oudere tonen hoe lang geleden ze zijn verzonden (bijvoorbeeld “1 dag geleden”), met de volledige datum en tijd in een tooltip.

One-click acties

Screenshot 2026 05 06 At 14 29 34
Naast directe bewerkingen kun je Flowstep vragen om alternatieven te verkennen:
  • Try again from scratch — vraag Flowstep om een frisse versie van het huidige scherm met een ander ontwerp of visuele richting te produceren.
  • Show the next screen — vraag Flowstep om te genereren wat logischerwijs volgt in de user flow.
  • Make it pretty — pas afstand, uitlijning en kleuren over het design aan. De lay-out blijft hetzelfde.
Met deze opties kun je snel itereren zonder telkens een prompt te hoeven schrijven.

Herhalen om af te stemmen

Ontwerp slaagt zelden perfect de eerste keer. Gebruik chat-gebaseerde bewerking voor elke feedback-ronde — beschrijf wat werkt en wat niet, en Flowstep stelt zich daarop aan. Er is geen limiet aan hoe vaak je een scherm kunt herhalen.
Bij het herhalen via chat verwijst je naar specifieke elementen op naam of locatie voor nauwkeurigere resultaten. Bijvoorbeeld: “Verplaats de call-to-action-knop naar de onderkant van het scherm en maak deze volledig breed” is effectiever dan “repareer de knop.”