Wireframe a Mobile Payment App in Figma

Design a clickable 6-screen wireframe prototype for a payment app.

Introduction

30 Second Summary

Every time you open a payment app to send money to a friend, someone designed that experience first. Before any code was written or colors were chosen, a designer mapped out the structure with simple gray shapes on a blank canvas.

In this project, you will build a set of low-fidelity wireframe screens for a mobile payment app called "QuickPay" in Figma. You'll connect them into a clickable prototype and tap through the complete Send Money flow from home screen to confirmation.

What You'll Build

When you hit Play in Figma, you can tap through QuickPay like a real user, navigating from your balance overview all the way through sending a payment and back to the home screen.

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

A home screen where you can see your balance at a glance, tap a frequent contact to send money, and scroll through recent transactions.
A complete Send Money flow that walks a user through selecting a contact, entering an amount, and landing on a payment confirmation across three connected screens.
A clickable prototype you can demo to anyone, proving you can translate a product idea into a structured, testable design before a single line of code is written.
An optional Secret Mission to push your skills further.

Are there any prerequisites?

None. This project walks you through everything from creating a Figma account to building your finished prototype. Figma runs in your browser, so there is nothing to install.

Before We Start

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

Set Up Your Figma Workspace

You know what you're building and why it matters. Now it's time to prepare your canvas.

Every wireframe starts with a properly sized frame and a spacing system. Without the right dimensions and grid, your screens end up inconsistently sized and misaligned. In this step, you'll create your Figma workspace from scratch.

In this step, get ready to:

Create a Figma account and a new Design file.
Set up an iPhone 16 frame with an 8-point spacing grid.
Build a three-color wireframe palette.

Create a Figma account and open a new Design file

Figma is a browser-based design tool. You don't need to download or install anything.

Open your browser and go to figma.com.
Sign up for a free account, or log in if you already have one. The free Starter plan includes everything you need for this project.

Which plan do I need?

The free Starter plan includes Design files, prototyping, and unlimited Drafts. You do not need to upgrade.

Once you're signed in, click Drafts in the left sidebar.
Click + Create in the top-right corner, then choose Design file from the dropdown.

A blank canvas opens in the Figma editor. The default file name sits in the top toolbar.

Click the file name in the toolbar and rename it to QuickPay Wireframes.

Why Drafts instead of a folder?

The Starter plan limits you to 3 Design files per folder, but Drafts are unlimited. Keeping your file in Drafts avoids hitting that cap.

Don't see the + Create button?

Make sure you've selected Drafts in the left sidebar. The button appears in the top-right corner of the Drafts view.

Still stuck? Ask for help.

Create your first mobile frame and add a layout guide

A frame is Figma's term for a screen-sized container. You need one that matches the iPhone 16 dimensions so your wireframe looks right on a real device.

Press F on your keyboard to select the Frame tool.
In the right sidebar, expand the Phone section and click iPhone 16.

A 393 x 852 frame appears on your canvas. This matches the iPhone 16's screen dimensions in logical points.

With the frame still selected, find the Layout guide section in the right sidebar.
Click Add layout guide. A uniform grid appears on the frame by default.
Click the Layout guide settings icon (next to the guide you just added) to open the grid options.
Change the Size value to 8.

Your frame now shows an 8-pixel grid overlay. Every square in the grid is 8px by 8px.

What is an 8-point grid?

The 8-point grid is a widely adopted spacing system in mobile UI design. When all your element sizes and spacing are divisible by 8, everything aligns cleanly across different screen sizes.

Professional designers use it to keep wireframes consistent without eyeballing every pixel.

Don't see the grid overlay on your frame?

Make sure the frame itself is selected (click on its name in the Layers panel or click its border on the canvas). Layout guides can only be applied to frames, not to individual shapes or text layers.

Help me see the grid overlay.

Set up a wireframe color palette

Low-fidelity wireframes use grayscale only. Color is reserved for later, high-fidelity stages where you apply brand identity and visual states. For now, three shades of gray are your entire toolkit.

Click anywhere on the canvas outside the iPhone frame to deselect it.
Press R to select the Rectangle tool.
Draw a small rectangle next to your frame. This is your first color swatch.
With the rectangle selected, find the Fill section in the right sidebar. Click the color swatch to open the color picker.
In the hex field, type E0E0E0 and press Enter. This is your light gray for backgrounds.

Draw a second rectangle next to the first. Set its fill to 9E9E9E. This is your medium gray for secondary elements like labels and icons.
Draw a third rectangle. Set its fill to 424242. This is your dark gray for primary text and buttons.

Why only three grays?

In fintech design, color carries meaning. Green means profit, red means loss. If you add brand colors now, you risk making structural decisions based on how things look instead of how they're organized.

Sticking to grayscale forces you to get the layout and hierarchy right first. Visuals come later.

Before moving on, take a moment to predict: what should your canvas look like right now?

You should see a 393 x 852 iPhone frame with a visible 8px grid overlay, plus three gray rectangles sitting next to it on the canvas. The file name in the toolbar reads QuickPay Wireframes.

Missing a swatch or seeing the wrong color?

Double-check the hex value in the Fill section. Make sure you typed the value without a # symbol. Figma's hex field does not require it.

If a swatch landed inside the iPhone frame, just drag it outside. The swatches are reference-only and should not be part of your wireframe screens.

Help me fix my color swatches.

Your workspace is locked and loaded. Next up, you'll fill that empty frame with the most important screen in any payment app: the home screen.

Build the Home Screen

Your Figma workspace is set up with a blank canvas and a consistent gray palette. Now it's time to build the most important screen in any payment app.

The home screen needs to answer one question instantly: "How much money do I have?" Beyond the balance, it has to surface quick actions and show recent activity. Getting this information hierarchy right is the core challenge of fintech wireframing.

In this step, get ready to:

Build a status bar, greeting, and balance display.
Add a quick-send contacts row for frequent recipients.
Create a recent transactions list and bottom navigation bar.

Build the top section (status bar, greeting, and balance)

Every mobile app has a status bar at the top where the phone shows the time, battery, and signal strength. You'll block this area out first, then add the two most important text elements on the whole screen.

Select your iPhone 16 frame on the canvas by clicking on it.
Press R to select the Rectangle tool.
Draw a rectangle at the very top of your frame, spanning the full width (393px) and 44px tall.
In the right sidebar under Fill, set the color to #E0E0E0 (light gray).

You should see a thin light gray strip at the top of your frame. This blocks out the phone's status bar area so your content starts below it.

Press T to select the Text tool.
Click just below the status bar rectangle and type Hello, Alex.
With the text selected, set the color to #424242 (dark gray) in the right sidebar under Fill.
Press T again and click directly below the greeting.
Type $2,450.00.
This is the balance. It should be the biggest element on the screen. In the right sidebar under Text, increase the font size to 36.
Set the balance text color to #424242 (dark gray).

Your frame should now show a light gray status bar, a small greeting, and a large bold balance number. The balance dominates the screen visually.

Why is the balance the biggest element?

In fintech apps, the balance acts as a trust signal. It's the first thing users look for when they open the app. Making it the largest element means the user's most important question ("How much do I have?") is answered before they even start reading.

Text not appearing inside the frame?

Make sure you click inside the frame boundaries when placing text. If the text layer appears outside the frame, drag it inward until the layers panel on the left shows it nested under the frame.

help me position text layers inside my Figma frame

Build the quick-send contacts row

Payment apps surface your most frequent recipients so you can send money in as few taps as possible. This row of contact circles is the "money in motion" section of the dashboard.

Press T and click below the balance. Type Send Again as a section label.
Set the text color to #9E9E9E (medium gray) in the right sidebar.
Press O to select the Ellipse tool.
Hold Shift and draw a circle below the "Send Again" label. In the right sidebar, set both width and height to 48.
Set the circle's fill to #9E9E9E (medium gray).
Press T and add a small text label directly below the circle. Type Mom.

You should now see one gray circle with a label underneath it. Time to duplicate it to create the full contacts row.

Select both the circle and the "Mom" label by holding Shift and clicking each one.
Duplicate the pair by pressing Cmd+D (macOS) or Ctrl+D (Windows) three more times to create four circles total.
Space the circles evenly in a horizontal row, using the 8px grid lines as your guide.
Double-click each duplicated label and change the names to Jake, Lisa, and Rent.

You should see four evenly spaced gray circles with the labels "Mom", "Jake", "Lisa", and "Rent" underneath. This row represents the user's frequent contacts.

Why circles for contacts?

Circles are a universal placeholder for user avatars in low-fidelity wireframes. They communicate "this is a person" without needing actual photos or icons. The final high-fidelity design would replace these with profile pictures or initials.

Circles not aligning evenly?

Select all four circles, then look for the alignment and distribution options at the top of the right sidebar. Click the Distribute horizontal spacing button (it looks like three vertical bars with arrows between them) to space them automatically.

help me align and distribute objects evenly in Figma

Build the recent transactions list

The transactions list is the workhorse of any payment app screen. It shows the user where their money has gone recently. Each row needs a few key pieces of information: who, when, and how much.

Press T and click below the contacts row. Type Recent Transactions as a section label.
Set the text color to #9E9E9E (medium gray).
Press R and draw a rectangle below the label, spanning the frame width. This is your first transaction row.
Press O and draw a small circle (32px) on the left side of the row. This is a placeholder for a merchant icon or avatar.
Press T and add a text label to the right of the circle. Type Coffee Shop for the merchant name.
Add a second text label below the merchant name. Type Aug 18 for the date.
Add a third text label aligned to the right side of the row. Type -$4.50 for the amount.

You should see a single transaction row with a circle avatar on the left, the merchant name and date in the middle, and the amount on the right. This layout follows the pattern used by real payment apps.

What makes a good transaction row?

Each row answers three questions at a glance: who (the merchant icon and name), when (the date), and how much (the amount). Aligning the amount to the right lets users scan a column of numbers quickly, just like a bank statement.

Select every element in the transaction row (the rectangle, circle, and all three text labels) by clicking and dragging a selection box around them.
Duplicate the row by pressing Cmd+D (macOS) or Ctrl+D (Windows) two more times, creating three transaction rows total.
Stack the duplicated rows vertically below the first one, leaving a small gap between each.
Double-click each duplicated row's text to update the values. For example, change the second row to Grocery Store / Aug 17 / -$32.15 and the third to Mom / Aug 16 / +$100.00.

Mix sent and received amounts

Include a mix of negative amounts (money sent, like -$4.50) and positive amounts (money received, like +$100.00). This makes the wireframe feel like a real account with activity flowing in both directions.

Your frame should now show three transaction rows stacked below the "Recent Transactions" label. The last section to add is the navigation bar at the bottom.

Press R and draw a rectangle at the very bottom of your frame, spanning the full width and 64px tall.
Set the fill to #E0E0E0 (light gray).
Press T and add four text labels inside the nav bar, spaced evenly across the width: Home, Send, Activity, and Profile.

Why a bottom navigation bar?

Mobile apps place primary navigation at the bottom because it's within easy thumb reach. Four tabs is a common pattern. It gives users a clear mental map of the app's sections without overwhelming them.

Nav bar labels not spacing evenly?

Select all four text labels, then use Distribute horizontal spacing from the alignment options at the top of the right sidebar. This automatically creates equal gaps between each label.

help me distribute my navigation bar labels evenly in Figma

Before you preview, take a moment to think about what you expect to see. You've added a status bar, greeting, balance, contacts row, transaction list, and a nav bar. What should this look like as a complete screen?

Click on the Home screen frame to select it.
In the right sidebar, switch to the Prototype tab.
Click the Play button to open the preview.

You should see a recognizable payment app home screen. The balance sits at the top as the dominant element, followed by a row of contact circles, a list of recent transactions below, and a navigation bar anchoring the bottom.

Your home screen wireframe is complete. It covers the core information hierarchy that every fintech app needs: balance first, quick actions second, activity third. Next up, you'll build the three-screen Send Money flow that lets users actually move money from this dashboard.

Build the Send Money Flow

Your Home screen is built and ready to impress. It answers the first question any payment app user has: "How much money do I have?" Now it's time to build the screens that let them actually use that money.

The Send Money flow is the core interaction of any payment app. It needs to feel fast and trustworthy while giving the user enough information to confirm the transaction. In this step, you'll create three screens that guide a user from choosing a contact, to entering an amount, to seeing a confirmation.

In this step, get ready to:

Build a Select Contact screen with a search bar and contact list.
Build an Enter Amount screen with a prominent amount display, keypad, and send button.
Build a Confirmation screen that tells the user their payment went through.

Build the Select Contact screen

The first screen in the Send Money flow is where the user picks who to pay. It needs a way to search for contacts and a clean list to browse.

Select the Home frame on your canvas.
Duplicate it by pressing Cmd+D (macOS) or Ctrl+D (Windows). A second frame appears to the right of the original.
Double-click into the duplicated frame to enter it.
Press Cmd+A (macOS) or Ctrl+A to select all the content inside.
Press Delete to clear the frame.

You now have an empty 393 x 852 frame sitting next to your Home screen. This becomes your Select Contact screen.

Press T to select the Text tool. Click near the top-left of the empty frame and type < as a back arrow placeholder. Set its color to dark gray (#424242).
Click to the right of the < and add another text element with Send Money as the screen title. Use dark gray (#424242) for this text too.
Press R to select the Rectangle tool. Draw a full-width rounded rectangle below the top bar for the search bar. Give it a light gray fill (#E0E0E0).
Press T again and add a text element inside the search bar with Search contacts in medium gray (#9E9E9E).

The top section of your Select Contact screen is done. Now you need a list of contacts the user can choose from.

Below the search bar, draw a circle (about 48px diameter) using the Ellipse tool in the toolbar. Give it a medium gray fill (#9E9E9E) as an avatar placeholder.
Add a text element to the right of the circle with Mom in dark gray. You can optionally add a username or phone number below the name.
Select both the circle and the name text together. Duplicate this contact row by pressing Cmd+D (macOS) or Ctrl+D (Windows) three or four times.
Reposition each duplicated row below the previous one. Change the names to Jake, Lisa, David, and Sarah.

Your Select Contact screen should now show a back arrow, a "Send Money" title, a search bar, and 4-5 contact rows.

Elements appearing outside the frame?

Make sure you draw shapes inside the frame boundary, not on the open canvas. If an element lands outside, drag it back in. You can tell an element is inside the frame by checking the Layers panel on the left. The element should be nested under the frame, not sitting at the same level.

help me fix elements that ended up outside my Figma frame

Build the Enter Amount screen

Once the user taps a contact, they need to enter how much money to send. This screen puts the dollar amount front and center so there is zero confusion about the transaction.

Click on an empty area of the canvas (outside any frame) to deselect everything.
Select the Home frame and duplicate it by pressing Cmd+D (macOS) or Ctrl+D (Windows).
Double-click into the new frame, press Cmd+A (macOS) or Ctrl+A (Windows), and press Delete to clear it.

You have another empty frame. Position it to the right of your Select Contact screen.

Add a < text element at the top-left for the back arrow in dark gray (#424242).
Add a title text element next to it: Send to Mom in dark gray.
In the center of the screen, add a large text element showing $50.00. Make this the biggest element on the screen. Increase the font size until it stands out prominently.

Why is the amount the biggest element?

In a payment app, the dollar amount is the most critical piece of information on this screen. Making it visually dominant reduces the chance that a user accidentally sends the wrong amount. Size creates hierarchy.

Below the amount, build a simple numeric keypad. Press R for the Rectangle tool and draw a small rounded rectangle for one key. Give it a medium gray fill (#9E9E9E).
Add a text label inside the key (start with 1).
Duplicate this key to fill out a grid of 4 rows: 1 through 9 in the first three rows, then ., 0, and a delete key in the fourth row. Use your 8px grid to keep spacing even.
At the bottom of the frame, draw a full-width rounded rectangle with a dark gray fill (#424242). Add a text label inside it: Send $50.00 in white or light gray text.

Your Enter Amount screen should have the back arrow, the "Send to Mom" title, a large dollar amount in the center, a keypad grid, and a prominent send button at the bottom.

Keypad keys not aligning evenly?

Use the 8px layout guide you set up in Step 1 to snap elements into place. You can also select multiple keys, then use Tidy up in the bottom-right of the selection to auto-distribute them evenly.

help me align my keypad buttons evenly in Figma

Build the Confirmation screen

After the user hits send, they need reassurance that the payment went through. The Confirmation screen keeps things simple: a clear success indicator and a way to get back home.

Click on an empty area of the canvas to deselect everything.
Select the Home frame and duplicate it by pressing Cmd+D (macOS) or Ctrl+D (Windows).
Double-click into the new frame, press Cmd+A (macOS) or Ctrl+A (Windows), and press Delete to clear it. Position this frame to the right of your Enter Amount screen.

This is your fourth and final frame for this step.

Draw a large circle in the upper-center area of the frame using the Ellipse tool. Give it a medium gray fill (#9E9E9E).
Press T for the Text tool and add a V inside the circle as a checkmark placeholder.
Below the circle, add a large text element: Payment Sent! in dark gray (#424242).
Add a smaller text element underneath: $50.00 to Mom.
Add another line of text for the date and time, such as Aug 20, 2026 at 2:15 PM.
At the bottom of the frame, draw a full-width rounded rectangle with a dark gray fill (#424242). Add a text label inside: Done in white or light gray.

Your Confirmation screen should show a large checkmark circle, the "Payment Sent!" message, the amount and recipient, a date, and a "Done" button.

Circle not looking round?

When drawing with the Ellipse tool, hold Shift while dragging to constrain it to a perfect circle. You can also set the width and height to the same value in the right sidebar.

help me draw a perfect circle in Figma

Before you zoom out to see all your frames, how many distinct screens do you think are on your canvas right now?

Press Cmd+1 (macOS) or Ctrl+1 (Windows) to zoom to fit all frames on screen.

You should see 4 frames on your canvas: Home, Select Contact, Enter Amount, and Confirmation. Each screen has a clear content hierarchy and consistent sizing. They are not yet connected with prototype links.

Why are they not connected yet?

Right now, your four screens are static pictures sitting side by side. If you hit Play to preview, you'd only see the first frame with no way to tap through. In the next step, you'll wire them together into a clickable prototype.

Your four screens are designed and ready to go. Next up, you'll connect them with Figma's prototype tools so you can tap through the entire Send Money flow like a real user.

Connect the Prototype

Your canvas now has four complete wireframe screens for QuickPay. You've built a Home dashboard, a contact picker, an amount entry, and a payment confirmation.

But right now, these four screens are just static pictures sitting next to each other on your canvas. If someone tried to demo this, they'd see one frame at a time with no way to tap between them.

Before making any changes, what do you think will happen if you select the Home frame and open a preview right now?

Click on the Home frame on your canvas to select it.
Click the Play button (the triangle icon in the top-right toolbar) to open the preview.

You see the Home screen in the preview, but nothing is clickable. Tapping the contact circles, the Send button, or the transactions does nothing.

Close the preview to return to your canvas.

That's the gap you'll close in this step. Prototype connections turn your static frames into a tappable flow that demonstrates the real user journey.

In this step, get ready to:

Wire the Home screen to the Select Contact screen.
Connect the remaining Send Money screens into a complete loop.
Test the full prototype flow in Figma's preview.

Wire the Home screen to the Send Money flow

Figma's Prototype tab lets you create connections between frames. Each connection has a trigger (what causes it) and an action (what happens).

Select the Home frame on your canvas.
Switch to the Prototype tab in the right sidebar. You can also press Shift+E to toggle it.
Click on one of the contact circles in the Send Again row.
Hover over the blue circle that appears on its edge until it becomes a blue plus icon.
Click and drag from that blue plus to the Select Contact frame.

A blue arrow (called a "noodle") appears between the two frames. Figma automatically sets the trigger to On click and the action to Navigate to.

What is a prototype connection?

A prototype connection tells Figma what should happen when someone interacts with an element during a preview. The element you dragged from is the hotspot (the clickable area). The frame you dragged to is the destination (the screen that appears).

The blue noodle between them is the connection itself. You can click on it anytime to change the trigger or action.

Click the Play button to preview your prototype.
Click the contact circle you just wired. You should navigate to the Select Contact screen.
Close the preview to return to your canvas.

Your first connection works. Now wire the second entry point on the Home screen.

Back on the Home frame, click the Send label in the bottom navigation bar.
Drag from its blue plus icon to the Select Contact frame, just like before.

The Home screen now has two ways to reach the Select Contact screen: through a quick-send contact circle and through the Send nav button.

Don't see the blue circle on your element?

Make sure you're in the Prototype tab, not the Design tab, in the right sidebar. The blue connection handles only appear in Prototype mode.

Also make sure you're clicking the specific element (the circle or text label), not the entire frame. If you select the whole frame, the connection will trigger on any click anywhere.

Why can't I drag a connection from my element?

Wire the Send Money screens together

The Home screen can now reach the Select Contact screen. You need three more connections to complete the Send Money loop.

On the Select Contact frame, click one of the contact rows.
Drag a connection from its blue plus icon to the Enter Amount frame.

On the Enter Amount frame, click the Send $50.00 button.
Drag a connection to the Confirmation frame.

On the Confirmation frame, click the Done button.
Drag a connection back to the Home frame.

You should see blue noodles connecting all four frames in a circular path: Home, Select Contact, Enter Amount, Confirmation, and back to Home.

Why connect Done back to Home?

After a payment is confirmed, the user's task is complete. Sending them back to the Home screen lets them immediately see their updated balance and transaction history. This circular flow is standard in mobile payment apps.

Set the flow starting point and test

Before you can run the full prototype, Figma needs to know which screen to start on. It sets a flow starting point automatically when you add your first connection.

Click on the Home frame.
In the Prototype tab, look for a Flow 1 label attached to it. This is the starting point Figma created when you added your first connection.

Don't see Flow 1?

If there's no flow label on your Home frame, click the plus sign in the Flow starting point section of the Prototype tab to create one manually.

How do I set a flow starting point in Figma?

Time for the full test. Before you preview, think about this: if you tap through every connection you just made, what is the last screen you should see before landing back on Home?

Click Preview next to the flow name in the Prototype tab to open the inline viewer.
On the Home screen, tap one of the contact circles in the Send Again row.
On the Select Contact screen, tap a contact row.
On the Enter Amount screen, tap the Send $50.00 button.
On the Confirmation screen, tap Done.

You should land back on the Home screen. The full Send Money loop works. Each transition navigates to the correct screen.

Tapping an element does nothing in the preview?

Check that the connection noodle goes from the specific element (contact circle, button) to the correct destination frame. If the noodle starts from the entire frame instead of a specific element, delete the connection and re-drag from the element itself.

Also confirm the trigger is set to On click and the action is Navigate to. Click on a blue noodle to inspect its settings.

My prototype connections aren't working when I preview. What should I check?

Your Send Money flow is now a fully tappable prototype. Next up, you'll build a Transaction Detail screen and wire it into a second navigable flow from the Home screen.

Build the Transaction Detail Screen

Your prototype is alive. You can tap through the entire Send Money flow in the preview and loop back to the Home screen.

Try tapping on one of the transaction rows in your Home screen's "Recent Transactions" list. Nothing happens. Users expect to drill into payment details like the recipient, date, and payment status.

In this step, you'll build a Transaction Detail screen that displays all of that metadata. You'll also wire it into a second tappable flow and add a shared bottom navigation bar across your screens.

In this step, get ready to:

Build a Transaction Detail screen with payment metadata and status.
Wire the Transaction Detail flow with prototype connections.
Add a shared bottom navigation bar to all relevant screens.

Build the Transaction Detail screen

When a user taps a transaction on the Home screen, they expect a detailed breakdown of that payment. You'll build a dedicated screen to show this information.

Select the Home frame on your canvas.
Duplicate it by pressing Cmd+D (macOS) or Ctrl+D (Windows) to create your fifth frame.
Select all the content inside the new frame and delete it so you have an empty 393 x 852 frame.
At the top of the frame, add a text layer with a < character for the back arrow, positioned on the left side of the top bar area.
Next to it, add a text layer with Transaction Details as the screen title, in dark gray.

Your fifth frame now has a clean top bar. Next, add the key financial information.

Below the top bar, add a large text layer showing -$4.50 as the transaction amount. Make this the most prominent element on the screen.
Below the amount, add a text layer with Completed in medium gray, with a small circle (around 8px, filled with medium gray) next to it as a status indicator.

Now add the structured metadata that a user would scan for after seeing the amount and status.

Below the status, create a row with two text layers side by side: To on the left (medium gray) and Coffee Shop on the right (dark gray).
Create a second row: Date on the left and Aug 18, 2026 on the right.
Create a third row: Category on the left and Food & Drink on the right.
Create a fourth row: Reference on the left and #TXN-482910 on the right.
Space each row evenly using the 8px grid for consistent alignment.
At the bottom of the frame, add a text layer with Report a problem in medium gray as a secondary action link.

Why these specific details?

Each row answers a question a user would ask after seeing a charge: who received the money, when it happened, what it was for, and a reference number for support. The "Report a problem" link builds trust by giving users a clear path to dispute resolution.

Step back and look at your canvas. Your fifth frame should show a recognizable transaction detail screen with a back arrow, prominent amount, status badge, four detail rows, and a secondary action link at the bottom.

✔️ Awesome, I've got everything!

Great. Make sure you've used the same three grays from your wireframe palette for consistency across screens.

ⓧ I'd like to double check

Confirm your Transaction Detail frame includes all of the following, top to bottom:

A < back arrow and Transaction Details title in the top bar.
A large -$4.50 amount as the most prominent element.
A Completed status label with a small circle indicator.
Four labeled detail rows: To / Coffee Shop, Date / Aug 18, 2026, Category / Food & Drink, Reference / #TXN-482910.
A Report a problem text link near the bottom.

Wire the transaction detail flow

Your Transaction Detail screen exists, but it is isolated. You need prototype connections so users can tap into it from the Home screen and tap back out.

Click on the Home frame on your canvas.
Switch to the Prototype tab in the right sidebar (or press Shift+E).
Click on one of the transaction rows in the "Recent Transactions" list. Hover over the blue circle that appears on its edge until it becomes a blue plus icon.
Click and drag from that blue plus to the Transaction Detail frame. Figma creates a connection and sets the trigger to "On click" and the action to "Navigate to" by default.
Now click on the Transaction Detail frame on the canvas.
Click the < back arrow text element. Drag a connection from its blue plus back to the Home frame.

Test this new flow right away. Click Preview in the top toolbar (or press Shift+Space) to open the inline preview.

Tap a transaction row on the Home screen. You should navigate to the Transaction Detail screen.
Tap the < back arrow. You should return to the Home screen.
Close the inline preview by clicking the X in the preview window.

Tapping the transaction row does nothing?

Make sure you connected the transaction row element itself, not the parent frame. Double-click into the Home frame to select the individual row layer.
Check that the connection arrow points to the Transaction Detail frame, not to another frame. You can see the destination in the Prototype tab when the element is selected.
If the preview only shows the Home screen with no interactivity, make sure Flow 1 is still set on the Home frame.

Help me fix my prototype connection between the Home screen and Transaction Detail.

Add a shared bottom navigation bar to all screens

Right now, the only way to reach the Transaction Detail screen is by tapping a transaction row. A bottom navigation bar lets users jump directly between major sections from any screen.

Click on the Home frame and double-click into it to select the bottom navigation bar you built in Step 2 (the full-width rectangle at the bottom with the "Home", "Send", "Activity", and "Profile" labels).
Copy it by pressing Cmd+C (macOS) or Ctrl+C (Windows).
Click on the Select Contact frame to select it, then paste with Cmd+V (macOS) or Ctrl+V (Windows). Position the nav bar at the bottom of the frame, matching where it sits on the Home screen.
Repeat for the Enter Amount frame: click the frame, paste, and position at the bottom.
Repeat for the Transaction Detail frame: click the frame, paste, and position at the bottom.

Why not on the Confirmation screen?

The Confirmation screen is the end of the Send Money flow. Its only action is the "Done" button that takes the user back to Home. Adding navigation here would distract from the success moment and give users an exit before they see the confirmation.

Now wire the navigation labels on each pasted nav bar so they actually work.

On the Select Contact frame, switch to the Prototype tab. Click the "Home" label in the pasted nav bar and drag a connection to the Home frame.
Click the "Activity" label and drag a connection to the Transaction Detail frame.
Repeat on the Enter Amount frame: wire "Home" to the Home frame and "Activity" to the Transaction Detail frame.
Repeat on the Transaction Detail frame: wire "Home" to the Home frame and "Activity" to the Transaction Detail frame.
Finally, return to the Home frame. Click the "Activity" label in the existing bottom nav bar and drag a connection to the Transaction Detail frame.

What about the Home screen's nav bar?

The Home screen already has its own bottom nav bar from Step 2 with "Send" wired to Select Contact. You don't need to paste a new one. You only need to add the "Activity" connection so users can jump to Transaction Detail from Home's existing nav bar.

Before you preview, predict what will happen when you tap the "Activity" label on the Select Contact screen. Will it take you to the Transaction Detail screen? What about tapping "Home" from Transaction Detail?

Click Preview in the top toolbar (or press Shift+Space) to open the inline preview.
Tap a transaction row on the Home screen. You should navigate to the Transaction Detail screen.
Tap the < back arrow. You should return to the Home screen.
Tap a contact circle to go to Select Contact. Then tap "Activity" in the bottom nav bar. You should jump to the Transaction Detail screen.
On the Transaction Detail screen, tap "Home" in the bottom nav bar. You should land back on the Home screen.

Your prototype now supports two complete, tappable flows: the Send Money flow and the Transaction Detail flow. The bottom nav bar ties everything together.

Bottom nav not navigating on a screen?

Make sure you double-clicked into the frame to select the individual "Home" or "Activity" text label, not the entire nav bar rectangle. Connections must be on the specific label layer.
Check the Prototype tab to confirm each label shows an interaction pointing to the correct destination frame.
If the pasted nav bar covers content at the bottom of the frame, reposition it so it sits flush at the very bottom edge.

Help me fix my bottom nav bar connections across frames.

Secret mission

Add Error and Empty States

Your QuickPay wireframe handles the ideal scenario where every payment succeeds. But what happens when a payment fails, or when a brand-new user opens the app with no transaction history? Design for these edge cases to prove you can think beyond the happy path.

Clean Up Your Resources

This project runs entirely in Figma's free Starter plan, so there are no ongoing costs or paid resources to worry about.

Decide whether to keep your Figma file for future reference or delete it entirely.

Resources you used:

Figma Design file: QuickPay Wireframes (stored in your Figma Drafts).

Keep everything running

No action needed. Choose this if you plan to keep building on your wireframes or want to reference them later.

Your QuickPay Wireframes file stays in your Figma Drafts. You can reopen it any time from your Figma home page.
Your Figma account is on the free Starter plan, so there are no charges for keeping it.

Pause - I'll come back to this later

This project runs entirely in the browser with no local processes to stop or servers to shut down.

Your QuickPay Wireframes file stays in your Figma Drafts until you are ready to revisit it.
There are no running processes, background tasks, or paid resources to pause. Everything is saved automatically in Figma.

Delete - I don't want to use this again

Remove your wireframe file from Figma entirely. This cannot be undone after the file is permanently deleted.

Click the Figma logo in the top-left corner to return to your Figma home page.
Find QuickPay Wireframes in your Drafts.
Right-click the file and select the option to delete it.
Your Figma account is free, so there is no reason to delete it unless you want to. It costs nothing to keep.

Nice Work!

Nice work! You just designed and prototyped a complete mobile payment app wireframe in Figma.

You've learned how to:

Built a complete 6-screen low-fidelity wireframe for a mobile payment app, with a fintech dashboard that answers "how much money do I have?" at a glance.
Designed a multi-screen Send Money flow that guides users from contact selection through amount entry to confirmation.
Connected all screens into a clickable prototype you can tap through and share with anyone, using Figma's hotspots, connections, and flows.
Completed an optional Secret Mission to push your wireframing skills further.

Ready to quiz yourself?