A wireframe is a simple, mostly grey sketch of a screen that shows what goes on it and where, without colours, images or final text. It sits between the structure you planned in information architecture and the clickable prototype you will build in the next lesson. Because wireframing is quick, you can explore several layouts and throw away the weak ones without regret.
Why start with wireframing?
- Discussions stay on layout and content priorities, not on whether the blue is “too blue”.
- Changes take minutes, not days.
- Developers and stakeholders see the scope early.
- You find missing content (an empty state, an error message) before visual design starts.
Fidelity levels
| Level | Looks like | Use it when |
|---|---|---|
| Low fidelity | Hand sketches or boxes; placeholder lines for text | Exploring many ideas quickly, early in a project |
| Mid fidelity | Clean grey boxes in Figma, real headings and labels, correct spacing | Agreeing on layout and content with the team |
| High fidelity (mockup) | Final colours, type, images and icons | Visual design and developer hand-off |
The blog post Wireframe vs mockup vs prototype explains these terms in more depth. In this lesson we focus on low and mid fidelity.
What to include
- Real headings and button labels, even if body text is a placeholder. Words shape layout.
- The main action on each screen, clearly marked.
- Navigation (top bar, tab bar, back button).
- Placeholders for images – a box with a cross is the usual convention.
- States that are easy to forget: empty, loading, error and success.
- Short notes beside the frame explaining behaviour, such as “list sorted by departure time”.
Watch out: Avoid “lorem ipsum” for headings and buttons. A button that says “Proceed to secure payment” needs much more room than “Pay”. Write realistic content early or your layout will break later.
Wireframing a screen in Figma, step by step
Let us wireframe the search results screen of a bus-ticket app.
- Press F (Frame tool) and choose a mobile preset from the right panel, for example a 360 × 800 Android frame.
- Add a top bar with the route (“Chennai → Madurai, Fri 14 Nov”) and an Edit link.
- Draw one bus result card: operator name, departure and arrival times, duration, seats left, fare, and a “View seats” button.
- Select the card’s contents and press Shift + A to add Auto layout. Set vertical direction, a gap of 8 and padding of 16.
- Turn the card into a component (Ctrl + Alt + K on Windows, Cmd + Option + K on Mac) so every copy updates together.
- Place several instances inside a vertical Auto layout list. Add filter chips (AC, Sleeper, Departure time) above it.
- Duplicate the frame to sketch the empty state (“No buses found – try another date”) and a loading state.
Tip: Auto layout behaves much like CSS Flexbox: direction, gap, padding and alignment. Learning one helps you understand the other. The Figma Auto layout guide on the blog goes further.
Spacing with an 8-point system
Even in grey wireframes, consistent spacing makes screens easier to read. Many teams use an 8-point system: every margin, padding and gap is a multiple of 8 (8, 16, 24, 32, 48…), with 4 used for very tight spots such as between an icon and its label. A small set of values means fewer random decisions, cleaner layouts and easier hand-off, because developers can map these values to a spacing scale in CSS.
| Value | Typical use |
|---|---|
| 4 | Icon to text, tight label spacing |
| 8 | Between related items inside a card |
| 16 | Card padding, screen side margins on mobile |
| 24–32 | Between separate groups or sections |
| 48+ | Between major page sections on desktop |
Common wireframing mistakes
- Adding colour and photos too early, which pulls feedback towards looks.
- Designing only the happy path and forgetting errors and empty lists.
- Drawing desktop only, when most users will be on a phone.
- Making one version and defending it, instead of sketching two or three alternatives to compare.
Annotating and reviewing
Before moving on, walk through each wireframe with your persona in mind. Can Karthik see the fare and seats left without opening the card? Is the main action obvious? Add sticky-note comments for anything a developer must know. Then link the frames together – which is exactly what we do next in Prototyping in Figma.