Prototyping library

Who can do it: All users
Which plans: All plans
Which platforms: Browser, Desktop, Mobile

Create prototypes right on the board using the Prototyping library. The library includes UI elements and icons that you can use to create interactive prototypes, alone or in conjunction with the Create with AI Prototype feature.

✏️ The Prototyping library replaces the Wireframe library, which will be deprecated later this year. Until then, the Wireframe library can be accessed via the Wireframes tab within the Prototyping library.

Access the Prototyping library

1. Click the Media, Tools and Integrations () icon.
2. Search for Prototyping.
3. Select the Prototyping search result.
4. The Prototyping panel will open with tabs for UI elements and Icons.

Design a prototype

1. Select a Screen from the UI elements panel and click anywhere on the board to place it.
2. Drag and drop other UI elements or Icons onto the Screen.
3. If designing a multi-screen prototype, add Connector lines to add interactivity between screens (viewable in Preview):
   1. Click on a UI element you want to connect to a different screen.
   2. Click and drag the Connector line icon from the UI element to the screen you want to connect to.

Change UI element states

Some UI elements have options for their state in the prototype, such as checking or unchecking a checkbox. To access these states:

1. Click on the UI element you want to change settings on.
   The context menu appears.
2. In the context menu, click on the State dropdown.
3. Select the desired state.

Change element styles

To change the color or font of a UI element:

1. Click on the element you want to edit.
   The context menu appears.
2. Depending on the element, you’ll be given the option to change the background color, font, font size, and/or font color.

Preview a prototype

To view the interactive preview of your prototype:

1. Select one of the prototype screens.
   The context menu appears.
2. Click Preview.
   The preview will load.
3. You can click on elements within the prototype to see their interactions—created with Connector lines—or click on the arrows to navigate between screens.

FAQ