How to Create a Wireframe in Figma: A Beginner’s Walkthrough
If you have never opened Figma before and you want to create your first wireframe, this guide is for you. Most tutorials online jump straight into advanced features or push AI generators. Here at dric.be, we prefer the old-school approach: build it with your own hands so you actually understand what a wireframe is and why designers use it.
In the next 60 minutes, you will build a low-fidelity wireframe for a simple mobile app landing screen using frames, components, and auto-layout. No prior design experience required. There’s a fuller breakdown if you want the detail.
What You Will Build
A clean, grayscale wireframe of a mobile app home screen containing:
- A top navigation bar
- A hero section with a headline and a call-to-action button
- A list of three feature cards
- A bottom tab bar
By the end, you will know how to structure a Figma file properly and reuse elements like a real product designer.
Before You Start: Set Up Figma
- Go to figma.com and create a free account.
- Choose the browser version (no install needed) or download the desktop app.
- Click New design file from your dashboard.
You will land on an empty canvas. Take a breath, it looks intimidating but you only need five tools to build a wireframe.
The Only Tools You Need Today
| Tool | Shortcut | Purpose |
|---|---|---|
| Move | V | Select and move objects |
| Frame | F | Create screens and containers |
| Rectangle | R | Draw placeholders |
| Text | T | Add labels and headlines |
| Hand | H | Pan around the canvas |
Step 1: Create Your First Frame
A frame in Figma is like an artboard, it represents one screen.
- Press F on your keyboard.
- Look at the right panel and pick Phone > iPhone 16 (or any mobile preset).
- A blank white frame appears on the canvas. Rename it to Home Screen by double-clicking its label.
Pro tip: Wireframes should stay grayscale. Resist the urge to add color at this stage.
Step 2: Build the Top Navigation Bar
- Press R and draw a rectangle across the top of your frame, about 60px tall.
- Set the fill to a light gray (#EEEEEE) in the right panel.
- Press T and type your app name (for example “Dric App”). Center it inside the rectangle.
- Select both elements, right-click and choose Add auto layout (shortcut: Shift + A).
Auto-layout is Figma’s secret weapon. It makes elements adjust automatically when you add content or resize them. A comparable breakdown sits on geeksforgeeks.org.
Step 3: Design the Hero Section with Auto-Layout
This is where things get powerful. Instead of manually spacing everything, we will let Figma handle it.
- Press T and type a headline like “Welcome to your new workspace”.
- Below it, add a shorter subtitle text.
- Draw a rectangle beneath the text for a button, then add a text layer “Get Started” on top.
- Select all three elements (headline, subtitle, button) and press Shift + A.
- In the right panel, set the direction to vertical, spacing to 16px, and padding to 24px.
Move the whole group around. Notice how everything stays perfectly aligned. That is auto-layout doing the work.
Step 4: Turn the Feature Card into a Component
You will need three feature cards. Instead of copy-pasting, we will create a component, a reusable master element.
- Draw a rectangle roughly 320px wide and 80px tall (this will be a card).
- Inside it, add a small square (icon placeholder) on the left and two text lines on the right (title and description).
- Select all three inner elements and apply auto-layout (Shift + A), set direction to horizontal.
- Select the entire card, right-click and choose Create component (or press Ctrl/Cmd + Alt + K).
- The card now has a purple diamond icon, meaning it is a master component.
Now copy this component twice by holding Alt and dragging. You have three instances. If you edit the master, all instances update automatically. teamtreehouse.com makes the same point with more data.
Step 5: Stack Everything with Auto-Layout
- Select the three feature cards.
- Press Shift + A to wrap them in a vertical auto-layout container.
- Set the spacing between them to 12px.
Now select your entire screen content (nav bar, hero, cards) and wrap the whole thing in one final auto-layout. Your wireframe now behaves like a responsive layout.
Step 6: Add the Bottom Tab Bar
- At the bottom of the frame, draw a rectangle 60px tall.
- Add four small squares inside it to represent icons.
- Select all icons and apply horizontal auto-layout with equal spacing.
Congratulations, your first Figma wireframe is done.
Best Practices for Low-Fidelity Wireframes
- Stay grayscale: Colors distract from structure discussions.
- Use boxes for images: A rectangle with an X inside is universally understood.
- Limit yourself to two fonts: One for headlines, one for body text.
- Avoid pixel perfection: Wireframes are about layout, not polish.
- Name your layers: Future you will thank present you.
Common Beginner Mistakes to Avoid
| Mistake | What to do instead |
|---|---|
| Adding color and shadows too early | Keep it black, white, and gray |
| Not using frames | Every screen should live inside a frame |
| Copy-pasting instead of components | Turn repeating elements into components |
| Ignoring auto-layout | Use it from day one, even for simple stacks |
| Working without a grid | Enable layout grids in the right panel |
What to Do Next
Once you are comfortable with these basics, try these next steps:
- Duplicate your frame and design a second screen (like a login page).
- Connect them using Figma’s Prototype tab to simulate navigation.
- Explore the free Figma Community for wireframe kits you can drag into your file.
- Try converting your low-fidelity wireframe into a high-fidelity mockup by adding real colors, typography, and imagery.
FAQ
Is Figma good for beginners?
Yes. Figma runs in the browser, is free for individuals, and has a gentle learning curve if you start with wireframing before jumping into full UI design. A version of this shows up on nowsocial.fr.
Should I use an AI wireframe generator instead?
AI tools inside Figma can generate wireframes quickly, but building your first one manually helps you understand structure, spacing, and hierarchy. Learn the fundamentals first, then use AI to accelerate later.
What is the difference between a frame and a group in Figma?
A frame is a container that supports auto-layout, constraints, and prototyping. A group is just a visual bundle of layers. For wireframing, always prefer frames.
How long does it take to learn Figma wireframing?
Most beginners can build a functional wireframe within one hour, as demonstrated in this tutorial. Mastering auto-layout and components typically takes one to two weeks of regular practice.
Can I share my Figma wireframe with clients?
Yes. Click Share in the top right corner and generate a view-only link. Anyone with the link can inspect your wireframe without needing a Figma account.
Do I need a paid Figma plan to make wireframes?
No. The free plan allows unlimited personal files and up to three team files, which is more than enough for learning and small projects.
Ready to go further? Follow the dric.be blog for more practical UX and design tutorials aimed at makers who prefer building over reading theory.
