5. Editing your app in the Design Tab
To make changes using AI:
Open the Design tab and select a screen via the select dropdown at top left above the preview.
Open the AI panel (top right in the top toolbar) of the screen editor if it's not already open.
Enter a new prompt describing the changes you want (e.g. "Add a search bar at the top", "Change layout to two columns", "Include a button to export data").
The AI will regenerate that screen's layout and components based on your instruction. You can undo or adjust as needed.
To make manual changes:
With the Design tab open and the correct screen selected, switch the Preview panel to Edit mode via the toggle control (top right).
You can select items either directly in the preview, or via the Layers / Elements panel on the left - they will be selected.
Use the controls in the Properties panel on the right to make changes - the options available here will depend on the nature of the element you selected.
💡 Tip: You can mix AI edits with manual design edits at any time.
You can insert new components into a screen:
With the Design tab open, the correct screen selected and the Preview panel in Edit mode, select the area or component on the screen where you want to insert a new item
Select the Assets tab in the left panel
Assets (pre-built Buzzy components) are listed by type/category (you can also search)
Select an asset, and a preview window opens - you can preview the component (and select the theme to preview it in)
To use the component, choose Before, After, or Inside - this will insert it relative to the area you currently have selected in the Preview panel.
For more examples and help, visit the Buzzy AI Prompt Guide.
Last updated