TL;DR: Open Figma, create a 390×844 frame for a modern phone screen, and design your app’s key screens using frames, auto layout, and components. Then link screens together with the Prototype tab so you can preview and share a clickable mobile app prototype in minutes.
Step 1: Set Up Your File and Frame
Create a new Figma file and press F to open the Frame tool. Choose the “iPhone 14 & 15 Pro” preset (390×844) from the right panel, or draw a custom frame at that size. Name it “Home Screen.” Add a second frame beside it for “Details Screen” so you can design screens side by side. Tip: keep a consistent 8-point grid using the layout grid option (Shift+G) to keep spacing tidy.
If you want to dig deeper, check out our guide on Wearables Pivot to Continuous Metabolic Tracking.
Step 2: Build a Reusable Design System
Before designing screens, define your colors and text styles. Click the style icon in the right panel to create color styles (primary, background, text) and text styles (heading, body, caption). Then design small elements like buttons and cards as components (Ctrl+Alt+K / Cmd+Option+K). Components let you reuse and update elements across every screen instantly, which is essential for a coherent prototype.
Step 3: Design the Core Screens
Lay out your home screen: a top bar, a hero card, and a list of items. Use Auto Layout (Shift+A) on groups so they resize and space themselves automatically. Duplicate the frame (Ctrl+D / Cmd+D) to create the details screen, then swap in different content. Tip: use the Assets panel to drag in your components rather than redrawing them, and keep padding consistent (16px or 24px) for a native feel.
Step 4: Connect Screens in Prototype Mode
Switch to the Prototype tab in the right panel. Select a button or card, drag the blue node from its edge to the destination frame, and set the interaction (On tap → Navigate to). Add a “Back” interaction on the details screen. Set the frame’s overflow to “Vertical scrolling” for long lists. Tip: choose “Smart Animate” for smooth transitions between similar layouts.
Step 5: Preview, Test, and Share
Press the Play button (or Ctrl+Alt+Enter) to open the prototype in presentation view. Test every tap path on a phone-sized window to catch dead ends or misaligned hotspots. When it works, click Share and copy the prototype link—viewers can click through it in any browser without a Figma account. Tip: use “Present” mode with the device frame enabled for a polished demo.
FAQ
Q: Do I need a paid Figma plan to build a prototype?
A: No. The free Starter plan includes prototyping, components, and shareable prototype links, which is enough for most mobile app demos.
Q: How many screens should my first prototype include?
A: Start with 3–5 connected screens (home, list, details, and a confirmation or profile screen). A small, fully clickable flow demonstrates the concept better than many disconnected screens.
Q: Why won’t my prototype links work when I click them?
A: Make sure you’re in Presentation mode, the hotspot layer is on top and not hidden behind other elements, and each interaction is set to “On tap” with a valid destination frame.
Leave a Reply