TL;DR: To design a mobile app UI in 30 minutes, set up a 375×812 frame, build a simple design system with text styles and color styles, then assemble three core screens—splash, home, and profile—using components from Figma’s community resources. Focus on layout and spacing rather than pixel-perfect polish, and use reusable components to speed up the entire process.
Step 1: Set Up Your Frame (2 Minutes)
Open Figma and create a new file. Press F to select the Frame tool, then choose the “iPhone 13 & 14” preset (375×812) from the right panel. Rename the frame “Home Screen.” Duplicate it twice by pressing Ctrl/Cmd + D so you have three artboards side by side for your splash, home, and profile screens.
If you want to dig deeper, check out our guide on Shopify Store Audit: 10 Fixes to Boost Conversion Rates.
Step 2: Build a Mini Design System (5 Minutes)
Before designing anything, define your basics. Create a color palette using rectangles: one primary color, one accent, a dark neutral for text, and a light gray for backgrounds. Convert each into a Color Style by clicking the four-dot icon next to Fill. Next, add two text styles—a bold 24px heading and a regular 14px body—using the Text tool. This takes minutes now but saves you hours of inconsistency later.
Step 3: Design the Splash Screen (5 Minutes)
On your first frame, draw a full-bleed rectangle and fill it with your primary color. Add a logo placeholder—a simple circle or rounded square works fine. Type your app name below it in your heading style, and add a tagline in your body style. Center everything using the alignment tools at the top of the right panel. Keep it minimal; a splash screen should breathe.
Step 4: Design the Home Screen (10 Minutes)
On the second frame, add a status bar placeholder at the top, then a header with your app name and a circular avatar. Below that, create a search bar using a rounded rectangle with a magnifying glass icon. Now design a card component: a rectangle with an image placeholder, a title, and a subtitle. Turn it into a Component with Ctrl/Cmd + Alt + K, then duplicate it three times to build a vertical feed. Use Auto Layout (Shift + A) so spacing adjusts automatically.
Step 5: Design the Profile Screen (6 Minutes)
On the third frame, place a large circular avatar at the top, centered. Add the user’s name and a short bio beneath it. Create a row of three stat blocks (Posts, Followers, Following) using Auto Layout with equal spacing. Below, add a simple grid of six square thumbnails to represent a photo gallery. Finally, drop in a bottom navigation bar with four icons—reuse it across all screens by copying and pasting it into each frame.
Step 6: Polish and Present (2 Minutes)
Select all three frames, go to the Prototype tab, and drag connections between the splash screen and home screen, and between home and profile. Click the play button to preview your clickable mockup. That’s it—you now have a functional mobile UI ready to share or iterate on.
Tips for Speed
Use Figma’s community files for icons and UI kits instead of drawing from scratch. Learn the keyboard shortcuts: R for rectangle, T for text, Alt + drag to duplicate. Don’t obsess over perfect spacing on the first pass—refine later. Name your layers as you go so handoff is painless.
FAQ
Q: Do I need design experience to follow this tutorial?
A: No. The steps rely on basic shapes, text, and Figma’s built-in
Leave a Reply