Whimsical's wireframing tool lets you quickly sketch out user interfaces, prototype flows, and communicate design ideas. It's built for product managers, designers, and engineers who need to move fast.

Entering and exiting wireframe modeCopied!Link to this section

There are three ways to enter wireframe mode:

1. Click the wireframe icon in the toolbar
2. Press the keyboard shortcut W
3. Open the All tools menu (the ➕ sign in the toolbar) - The All tools menu can also be accessed with the shortcut /

To exit wireframe mode, select the back arrow or use the keyboard shortcut Q :

Building wireframesCopied!Link to this section

Whimsical has a variety of frames and components to choose from to build your wireframes. Choose a frame from the Frames option in the toolbar, or use the keyboard shortcut F:

Create a wireframe component from the Components option in the toolbar, or with the keyboard shortcut E.

Wireframe characteristicsCopied!Link to this section

Most frames and components have their own options in the context bar that appears when you select them. We’ve built in unique characteristics in the frames and components, so you don’t have to do additional work.

For example:

• Switching the status bar and keyboard on and off on a phone frame.
• Changing the state of a button.
• Adding and editing menu options and tabs.
• Swapping "Lorem ipsum" placeholder text with block text.

Wondering why the wireframe colors are toned down? This article explains. 👌