TL;DR: This guide walks you through designing a complete mobile app UI in Figma—from setting up a frame and grid to building reusable components and exporting for developers. You’ll learn the exact clicks, shortcuts, and layering logic to create a polished, interactive screen in under an hour.
Step 1: Set Up Your Frame and Design System
Open Figma (free browser version works). Press F to select the Frame tool, then choose an iPhone frame from the right-hand panel (e.g., iPhone 14 Pro, 393×852). Name the layer “Home Screen.” Next, create a 4-column grid: select the frame, go to the “Layout Grid” section in the right sidebar, click the “+” icon, set Columns to 4, Gutter to 16, and Margin to 16. This ensures your UI aligns to standard mobile spacing. Tip: Hold Shift while dragging to keep proportions.
If you want to dig deeper, check out our guide on Space Tourism Prices Drop as Reusable Rockets Mature.
Step 2: Build the Background and Status Bar
Select the frame, set its fill to a light neutral (e.g., #F7F7F9) for contrast. For the status bar, you can use Figma’s built-in “iPhone Status Bar” component from the Assets panel (search “status”). If missing, manually create: a rectangle 393×44px at the top, with time “9:41” (text, 15pt, semibold) on the left and battery/wifi icons (use “+” → “Vector” or copy from a free icon set). Tip: Lock this layer (click the lock icon) so you don’t accidentally move it.
Step 3: Create the Header and Search Bar
Add a text layer (press T) with “Good Morning, Alex” (24pt, bold, dark #1A1A1A) at x=16, y=60. Below it, place a subtitle “4 new tasks today” in gray (14pt, #6B6B6B). For the search bar, draw a rounded rectangle (16px corner radius) 361×48px, fill white, with a subtle shadow (Effects → Drop Shadow, y=2, blur=4, opacity=10%). Inside, add a small magnifying glass icon (use “◯” and a rotated line, or paste from emoji). Place placeholder text “Search tasks…” at 16pt gray.
Step 4: Design a Card-Based Task List
Press R for rectangle. Draw the first card: width 361, height 80, corner radius 12, fill white. Add a left color strip (8×80px, rounded left corners only) in your accent color (e.g., #4A90E2). Inside, add a checkbox: a 24×24 rounded square with a checkmark (use “✓” character). Place task title “Design onboarding” (17pt, medium) and time “10:00 AM” (13pt gray). Duplicate this card by holding Alt and dragging down 96px. Repeat for 3–4 tasks. Tip: Use Ctrl+D (Cmd+D on Mac) to duplicate exactly after positioning.
Step 5: Add a Floating Action Button (FAB)
Create a circle (press O) 56×56px, fill your accent color, place at bottom-right (x = 321, y = 740). Add a white “+” icon (use a 24×24 text layer with “+”, font-size 28). Give the circle a drop shadow (y=4, blur=8, opacity=20%) to make it pop. This will be your primary “Add Task” button. Tip: Group the circle and “+” (select both, press Ctrl+G) so they move together.
Step 6: Create Reusable Components and Prototype
<p
Leave a Reply