Build a screen with widgets

Open a Wireframe for editing, drag widgets from the widget library onto the screen and change their text, settings and layers.

Updated 20 Oct 20262 min read

A wireframe screen is made of widgets: buttons, text, inputs, lists, navigation bars, charts and more. You add and change them in edit mode, right on the board.

Open a screen for editing

A selected Wireframe with its toolbar, with Edit wireframe and Library numbered

Select the Wireframe.
Click Edit wireframe (1), or click Library (2) to open the widget library straight away.

The board toolbar is replaced by the wireframe toolbar while you edit.

A banking app screen in edit mode with the wireframe toolbar at the bottom, with Widget library and the quick widget tools numbered

Widget library (1): opens the full list of widgets. Press L.
Quick tools (2): Text (T), Button (B), Text input (I), Image box (M) and Box (X). Click a tool, then click or drag on the screen.

Click Exit wireframe (the X at the end of the toolbar) when you are done.

Generate, modify and restyle while you edit

The wireframe toolbar also holds the screen's AI and style menus, so you can rework the whole screen with AI or switch its look without leaving edit mode.

A community garden app screen in edit mode, with AI, Change style and Enter Focus Mode numbered on the wireframe toolbar

AI (1): opens the screen's AI menu, with Generate new, Modify with AI, Create new screen, Fill images with AI and more. Its prompt box opens just above the toolbar.
Change style (2): switches the screen between styles such as Sketchy, Hi-fi and Liquid glass, and sets dark mode, a brand colour and a font. See Change a screen's style.
Enter Focus Mode (3): gives the screen the whole view.

While AI works on the screen, the toolbar shows Generating… in place of its tools. Exit wireframe stays available.

Clicking AI on the wireframe toolbar, choosing Modify with AI and asking for a rain forecast card on a community garden app, which appears under the greeting with a Skip today's watering button

Add widgets from the library

Dragging the Button widget from the widget library onto the bottom of a banking app home screen

Open the widget library.
Find a widget by browsing, or type in Search widgets.
Drag it onto the screen, or click it to drop it inside the screen.

The widget library with Change category and Search widgets numbered

Widgets are grouped in categories (1), such as Layout, Controls, Navigation, Data, Blocks, Mobile, iOS and Android. Click Change category to switch. Search widgets (2) searches every category.

Click a widget to select it. A small toolbar opens above it:

Edit text: double-click the widget, or use the text button, and type.
Properties: press Enter or click the settings button to open Widget Settings, with sections such as Content, Style, Typography, Arrange and Layout. Tables and charts also get a Data editor, where you can paste cells from a spreadsheet.
Duplicate, Delete, Bring forward and Send backward.

Right-click a widget for more: Group, Lock, Hide, Align, Distribute and Put inside another widget.

Find widgets in Layers

Click Layers in the wireframe toolbar, or press Alt+1, to see every widget on the screen as a list. Use Find layers to locate one by name, and click a layer to select its widget.

To keep widgets lined up as you edit, see Stack widgets with spacing and padding. To change the look of the whole screen, see Change a screen's style.

Was this page helpful?