Design Your First Mobile App Screen in Figma

What a mobile app screen is made of

A mobile app screen has four parts, and almost every screen you use follows the same pattern. Think of it like a shop window: the sign at the top, the main display in the middle, the small print underneath, and the door at the bottom.

1. Header. A greeting or a title, sometimes a small profile picture. It tells you whose screen this is and where you are.
2. Hero element. The one thing the screen exists for. On our screen it is the balance card. On a music app it is the song playing now. It gets the most space and the strongest treatment.
3. Content list. The detail underneath the hero: transactions, messages, songs, orders. Rows, all the same shape, stacked in order.
4. Bottom navigation. Three to five destinations, always in the same place, so your thumb learns where they live.

Our practice app is a fictional daily expense tracker called Daily Spend, and every number in it is made up for practice. The screen we build is its home screen, and its one job is to answer "Where does my money stand today?"

Before you draw anything: the three numbers to fix first

Beginners usually start by drawing, then wonder why the screen looks untidy. Fix three numbers first, and the drawing takes care of itself.

• Frame size: 390 by 844 pixels. That is an iPhone 14 screen, the size Figma offers as a preset. Pick it and stop thinking about it. Designing for one real phone beats designing for a vague rectangle.
• Side margins: 16 pixels. Nothing on the screen touches the left or right edge except the bottom navigation bar. Every card, heading and list sits 16 pixels in from each side, which leaves 358 pixels of content width.
• Spacing in multiples of 8. Gaps of 8, 16 and 24 pixels only. Never 11 or 13. This is the 8-point grid from the layout tutorial, and it is the difference between a screen that looks designed and one that looks assembled by accident.

One more decision: one font, three sizes. We use Inter, the free font Figma ships with, at 28 for the big balance number, 16 for body text, and 14 for secondary text. One accent colour, a deep teal (#0F766E), for the balance card and the Add button. Everything else is dark grey text (#1F2937) on white, with light grey (#6B7280) for secondary labels.

Step 1: Set up your Figma file and your frame

1. Go to figma.com, sign in, and click New design file. You get a blank canvas with a toolbar on the left and a properties panel on the right.
2. Press F for the Frame tool, then click iPhone 14 in the presets on the right. A 390 by 844 frame appears. If the preset list is hidden, draw any frame, then type 390 into the W box and 844 into the H box in the properties panel.
3. Double-click the frame name at the top of the layers panel and rename it Home.
4. With the frame selected, look at the properties panel and set the fill to white (#FFFFFF). Then click Layout grid in the same panel, choose Columns, and set the margins to 16 on each side. Pale pink columns appear on the frame. Everything you draw from now on sits inside those margins.

Expected result: one white phone-shaped frame on the canvas, with margins marked. If your frame is a different size, check the W and H boxes. Nothing else should be on the canvas yet.

Step 2: The header and greeting

1. Press T for the Text tool and click near the top left of the frame, 16 pixels in from the left edge and 48 pixels down from the top. Type Good evening. Set it to Inter, 14 pixels, light grey (#6B7280).
2. Press T again, click below it, and type Ayesha. Set it to Inter, 24 pixels, semibold, dark grey (#1F2937). This is the name of our fictional user, not a real person.
3. Select both text layers with Shift-click, press Shift + A to wrap them in an auto layout frame, and set the gap between them to 4 pixels. Auto layout is Figma's way of saying "keep these stacked with a fixed gap, whatever I change later."

Step 3: The balance card, the hero of the screen

The balance card is the most important element, so it gets the strongest colour and the biggest number. Visual hierarchy says the eye should land here first.

1. Press R for the Rectangle tool and draw a rectangle 358 pixels wide and 148 pixels tall, starting 16 pixels from the left edge and 24 pixels below the name. Set the fill to teal (#0F766E) and the corner radius to 16 in the properties panel.
2. Press T, click inside the card near its top left, and type Total balance. Set it to white, Inter, 14 pixels. Leave 20 pixels of space between the card edge and the text on all sides.
3. Below it, type Rs 48,250. Set it to white, Inter, 32 pixels, bold. This is a made-up practice figure, not a real balance.
4. Below that, type Spent today: Rs 1,250. Set it to white at 80 percent opacity, Inter, 14 pixels. The three text layers stack with 8 pixel gaps.
5. Select the card and the three text layers, press Shift + A, and set the padding to 20 pixels and the gap to 8 pixels. Now the card holds its text properly, and if you change a number later, the card adjusts instead of the text spilling out.

Expected result: a teal card with three lines of white text, sitting 16 pixels from each side edge. The big number is the first thing your eye meets.

Step 4: The transactions list

Under the card, list what the money went on today. Four rows, all the same shape. The four amounts add up to the "Spent today" figure on the card: 120 plus 850 plus 80 plus 200 equals 1,250. Check your own arithmetic the same way when you build yours.

1. Press T and type Today as a section heading, 24 pixels below the card, Inter 16 pixels, semibold, dark grey.
2. Build the first row. Draw a rectangle 358 by 56 pixels with a very light grey fill (#F9FAFB) and corner radius 12. Inside it, on the left, type Chai dhaba (Inter, 16 pixels, dark grey) and under it Food (Inter, 14 pixels, light grey). On the right, type Rs 120 (Inter, 16 pixels, semibold).
3. Select the row's layers, press Shift + A, set the padding to 12 pixels and the gap between the left and right groups to 8 pixels.
4. Copy the row three times with Ctrl + D and change the text: Grocery, Rs 850; Bus fare, Rs 80; Mobile load, Rs 200. Keep the small grey labels as Food, Shopping, Transport, Bills.
5. Select all four rows, press Shift + A, and set the vertical gap to 12 pixels.

Expected result: four identical rows under the Today heading, evenly spaced, with the amounts right-aligned. The list reads like a receipt, which is exactly what it is.

Step 5: The bottom navigation bar

The navigation bar sits at the bottom of the screen and never moves. Four destinations, spread evenly.

1. Draw a rectangle 390 by 72 pixels at the very bottom of the frame, white fill, with a thin top border in light grey (#E5E7EB). It touches both side edges. This is the one element allowed to break the 16 pixel margin rule.
2. Add four text labels across it, evenly spaced: Home, Stats, Add, Profile. Set them to Inter, 12 pixels, light grey, except Home, which is teal and semibold, because this is the home screen.
3. Draw a teal circle 56 pixels across, centred above the bar so it overlaps the top edge by half, and type a white + in it at 28 pixels. This is the Add button, the action the user reaches for most. Putting it in the centre, raised above the bar, is a pattern real apps use because the thumb finds it without looking.

Expected result: a white bar at the bottom with four labels and a raised teal circle in the middle. The circle overlaps the bar, which is fine, it is meant to stand out.

Step 6: The wrong turn, and the auto layout fix

Here is the mistake I made the first time I built this screen, and it is the one most beginners make. I copied the four transaction rows by hand, nudging each one into place with the mouse, and they looked fine. Then I zoomed in and measured the gaps: 11 pixels, 14 pixels, 9 pixels. The rows were drifting, and the list looked slightly off in a way I could feel but could not name until I measured it.

The fix took ten seconds. I selected all four rows, pressed Shift + A to wrap them in auto layout, and set the vertical gap to 12 pixels. Figma evened the spacing out, and now I can add a fifth row and the spacing stays correct. The lesson is plain: never space repeated rows by eye. Let auto layout hold the gap, and spend your attention on the content instead.

Step 7: Make it tappable, a two-frame prototype

A static screen is a picture. A prototype is a picture you can tap. Two frames and one link are enough.

1. Copy the Home frame with Ctrl + D and rename the copy Add expense. Delete the transactions list from it, and add a simple form instead: a heading Add expense, one input box labelled Amount, one labelled For what, and a teal button that says Save. It does not need to work. It needs to look like the screen that appears when you tap Add.
2. Switch to the Prototype tab in the properties panel. Click the teal + button on the Home frame, drag the blue arrow that appears onto the Add expense frame, and release.
3. In the interaction panel that appears, set it to On click, Navigate to, Add expense, with the animation Smart animate. Click Present (the play icon, top right) and tap the + button. The Add expense screen slides in.

Expected result: tapping the Add button in Present mode opens the Add expense frame. If nothing happens, check that you dragged from the button itself and not from the navigation bar behind it, and that the interaction says On click, not On drag.

How to check your screen before you call it done

Run through this list with your own screen open. It takes two minutes.

• Thumb test. Hold your phone in one hand. Can your thumb reach the Add button and the bottom navigation without stretching? The top of the screen is for reading, the bottom is for doing.
• Squint test. Shrink the frame to a small size, or squint at it. The balance card should still be the first thing you see. If the transactions list shouts louder than the card, the card needs more size or more contrast.
• Spacing test. Select any two neighbouring elements and read the gap in the properties panel. Is it 8, 16 or 24? A gap of 13 means you placed it by eye. Fix it.
• Text test. Read every label out loud. "Spent today: Rs 1,250" makes sense. "Lorem ipsum" does not, and neither does a label that only you understand.
• Contrast test. Is the light grey text readable on white? The 14 pixel secondary text at #6B7280 passes. If you picked a paler grey, darken it until you can read it at arm's length.

Common mistakes

• Designing on a frame of a random size. A 500 by 900 frame teaches you nothing, because no phone is that shape. Use the iPhone 14 preset, 390 by 844, and design for a real device.
• Spacing rows by eye. Gaps of 11 and 14 pixels next to each other make a list look careless, even when nobody can say why. Select the rows, press Shift + A, set one gap, and let Figma hold it.
• Putting everything in the middle of the screen. Beginners centre things because it feels safe. A home screen is read top to bottom and left to right, so align content to the left margin and let the hierarchy do the work.
• Too many colours and fonts. One accent colour and one font family are enough for a first screen. Add a second colour only when you can say what it means.
• Building five screens before testing one. A prototype with two frames that you actually tap through teaches you more than five static frames nobody has touched.

Frequently asked questions