TL;DR: This tutorial walks you through designing a complete mobile app UI in Figma, from setting up a frame to exporting a polished prototype. You’ll learn core tools, layout grids, components, and interactive flows in under 30 minutes.
1. Set Up Your Canvas and Frame
Open Figma and create a new file. Press F (or select the Frame tool) and choose a device preset like “iPhone 14” (393×852). Name the frame “Home Screen.” For orientation, ensure the frame is portrait. Tip: Use a 4-column layout grid (View > Layout Grids > Columns) with 16px gutters and 24px margins to keep alignment consistent.
If you want to dig deeper, check out our guide on MIT Warns: AI Can Now Complete Most Undergrad Assignments.
2. Build the App’s Visual Hierarchy
Start with a background color—use a light neutral (#F5F5F5) for content areas. Add a header bar: create a rectangle (height 64px) at the top, fill with white, and add a title text (e.g., “Dashboard”) with a bold 20px font. Below the header, add a search bar: use a rounded rectangle (radius 12px) with a placeholder text “Search…” and a small magnifying glass icon (use the Vector tool or a preset icon from the Assets panel).
3. Design the Main Content Cards
For each card, use a white rectangle with a subtle shadow (Effects > Drop Shadow: X=0, Y=2, Blur=8, Opacity=15%). Keep a consistent padding of 16px inside each card. Add a heading (16px, semibold), a supporting paragraph (14px, gray #666), and a primary action button (filled with your brand color, e.g., #4A90E2, radius 8px). To speed up, select all card elements and press Ctrl+D (or Cmd+D) to duplicate, then adjust the text content.
4. Create Reusable Components
Select the search bar (or a button) and click the Component icon (diamond shape) in the top toolbar. Now any copy you drag from the Assets panel will be linked. Change the main component’s text, and all instances update. Tip: For a list, create a “List Item” component with an avatar (circle), title, and subtitle. Then duplicate instances vertically and change only the data—this keeps your file lightweight and consistent.
5. Add Navigation and Interaction
At the bottom of the frame, create a tab bar (height 80px, white, with top border). Add 4 icons (Home, Search, Profile, Settings) using the Vector tool or an icon library. Now switch to Prototype mode (top-right tab). Click the “Home” icon, drag the blue connector to a second frame (e.g., “Profile Screen”). Set the interaction to “On Tap” and animation to “Smart Animate” (300ms ease-out). Repeat for each tab.
6. Test and Export
Press the Play button (top-right) to preview your interactive prototype on a simulated device. Check for alignment issues using the “Align” tools (e.g., left-align headings). Finally, select all frames and press Ctrl+Shift+E to export as PNG or PDF. For developers, use the “Inspect” panel to copy CSS, or export assets with “Export” settings (1x, 2x, 3x sizes).
FAQ
Q: How do I make my design responsive for different screen sizes?
A: Use Auto Layout (Shift+A) on containers, set horizontal and vertical resizing to “Fill” or “Hug,” and test by switching the frame size (e.g., from iPhone 14 to Android Pixel) to see if elements stretch correctly.