Skip to main content

Iterate

After generating your initial storyboard, you can refine and improve your screens in two ways: editing visually on the canvas and using AI prompts. Each method is useful depending on the type of change you want to make.

Edit Visually​

This is useful when you want precise control over layout and structure. It makes it easy to quickly add or adjust elements exactly where you want them.

To start, click on any UI element in the canvas. The selected element will be highlighted, and small dots will appear around it. You can click any of these dots to add a new UI element at that position. When you click a dot, a selector pop-up opens, allowing you to choose and insert a new element.

You can also rearrange elements using drag and drop. Simply select an element and move it to a new position within the layout.

Use Properties Panel​

The Properties Panel allows you to make precise adjustments to any selected widget. When you click on an element in the canvas, its editable properties appear on the right side. From there, you can modify properties such as text content, typography settings, spacing, alignment, colors, borders, and other styling attributes. This gives you direct control over how each element looks and behaves without needing to regenerate the entire screen.

Unlike AI-driven changes, edits made here are exact and predictable, making it ideal for polishing the design once the overall layout and structure are already in place.

Use AI Prompt​

This method is best for structural, layout, or multi-element changes. To make a change using AI Prompt:

  1. Click on the screen (frame) you want to update from the canvas or Frames panel.
  2. Use the prompt bar at the bottom to clearly describe what you want to modify.
  3. If you're not satisfied with the result, use the regenerate option to explore a new variation of the same instruction.
  4. You can click directly on a widget. The selected widget will automatically be added to the prompt bar as context for your next instruction, allowing more precise AI updates.

You can also select a page and ask the AI to generate variations of it. This helps you quickly explore different design directions.

Edit Theme​

Editing a Theme allows you to modify the global design system of your entire storyboard at once. Instead of adjusting individual widgets, you can change core styling elements such as brand colors, typography, spacing, corner radius, and text scaling. Any updates made in the Theme Editor automatically apply across all screens, ensuring visual consistency without manual updates on each page.