Getting started with wireframes

Here's a quick start guide to help you get the most out of Whimsical wireframes.

Entering and exiting wireframe modeLink to this section

There are three ways to enter wireframe mode:

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

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

Building wireframesLink to this section

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

Create a wireframe element, from the Elements option in the toolbar, or with the keyboard shortcut E:

It’s that easy!

Pro tip: Build out entire flows using Whimsical frames and elements combined with other tools like flowchart shapes, connectors, and icons. Check out this template for inspiration.

Wireframe characteristicsLink to this section

Most frames and elements have their own options in the contextbar 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 colors are toned down? This article explains. 👌


Related articles

Written by:

  • Jack Jenkins

    Jack Jenkins