Figma Tutorial: Design a Mobile App UI in 20 Minutes
TL;DR: You can design a basic mobile app UI in Figma by setting up a 375×812 frame, applying a consistent color palette, and arranging components like headers, cards, and buttons. This guide provides a streamlined workflow to help you create a polished, professional interface efficiently.
Step 1: Set Up Your Canvas
Open Figma and create a new design file. Press the “F” key to activate the frame tool. Choose an iPhone 14 Pro preset, which gives you a 390×844 pixel canvas. If you prefer the standard size, select 375×812. Name your frame “Home Screen”. This step is crucial because it defines the boundaries of your mobile interface. Ensure your grid settings are configured correctly by going to View > Show Grid. Enable the grid with a size of 8 pixels, which is a standard spacing unit in mobile design. This helps maintain consistency and alignment throughout your project.
If you want to dig deeper, check out our guide on How to Set Up a Shopify Store: Step-by-Step Tutorial.
Step 2: Define Your Design System
Before drawing any elements, establish your visual foundation. Open the right-hand panel and click on the plus icon to create new color styles. Choose a primary brand color, a neutral background color, and a text color. Save these as styles so you can apply them consistently. For typography, create text styles for headers, body text, and captions. Use a clean sans-serif font like Inter or Roboto. Set the header size to 24 pixels, body text to 16 pixels, and captions to 12 pixels. This pre-planning saves time later because you will not have to manually adjust font sizes and colors for every single text element. Consistency is key to a professional look.
Step 3: Build the Header
Draw a rectangle at the top of your frame, 44 pixels high. Fill it with your primary color or a white background with a subtle shadow. Add a text element for the app title, centered vertically. On the left, add a menu icon, and on the right, add a notification icon. You can find these icons in Figma’s built-in community plugins or by searching for icon sets. Group these elements together using Ctrl+G or Cmd+G. This keeps the header organized and allows you to move it as a single unit. Ensure the padding is consistent, typically 16 pixels from the edges.
Step 4: Create Content Cards
Scroll down to the main content area. Draw a rounded rectangle, 359 pixels wide and 200 pixels high, leaving 16 pixels of margin on the sides. Fill it with white and add a drop shadow to create depth. Inside this card, add an image placeholder on the left and text on the right. Use the text styles you created earlier. Add a title and a short description. Repeat this card structure twice, spacing them 16 pixels apart. This creates a list view that is common in social media or news apps. Duplicate the first card to ensure identical dimensions and styling. This method is faster and more accurate than drawing each card from scratch.
Step 5: Add Navigation Bar
At the bottom of the screen, draw a rectangle 390 pixels wide and 49 pixels high. Fill it with white. Add a top border of 1 pixel to separate it from the content. Place four icons evenly across the bar: Home, Search, Profile, and Settings. Use the alignment tools in the top toolbar to ensure they are perfectly spaced. Highlight the Home icon in your primary color to indicate the active state. This bottom navigation bar is essential for mobile usability, as it allows users to switch between main sections of the app easily. Keep the icons simple and recognizable.
Step 6: Review and Refine
Zoom out to 50% to view the entire screen. Check for alignment issues and inconsistent spacing. Use the inspect tool to verify that your dimensions match your
Leave a Reply