What is a wireframe and how to make one: step by step

Step 1

Understand what a wireframe is

A wireframe is a simplified diagram of a screen or page. Figma describes it as the bare-bones outline of a future product: screen layouts, navigation, core components and interactive elements. Early on, photos and videos are replaced by simple boxes and text by placeholders. The point is to focus on what is on the screen and in what order, not on how it looks. Figma distinguishes three levels of fidelity:

• •low fidelity: structure, navigation, the order of blocks, even hand-drawn;
• •mid fidelity: annotations and real content, key interactions mapped out;
• •high fidelity: looks like an early mockup, with fonts, colors and a logo, to capture the product's look and feel for user testing.

💡 Don't mix up the terms: a wireframe shows structure, a mockup shows the final look with colors and fonts, a prototype is a clickable version you can “use”.

Step 2

Prepare the content before you draw

A wireframe without content is just gray boxes placed at random. Before drawing, write down four things. For practice, take a specific task, such as a page for booking a gym class or an order screen in a café app:

• •the screen's goal in one sentence: what the person should do here;
• •a content list: every piece of text, button, field and image that must be on the screen, for now just in a column;
• •priority: number the list from most to least important. Whatever is at the top of the list should be noticeable and near the top of the screen;
• •where the person comes from and where they go next, so the screen doesn't hang in the air.

Step 3

Your first wireframe: on paper

Paper and a pen are the fastest tool: nothing distracts you with alignment and fonts. Draw a rectangle the size of a phone or a browser window and place the content from your list inside it. The main rule is several versions, not one “right” answer:

• •draw three different versions of the same screen, no more than 10 minutes each;
• •mark text with lines, images with a crossed box, buttons with a labeled frame;
• •write real headings and button labels in words: they're what shows whether the screen is clear;
• •pick the best version or assemble one from parts of several.

💡 NN/g explains why this pays off: you can test a paper prototype with people at very low cost and fix problems before anyone spends time building it.

Step 4

Move the wireframe into Figma

Once the structure is clear, make a clean version in Figma or on the FigJam online whiteboard. Stick to grays and one or two fonts so nobody starts discussing colors instead of structure.

• •create a frame of the right size and add a column layout guide (called layout grid before May 2025) and align blocks to it;
• •turn repeating elements into components: a button, a card, a field. Later they're easy to “dress” in the final design;
• •add annotations at the side: what happens on tap, where the data comes from, what shows if the list is empty;
• •for an app with several screens, link them with arrows: NN/g calls this format a wireflow, wireframes combined with a flow diagram. A plain wireframe shows layout well but interaction poorly.

Step 5

Test the wireframe and move on

You can test a wireframe already. It doesn't have to be clickable: NN/g describes static prototypes where the person “taps” a printout and you, playing the “computer”, put down the next screen. Give a task to two or three people and watch where they hesitate.

• •make the task specific: “book a class on Thursday at 7 pm”, not “see what you think”;
• •don't explain the screen until the person has tried on their own;
• •write down where they stopped, what they looked for and what they misunderstood;
• •fix the structure and only then move on to colors, fonts and the final mockup.

💡 Keep every version: paper sketches, the wireframe and the final screen side by side make a strong part of a portfolio case study. And show the wireframe in the community before the final: the question “what's the main thing here?” quickly reveals weak spots.