Creating Your First Mobile App Prototype in Figma

Ever wondered how designers create those sleek mobile app mockups? Figma makes it surprisingly easy, even if you've never touched a design tool before. In this tutorial, you'll build a complete mobile app prototype from scratch in about 45 minutes.

Prerequisites

Before you start, you'll need:

• A free Figma account (sign up at figma.com)

• Basic familiarity with mobile apps (you've used one, right?)

• 45 minutes of uninterrupted time

Step-by-Step Tutorial

1. Set Up Your Mobile Frame

Create a new file in Figma and press 'F' to activate the Frame tool. In the right panel, select 'Phone' and choose 'iPhone 14 Pro' (375 x 812px). This gives you the standard mobile canvas. Name this frame 'Home Screen' in the layers panel.

2. Design Your Header

Draw a rectangle (R) at the top of your frame, 375px wide and 60px tall. Fill it with #1A1A1A (dark gray). Add your app name using the text tool (T), white color, size 18px, weight 600. Position it centered in the header. This is your navigation bar.

3. Create a Card Component

Below the header, draw a rounded rectangle (R) 340px wide and 200px tall. Set corner radius to 16px and fill with white. Add a subtle shadow (0px 2px 8px rgba(0,0,0,0.1)). Inside, add a title (size 16, weight 600) and description text (size 14, color #666666). Select all elements, right-click, and choose 'Create Component' (Cmd/Ctrl + Alt + K).

4. Duplicate and Arrange Cards

Hold Alt/Option and drag your card component down to duplicate it. Repeat 2-3 times. Select all cards, then in the right panel under 'Auto Layout', add vertical spacing of 16px. This creates a scrollable feed layout. Adjust the text in each instance to show different content.

5. Add Navigation Bar

At the bottom of your frame, create another rectangle 375px wide and 70px tall. Fill with white and add a top border (1px, #E0E0E0). Add three icon placeholders using circles (40px diameter) or import simple icons. Space them evenly using Auto Layout with 60px gaps. Label them Home, Search, and Profile.

6. Create Detail Screen

Duplicate your entire Home Screen frame (Cmd/Ctrl + D). Rename it 'Detail Screen'. Remove all cards except one, and expand it to show more content. Add a back arrow in the top-left corner of the header. This will be your detail view when users tap a card.

7. Add Prototype Interactions

Switch to Prototype mode (top-right corner). Select a card on your Home Screen. You'll see a small + icon appear. Click and drag it to your Detail Screen. In the interaction panel, set On Click → Navigate to → Detail Screen. Set animation to 'Move In' from right. Now select the back arrow on Detail Screen and link it back to Home Screen with 'Move Out' to right.

8. Test Your Prototype

Click the play button in the top-right corner (or press Shift + Space). This opens the prototype viewer. Click on a card to navigate to the detail screen. Click the back arrow to return. Congratulations! You've built your first interactive prototype.

Pro Tips

• Use constraints (right panel) to make elements stick to edges when resizing

• Hold Cmd/Ctrl while dragging to ignore snapping and position precisely

• Create a style library for colors and text styles to maintain consistency

• Use plugins like Unsplash or Iconify for professional images and icons

Next Steps

Now that you've mastered the basics, try adding more screens (onboarding, settings, profile). Experiment with different transition animations. Explore Figma's component variants to create button states and interactive elements. Check back next Monday for an intermediate tutorial on advanced Figma techniques.