Getting started with wireframes
Here's a quick start guide to help you get the most out of Whimsical wireframes.
Entering and exiting the wireframe mode
There are three ways you can enter the wireframe mode:
- Click the wireframe icon in the toolbar
- Use the shortcut
W - Use the All tools menu (➕ sign in the toolbar) to find and enable the wireframe mode. The All tools menu can also be accessed with the shortcut
/
To exit the wireframe mode, select the ⬅️ arrow or use the keyboard shortcut Q .
Building wireframes
Whimsical has a variety of frames and elements to choose from to build your wireframes. To create a frame, you can use the following actions:
- Select the Frames option by selecting it from the toolbar
- Use the keyboard shortcut
F
To create a wireframe element, you can use the following actions:
- Select the Elements option by selecting it from the toolbar
- Use the keyboard shortcut
E
It’s that easy!
Tip: Build out entire flows using Whimsical frames and elements combined with other tools such as flowchart shapes, connectors, and icons. Check out this template for inspiration.
Wireframe characteristics
Most frames and elements have their own options in the contextual toolbar that appears when you select them. We’ve built in unique characteristics in the frames and elements, 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.
Tip: Check out this template for a quick look at all the frames and elements.
Wondering why the wireframe colours are toned down? It's intentional!
Next up! Getting Started with docs