Skip to main content
Screenshot 2026 05 06 At 14 25 48
Flowstep designs are fully editable after generation. You are not locked into what the AI first produces—you can adjust visuals directly in the editor, use chat to describe changes in plain language, or ask Flowstep to generate variations and new screens. Use whichever method fits the change you want to make.

​
Two ways to edit

Make changes directly on the canvas by selecting and modifying elements. This method works best for precise adjustments—moving a component, changing a color, updating a label, or tweaking spacing.
1

Select the element you want to change

Click on any component or layer in your design to select it.
2

Make your changes

Use the editor controls to adjust properties such as color, size, position, or text content.
3

Review the result

Your changes apply immediately on the canvas. Continue editing or move on to the next screen.

​
Edit just part of a screen

You don’t have to edit whole screens. Select a sub-element — a card, a button, a text label — and your chat prompt applies only to it, leaving the rest of the screen untouched.
  • Switch to Direct selection mode with Shift+V (or the dropdown on the Select toolbar button) to select the deepest element under your click. Press V for normal selection, or hold Cmd (Mac) / Ctrl (Windows) to use direct selection temporarily. Escape exits direct selection.
  • Select sub-elements across multiple screens with Cmd+Shift — a single prompt can edit up to 6 screens per message.
When an image element is selected (outside wireframe mode), an Image panel appears in the property panel: preview the image, swap it by dragging a new image file onto the preview or clicking Pick image, or save it with Download image.

​
Copy and paste elements

Copy a selection and paste it back wherever you need it — in the same file, in another file, or in another browser tab, since copies go to your system clipboard.
  • Copy with Cmd+C (Mac) / Ctrl+C (Windows), cut with Cmd+X / Ctrl+X, and paste with Cmd+V / Ctrl+V.
  • Duplicate a selection in place with Cmd+D / Ctrl+D.
  • Pasted elements land slightly offset from the originals so they don’t cover them.
These shortcuts act on the selected elements; while you’re editing text, they fall back to ordinary text copy and paste.

​
Name screens on the canvas

Every screen shows its name on a label above it on the canvas. A screen you haven’t named yet reads Screen.
  • Double-click the label to rename the screen, then press Enter to save — clicking away saves too. Names can be up to 100 characters.
  • Click the label once to select the screen, then drag to move it around the canvas.

​
Adjust opacity, blend mode, and corners

Select an element to fine-tune its appearance in the property panel:
  • Opacity — set how transparent the element is, from 0 to 100%. The same panel holds a blend mode (Normal, Multiply, Screen, Overlay, and more) that controls how the element mixes with what sits behind it.
  • Corners — round the element’s corners. Set a single Corner radius for all four, or switch on Per corner to give the top-left, top-right, bottom-right, and bottom-left corners their own radius. Each value can be a Token from your theme or a Custom amount.

​
Zoom in to the pixel

Zoom the canvas up to 25,600% to check spacing and alignment closely. Past 200%, pixel-aligned grid lines appear and grow more visible the further you zoom in, so you can line elements up exactly.

​
Restore a previous version

Each AI generation in the chat history keeps its original result. If a screen has been edited or deleted since it was generated, its chat message shows a Restore button — Restore original to revert edits, or Restore / Restore all to bring back deleted screens. Use it to get back to a known-good state after an edit goes in the wrong direction. Hover over any message in the chat panel to see when it was sent. Recent messages show the time; older ones show how long ago they were sent (for example, “1 day ago”), with the full date and time in a tooltip.

​
One-click actions

Screenshot 2026 05 06 At 14 29 34
Beyond direct edits, you can ask Flowstep to explore alternatives:
  • Try again from scratch — ask Flowstep to produce a fresh version of the current screen with a different layout or visual direction.
  • Show the next screen — ask Flowstep to generate what logically comes next in the user flow.
  • Make it pretty — adjust spacing, alignment, and colors across the design. Layout stays the same.
These options let you iterate rapidly without having to write a prompt each time.

​
Iterating to refine

Design rarely lands perfectly on the first attempt. Use chat-based editing for each round of feedback—describe what is working and what is not, and Flowstep adjusts from there. There is no limit to how many times you can iterate on a screen.
When iterating via chat, reference specific elements by name or location to get more accurate results. For example: “Move the call-to-action button to the bottom of the screen and make it full-width” is more effective than “fix the button.”