# Getting started with wireframes

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

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 mode

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 wireframes

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 characteristics

Most frames and components have their own options in the context bar that appears when you select them. We’ve built in [unique characteristics](https://whimsical.com/blog/fast-collaborative-wireframing-app?ref=hc) 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.

**Tip:** Check out [this template](https://whimsical.com/wireframe-elements-Ft4RAtBFHfYFa8da1weDuV?ref=hc) for a quick look at all the frames and elements.

Wondering why the wireframe colors are toned down? [This article explains](https://whimsical.com/learn/faqs/colors-toned-down). 👌

* * *

## Summary

1. [Getting started with wireframes](https://whimsical.com/learn/get-started/wireframes)
2. [Entering and exiting wireframe mode](https://whimsical.com/learn/get-started/wireframes#entering-and-exiting-wireframe-mode)
3. [Building wireframes](https://whimsical.com/learn/get-started/wireframes#building-wireframes)
4. [Wireframe characteristics](https://whimsical.com/learn/get-started/wireframes#wireframe-characteristics)