Figma Tutorial: Design a Mobile App UI in 15 Minutes
TL;DR: To design a mobile app UI in Figma within fifteen minutes, create a 375x812px frame, add core interface components using auto-layout, and apply a consistent color palette. Focus on clean hierarchy and functional spacing to ensure a professional look without spending time on excessive detailing.
Step 1: Set Up Your Canvas
Open Figma and create a new design file. Immediately press F to activate the frame tool. Select the iPhone 12 mini preset, which provides a standard 375x812px dimension. This size is widely accepted for modern mobile web and app development, ensuring your design scales correctly across devices. Rename the frame “Home Screen” to keep your project organized. Set the background color to a neutral white or very light gray (#F9FAFB) to establish a clean canvas. Avoid using pure white (#FFFFFF) for the entire background; instead, use it for cards and content areas to create subtle depth through contrast. This initial setup takes less than a minute but establishes the foundational constraints for your layout, preventing misalignment later in the process.
If you want to dig deeper, check out our guide on Canva: A Step-by-Step Guide to Creating Your First Social Me.
Step 2: Build the Navigation Structure
Start with the bottom navigation bar, as it anchors the user’s orientation. Draw a rectangle 375px wide and 80px tall, positioning it at the bottom of the frame. Apply a white fill and a top border of 1px in light gray to separate it from the content. Inside this rectangle, create three or four evenly spaced icons representing key sections like Home, Search, and Profile. Use simple vector icons or copy them from a free icon library. Group these icons and their labels, then use auto-layout to distribute them horizontally. This ensures that if you add or remove items, the spacing remains perfectly balanced. The top navigation bar should be simpler, featuring a menu icon on the left and a search or settings icon on the right. Keep the height around 50px to maximize vertical screen real estate for primary content.
Step 3: Design Core Content Cards
The main body of your app should feature content cards that demonstrate data presentation. Create a rectangle 351px wide (leaving 12px padding on each side) and 150px tall. Apply a white fill and a subtle drop shadow to lift it off the background. Inside, use auto-layout with a vertical direction and 16px padding. Add a large text element for the title, using a bold font weight and 18px size. Below it, add a smaller body text element in a lighter gray color, using 14px size and a regular weight. This hierarchy guides the user’s eye naturally from the most important information to the details. Duplicate this card three times and space them 16px apart vertically. This repetition creates a rhythm that feels professional and consistent. If time permits, add a small circular avatar or thumbnail to the left of the text to break up the monotony, but only if it fits within the existing auto-layout structure without causing overflow.
Step 4: Apply Color and Typography
Consistency is key to a polished look. Define a primary brand color, such as a vibrant blue (#2563EB), and use it only for call-to-action buttons or active states. Use black or dark gray (#111827) for primary text and a medium gray (#6B7280) for secondary text. Do not introduce more than three distinct text colors to avoid visual clutter. For typography, stick to a single font family, such as Inter or Roboto. Limit yourself to three sizes: 18px for headers, 14px for body, and 12px for captions. This restriction simplifies your design system and makes the interface easier to read. Apply these styles to your text layers using Figma’s text styles feature to ensure uniformity. This step takes only a few minutes but significantly elevates the perceived quality of the design by removing visual noise and establishing a clear
Leave a Reply