Wireframe a Mobile App in Figma

Build a low-fidelity mobile app wireframe with icons in Figma.

Introduction

30 Second Summary

Every app you use started as a rough sketch of boxes, labels, and icons on a screen. That sketch is called a wireframe, and it is how designers figure out where things go before anyone writes a single line of code.

In this project, you will build a low-fidelity mobile app wireframe in Figma. You will set up a real device-sized frame, lay out a header, content cards, and a tab bar, then pull in free icons from a plugin to make the whole thing instantly readable.

What You'll Build

By the end, you will have a polished wireframe you could hand to a developer or stakeholder and they would immediately understand the app's structure, navigation, and content hierarchy.

By the end of this project, you'll have:

A mobile wireframe built on a real device frame with a layout grid that keeps every element perfectly aligned.
Free icons from a plugin placed throughout your tab bar and cards, making buttons and navigation recognizable at a glance.
A multi-page Figma file organized with a professional naming structure, separating your wireframe from a reference page.
Secret Mission: Build a second screen and organize both into a complete two-screen user flow.

Are there any prerequisites?

You need a free Figma account (Starter plan). If you have used FigJam before, some of the interface will feel familiar, but no prior Figma Design experience is required.

Before We Start

Before We Start...

Before we dive in, let's lock in what you're about to build and why it matters.

You're going to wireframe a mobile app home screen for an app theme of your choice. Picking your theme now gives every decision in this project a clear purpose.

Set Up Your Figma File and Pages

A blank canvas with no structure leads to messy files that are impossible to navigate later. Professional designers separate wireframe work from reference material so that feedback sessions, handoffs, and future edits stay focused.

In this step, you will create a structured Figma Design file with dedicated pages, add a device-sized frame, and apply a column grid that keeps everything aligned from the start.

In this step, get ready to:

Create a Figma Design file and organize it with two pages.
Add an iPhone 16 frame as your mobile canvas.
Apply a 4-column layout guide for consistent alignment.

Create your Design file and set up pages

Pages in Figma act like separate canvases inside a single file. Using one page for wireframes and another for reference screenshots keeps your workspace tidy as the project grows.

In your Figma home screen, select Drafts in the left sidebar.
Click + Create in the top-right corner and choose Design file from the dropdown.
A new file opens in the editor. Double-click the file name at the top center (it defaults to "Untitled") and rename it to your app name, for example FoodDash Wireframe or RideGo Wireframe.
In the left sidebar, click the current page name to open the page list.
Double-click the default page name and rename it to Wireframes.
Click the + icon next to the page list to add a new page.
Name the new page Reference.
Click Wireframes in the page list to switch back to it.

You should now see two pages listed in the left sidebar: Wireframes (active) and Reference.

What are Pages in Figma?

Each page is its own infinite canvas inside a single file. Designers use pages to separate concerns: one page for active wireframes, another for screenshots, mood boards, or notes.

Pages are available on all Figma plans, including the free Starter plan.

Don't see the page list?

Make sure you are clicking the page name text in the left sidebar, not the Layers tab icon. Clicking the page name itself expands the page list.

Help me find the page list in Figma's left sidebar.

Create an iPhone 16 frame

A frame in Figma is a container with fixed dimensions. Using a device preset ensures your wireframe matches a real phone screen size.

Make sure you are on the Wireframes page.
Press F on your keyboard to activate the Frame tool.
In the right sidebar, a list of frame presets appears. Expand the Phone section.
Click iPhone 16 to place a 390x844 frame on your canvas.

A white rectangle labeled "iPhone 16" appears on your canvas. You can confirm its dimensions (390 x 844) in the right sidebar.

Why iPhone 16?

The iPhone 16 preset uses 390x844 logical pixels, matching the most common current iOS device resolution. Designing at this size means your wireframe translates directly to a real phone screen when previewed.

Don't see the frame presets?

The preset list only appears while the Frame tool is active. Press F again and check the right sidebar. If you accidentally clicked on the canvas first, you may have created an empty custom frame. Delete it (select it and press Delete) then press F to start fresh.

Help me find the iPhone 16 frame preset in Figma.

Add a 4-column layout guide

A layout guide overlays transparent columns or rows on your frame so every element snaps to a consistent grid. A 4-column guide with 16px margins is standard for mobile wireframes.

Click on your iPhone 16 frame to select it. You should see a blue border around it.
In the right sidebar, find the Layout guide section.
Click Add layout guide. A uniform grid appears on your frame by default.
Click the settings icon (the small grid thumbnail) next to the layout guide entry to open its properties.
Change the type from Uniform grid to Columns.
Set Count to 4.
Set Margin to 16.
Set Gutter to 16.
Click away from the settings panel to close it.

Your frame now shows four translucent columns with even spacing. This is your alignment grid for the entire wireframe.

Why 4 columns instead of 12?

A 12-column grid is standard for desktop layouts where content spans many different widths. On a mobile screen, 4 columns with 16px margins give you cleaner, simpler alignment without the visual noise of twelve narrow columns.

Columns not visible on the frame?

Make sure the frame itself is selected (click its name in the Layers panel or click its border on the canvas). Layout guides only appear when applied to a frame, not to individual layers inside it.

If you see a uniform dot grid instead of columns, open the layout guide settings and confirm the type is set to Columns, not Uniform grid.

Help me get my 4-column layout guide to show on my frame.

Before you move on, do a final check. Do you expect to see two pages in the left sidebar and column guides running top to bottom on your frame?

Take a look at your file now. You should see Wireframes and Reference in the page list, and the Wireframes page shows a single iPhone 16 frame with four visible column guides running from top to bottom.

Your file is structured and ready for design work. Next up, you will build the wireframe skeleton with a header, content cards, and a tab bar.

Build the Wireframe Structure

Your Figma file is organized with two pages and a grid-enabled frame ready for design work. Now it's time to fill that empty canvas with the bones of your app screen.

Every mobile app has a predictable structure: a header at the top identifying where you are, content in the middle showing what matters, and a navigation bar at the bottom telling you where else you can go. In this step, you'll block out that entire skeleton using basic rectangles and text.

In this step, get ready to:

Build a header bar with your app name.
Add placeholder content cards for the main screen area.
Create a bottom tab bar with text navigation labels.

Build the header area

The header anchors the top of every screen and tells the user which app they're in. You'll create it with a simple rectangle and a text label.

Select the Rectangle tool by pressing R on your keyboard.
Click and drag anywhere inside your iPhone frame to draw a rectangle.
In the right sidebar (Design tab), set W to 390 and H to 60.
Set the position to X: 0 and Y: 0 so it sits flush at the top of the frame.
In the Fill section, click the color swatch and change the hex value to F5F5F5 for a light gray.

You should see a light gray bar spanning the full width at the top of your frame.

Select the Text tool by pressing T on your keyboard.
Click in the center of the gray header rectangle and type your app name (e.g., "FoodDash" or "RideGo").
In the right sidebar, set the font size to 18 and choose a Bold weight.
Center the text horizontally within the header by selecting both the text and the rectangle, then clicking Align horizontal centers in the top toolbar.

Your header now shows the app name centered on the gray bar. That's the top of your screen locked in.

Text not visible on the header?

Make sure the text color is dark (black or near-black) so it contrasts against the light gray fill. Click the text layer and check the Fill color in the right sidebar.

If the text appears behind the rectangle, right-click the text layer and select Bring to front.

Add content cards below the header

Content cards are the main attraction of your home screen. Each card represents a piece of content the user can tap into. You'll draw rounded rectangles with placeholder image squares and text to simulate real cards.

Press R to select the Rectangle tool and draw a rectangle below the header.
Set W to 358 and H to 120.
In the right sidebar, enter 8 in the Corner radius field to round the corners.
Set the fill to a light gray (EEEEEE) so the card stands out from the white frame background.
Position the card centered horizontally in the frame with about 16px of space below the header (X: 16, Y: 76).

You should see a rounded gray card sitting just below the header.

Inside the card, draw a small square (W: 80, H: 80) on the left side as an image placeholder. Give it a medium gray fill (CCCCCC).
Press T and add a title text layer to the right of the square (e.g., "Item Name"). Set the font size to 16 and weight to Bold.
Add a second text layer below the title for a subtitle (e.g., "Short description here"). Set the font size to 12 and keep the weight regular.

Your first card now has a gray image placeholder on the left with a title and subtitle stacked on the right.

Select the entire card (rectangle, square, and both text layers) and duplicate it by pressing Cmd+D (macOS) or Ctrl+D (Windows).
Move the duplicated card below the first one, leaving 16px of vertical spacing between them.
Duplicate once more to create a third card with the same 16px spacing.

You should see three evenly spaced content cards stacked vertically in the middle of your frame.

Use Smart Guides for spacing

As you drag elements, Figma shows pink measurement lines between objects. Use these to confirm your 16px gaps are consistent without manually calculating positions.

Build the bottom tab bar

The tab bar is how users navigate between the main sections of an app. You'll place it at the very bottom of the frame with text labels for each destination.

Press R and draw a rectangle at the bottom of your frame.
Set W to 390 and H to 80.
Position it at the bottom of the frame: X: 0, Y: 764 (since 844 minus 80 equals 764).
Set the fill to white (FFFFFF).
In the Stroke section of the right sidebar, click the + icon to add a stroke.
Click the stroke color swatch and set it to CCCCCC.
Next to the stroke, click the Individual strokes dropdown (it may say All by default) and select Top. This applies the border only to the top edge.

Your tab bar rectangle now has a subtle gray line along its top edge, separating it from the content above.

Press T and add your first navigation label inside the tab bar (e.g., "Home"). Set the font size to 12.
Add 3-4 more text labels spaced evenly across the tab bar. Choose labels that match your app theme (e.g., "Search", "Cart", "Profile" for shopping, or "Rides", "Activity", "Account" for ride booking).
Select all the tab labels and use Align vertical centers from the toolbar to line them up. Then use Distribute horizontal spacing to space them evenly.

Your tab bar now shows 4-5 evenly spaced text labels sitting in a white bar at the bottom of the screen.

Tab labels overlapping or uneven?

Select all the text labels at once (hold Shift and click each one). Then click Distribute horizontal spacing in the top toolbar to space them evenly. Make sure all labels are inside the tab bar rectangle's bounds.

Help me fix my tab bar label alignment in Figma.

Review your wireframe

Step back and look at what you've built. Your frame has a header, content cards, and a tab bar. It's a complete app skeleton.

Click on an empty area of the canvas (outside the frame) to deselect everything.
Press Shift+1 to zoom the frame to fit your screen so you can see the full layout at once.

Before moving on, ask yourself: how quickly can you identify what each tab in the bottom bar does?

The answer is probably "not instantly." The text-only labels take a moment to read and parse. The content cards also lack any visual cue about what type of content they hold. The structure is solid, but the wireframe feels flat and text-heavy. This is the limitation you'll solve in the next step.

Why does this matter?

In a real app, users scan navigation in under a second. Text labels alone force the brain to read each word sequentially. Visual cues (which you'll add next) let users recognize destinations at a glance without reading.

Your app skeleton is complete. Every section of the screen has a placeholder that communicates structure and hierarchy. Next up, you'll install a free icon plugin and bring those flat text labels to life.

Install the Iconstack Plugin and Find Free Icons

Your wireframe has a clear structure. Header, content cards, tab bar. But look at that tab bar with just text labels. It takes a moment to read each word before you understand what each section does.

Icons fix that instantly. A small house shape says "Home" faster than the word itself. In this step, you will install a free plugin called Iconstack that brings 50,000+ icons directly into your Figma canvas. No downloading, no importing, no leaving your file.

In this step, get ready to:

Install and run the Iconstack plugin in your Figma file.
Search for and insert icons that match your app theme.
Learn where else to find free icons beyond plugins.

Run the Iconstack plugin

Figma plugins are mini tools that run inside your editor. Iconstack searches across 20+ icon libraries (Material Design, Tabler, Phosphor, Lucide, and more) in a single panel.

Right-click anywhere on your canvas.
Select Plugins from the context menu.
Type Iconstack in the search bar that appears.
Click on Iconstack (50000+ Free SVG Icons) in the results.
Click Run to launch the plugin panel.

A plugin panel opens on the right side of your screen with a search bar and icon grid.

What is Iconstack?

Iconstack is a free Figma plugin that gives you access to 50,000+ open-source, MIT-licensed SVG icons. It pulls from popular libraries like Material Design, Tabler, Phosphor, Lucide, Remix, Bootstrap, and Ant Design.

Icons come in three styles: outline, solid, and mixed. No login or account required.

Alternative way to install

You can also visit figma.com/community, search for "Iconstack", click Open in, and select your current file. Both methods get you to the same plugin panel.

Plugin not appearing in search?

Make sure you are right-clicking on the canvas itself, not on the sidebar or toolbar. The Plugins option only appears in the canvas context menu.

If you still cannot find it, try the Community method: open a new browser tab, go to figma.com/community, search "Iconstack", and click Open in to run it in your file.

Still stuck? Help me find and run the Iconstack plugin in Figma

Search and insert icons for your app theme

Now you will build a collection of icons that match your app. You need 4-5 icons for the tab bar labels and 2-3 icons for the content cards.

In the Iconstack panel, type your first search term into the search bar. Use terms that match your tab bar labels.
Click on an icon in the results grid to insert it onto your canvas as an editable SVG.
Search for and insert one icon for each of your tab bar labels (4-5 icons total).
Search for 2-3 more icons for your content cards (for things like ratings, time, or location).

Which search terms should I use?

Match your search terms to your app theme. For a food delivery app, try: home, search, cart, user. For content cards: star, clock.

For a ride booking app, try: car, map, clock, user. Pick whichever icons feel clearest at a glance.

You should now have 6-8 icons scattered on your canvas, outside the frame. They are not positioned in the wireframe yet.

Icons too large or overlapping your frame?

Each icon inserts at its default size, which may vary. Do not worry about sizing right now. In the next step you will resize and position every icon precisely.

If icons landed inside your frame, drag them outside onto the gray canvas area so they do not interfere with your wireframe layout.

Need help moving icons around? How do I move icons out of my frame onto the canvas?

Discover other free icon sources

Iconstack is the fastest option for wireframing because icons land directly on your canvas. But it helps to know where else free icons live.

Where else can I find free icons?

The Figma Community has downloadable icon files. Search "icon" under the Files tab at figma.com/community to find full icon sets you can duplicate into your drafts.

External sites like iconify.design and remixicon.com offer free icon libraries you can download and import. For wireframing speed though, the plugin approach wins because icons appear on your canvas with a single click.

Take a final look at your canvas. Do you have 6-8 icons ready to go? Count them: 4-5 that match your tab bar labels, and 2-3 for your content cards.

Your wireframe currently has structure but no visual shortcuts. The icons sitting on your canvas are about to change that. Next up, you will position and size these icons inside your wireframe to make it instantly scannable.

Place Icons to Make the Wireframe Communicate

Your wireframe has structure, your icons are on the canvas, and now it's time to bring them together.

Right now, your tab bar relies entirely on text labels to communicate navigation. A stakeholder glancing at your wireframe has to read every word to understand the app's structure. Icons placed with intention fix that. They turn a flat layout into something instantly scannable.

In this step, get ready to:

Resize and position icons in your tab bar so navigation is readable at a glance.
Add small contextual icons to content cards for visual weight.
Rename and group layers for professional file organization.

Place icons in the tab bar

The tab bar is the most scanned element of any mobile app. Users recognize navigation by icon shape before they read any label.

Select one of the icons on your canvas that matches your first tab bar label (e.g., the "home" icon for "Home").
Resize it to 24x24px by typing 24 in both the W and H fields in the right sidebar.
Drag the resized icon into the tab bar, positioning it directly above its matching text label.
Center the icon horizontally with its label. Select both the icon and the text label, then click Align horizontal centers in the top toolbar.
Repeat for each remaining tab bar label. Resize each icon to 24x24px and center it above its text.

Your tab bar should now have 4-5 icons, one above each text label. It looks like real app navigation.

Hold Shift for proportional resizing

If you prefer dragging to resize, hold Shift while dragging a corner handle. This locks the aspect ratio so your icon doesn't stretch or squish.

Icon looks blurry or too large?

Make sure the W and H fields both say exactly 24. If the icon still looks wrong, delete it and re-insert a fresh copy from Iconstack. Some icons import at odd sizes that don't scale cleanly.

help me resize and position my tab bar icons

Add icons to your content cards

Content cards benefit from small icons that give context without color or imagery. A tiny star next to a number instantly reads as a rating. A clock next to text reads as time.

Select a star icon from your canvas (or insert a new one from Iconstack by searching "star").
Resize it to 16x16px by typing 16 in both the W and H fields.
Position it inside your first content card, next to a rating number or review count in the subtitle text.
Add a clock icon (16x16px) next to delivery time or arrival time text on the same card or another card.
Optionally, add a location pin icon (16x16px) next to any address text in your cards.

These small icons add visual hierarchy to your cards without introducing color or high-fidelity detail.

Why 16px for card icons and 24px for tab icons?

Tab bar icons are primary navigation. Users need to tap them, so 24px gives a comfortable visual target.

Card icons are supporting detail. They sit alongside text to add context, not to be tapped directly. 16px keeps them subtle and complementary.

Name and group your layers

A wireframe with 20+ unnamed layers becomes impossible to navigate. Naming layers now means anyone opening this file (including future you) can find any element instantly.

Open the Layers panel on the left sidebar.
Double-click each icon layer name and rename it descriptively. Use a pattern like icon-home, icon-cart, icon-star-rating.
Rename your text layers too (e.g., "App Title", "Card 1 Title", "Tab - Home").

Now group related elements within each content card.

Select all elements inside your first content card (the rectangle, image placeholder, text layers, and icons).
Press Cmd+G (macOS) or Ctrl+G (Windows) to group them.
Double-click the new group name in the Layers panel and rename it to Card 1.
Repeat for each remaining content card (e.g., Card 2, Card 3).

Check the Layers panel. You should see named groups for each card, and every icon layer should have a descriptive name instead of the default "Vector" or "Frame" labels.

Why bother naming layers for a wireframe?

Professional designers name layers because design files are shared. A developer inspecting your wireframe, a teammate continuing your work, or even you returning after a week all need to find elements quickly.

Clean naming also makes selecting elements on a crowded canvas much faster. You can click the layer name instead of hunting for a tiny 16px icon.

Grouped the wrong layers?

Press Cmd+Z (macOS) or Ctrl+Z (Windows) to undo. If you already moved on, select the group in the Layers panel, right-click, and select Ungroup. Then reselect the correct elements and group again.

help me fix my layer grouping in Figma

Before you zoom out to review, predict: can someone understand what each tab bar item does without reading the text labels?

Press Cmd+0 (macOS) or Ctrl+0 (Windows) to zoom to fit your frame.
Look at the tab bar. Each icon (home, search, cart, profile, or whatever matches your app) should communicate its purpose at a glance.
Look at your content cards. The small icons (star, clock, pin) add meaning that plain text alone did not have.
Expand a card group in the Layers panel. Every layer inside should have a descriptive name.

Your wireframe is now a complete, professional low-fidelity mobile screen. The tab bar is instantly scannable, cards have visual context, and the file is organized for anyone to navigate.

You have a complete wireframe that communicates your app's structure at a glance. Ready for a challenge? The Secret Mission takes this further by building a second screen and connecting both into a user flow.

Secret mission

Build a Second Screen

A single screen tells half the story. Real apps have flows between screens. Can you build a second screen that shows what happens when a user taps one of your content cards, and organize both frames into a complete two-screen user journey?

Clean Up Your Resources

This project runs entirely on Figma's free Starter plan, so there are no ongoing costs. Your file saves automatically to your Drafts and the Iconstack plugin stays available in your account for future files.

Resources you used:

Figma Design file (saved in your Drafts).
Iconstack plugin (free, remains available in your Figma account).

Keep everything running

No action needed. Choose this if you plan to continue into Part 2 of this series (prototyping, animations, and testing on your phone).

Your file stays in your Drafts and is accessible from the Figma file browser at any time.
The Iconstack plugin remains available whenever you right-click the canvas and select Plugins.
To share your wireframe for feedback, click Share in the top-right corner of the file to generate a view-only link.

Pause - I'll come back to this later

Nothing to shut down since all resources are free and cloud-saved. Your file will be waiting in Drafts whenever you return.

Close the Figma browser tab or desktop app. Your work is already saved.
When you come back, open Figma and find your file under Drafts in the left sidebar of the file browser.

Delete - I don't want to use this again

Remove your project file permanently. This cannot be undone once you confirm.

Open the Figma file browser by clicking the Figma logo in the top-left corner of your file.
In the left sidebar, click Drafts to find your wireframe file.
Right-click your wireframe file and select Move to, then click Move file to trash.
In the left sidebar, click Trash to open your deleted files.
Right-click your wireframe file and select Permanently delete.
Click Permanently delete file to confirm. This removes the file for good.

What about the Iconstack plugin?

Figma community plugins are not installed locally. They remain available in the plugin search but do not take up space or cost anything. There is no need to remove it.

Nice Work!

You just built a professional-quality mobile app wireframe in Figma from scratch. Your wireframe has real device sizing, a layout grid for alignment, and icons that make the design instantly readable to anyone who sees it.

You learned how to:

Built a complete mobile wireframe using frames, layout grids, and placeholder content that communicates app structure at a glance.
Installed and used the Iconstack plugin to source free SVG icons and place them directly into your design without leaving Figma.
Organized a multi-page Figma file with professional layer naming and grouping that makes your file easy for collaborators to navigate.
Secret Mission: Created a second screen to demonstrate a complete user flow between two app states.

Ready to quiz yourself?