Step-by-Step App UI in Figma

Introduction

Designing an app UI can feel overwhelming when you’re staring at a blank canvas. The key to moving fast without breaking quality is a clear, repeatable process. In this guide, you’ll learn a step-by-step workflow for building an app UI in Figma—from idea to wireframes, from components to interactive prototypes, and finally to developer handoff. We’ll build a simple but realistic example (a “Habit Tracker” app) while covering best practices, shortcuts, and pro tips along the way. By the end, you’ll know how to structure files, set up styles and components, create responsive screens, and present a prototype that stakeholders can click through.

What You’ll Build (and Learn)

We’ll design core screens for a Habit Tracker app:

• Onboarding / Sign In
• Home (Today’s Habits)
• Add Habit (Modal/Overlay)
• Habit Details
• Profile/Settings

You’ll learn how to:

• Turn user flows into wireframes and then into polished UI.
• Use Auto Layout, components, variants, and styles effectively.
• Prototype screens with transitions, overlays, and interactive components.
• Prepare files for developer handoff with minimal friction.

Clarify the Concept and User Flow

Before you draw anything, decide what the app must do. Keep it focused.

Goal: Help users build daily habits with minimal friction.
Primary tasks:

1. View today’s habits
2. Mark a habit as completed
3. Add a new habit
4. Review streaks / simple analytics
5. Adjust settings (reminders, theme)

User flow (high level):

• Open app → Home → Tap Add Habit → Fill form → Save → Return to Home
• Home → Tap habit → Habit Details → Mark done / edit
• Home → Profile/Settings → Change reminders/theme

Pro tip: Map this quickly in FigJam (or on paper) before opening a Figma design file. A clear flow prevents stray screens and scope creep.

Create Your Figma File and Pages

Open Figma → New Design File and create these pages for clarity:

1. 01 Wireframes
2. 02 UI – Components
3. 03 UI – Screens
4. 04 Prototype
5. 05 Handoff (Dev Ready)
6. Archive / Exploration (optional)

Numbering helps keep sections in a logical order when your file grows.

Set Up Device Frames, Layout Grids & Safe Areas

In 01 Wireframes, add device Frames (F). Choose a common base like:

• iPhone 15 (390 × 844) for iOS
• Pixel 8 (412 × 915) for Android

Layout grid:

• Add a 4-column grid for mobile (margin 16, gutter 16).
• Stick to an 8-point spacing system (8, 16, 24, 32…). It makes spacing decisions faster and keeps visuals consistent.

Safe areas:

• Add top/bottom guides for status bar and home indicator. Avoid placing tappable items too close to edges.

Rapid Wireframes (Low-Fidelity)

Stay grayscale; avoid typography choices or color decisions for now.

Wireframe each core screen:

• Onboarding / Sign In: Logo placeholder, email/password inputs, primary CTA, “Continue with…” option, “Forgot password?” link.
• Home: Date header, list of habits with a checkbox or completion chip, floating “+” button.
• Add Habit (Modal): Name field, frequency selector (daily/weekly), time reminder, Save/Cancel.
• Habit Details: Streak count, last 7 days mini-chart (placeholder rectangles), edit button.
• Profile/Settings: Avatar, name, notification toggle, theme switch.

Pro tip: Use Auto Layout even at wireframe stage so swapping to high-fidelity later is painless.

Define Your Design Tokens (Styles)

Switch to 02 UI – Components and create styles. This is your design system bedrock.

Color styles:

• Primary/500, Primary/600
• Neutral/900, Neutral/700, Neutral/500, Neutral/200, Neutral/50
• Success/500, Warning/500, Error/500
• Background/Canvas, Background/Card, Border/Default

Text styles:

• Display/L, Headline/M, Title/M, Body/M, Body/S, Caption
  • Example: Body/M: 16 px, line height 24, weight 400
  • Title/M: 20 px, line height 28, weight 600

Effect styles:

• Shadow/Card (subtle)
• Shadow/Overlay (for modals)
• Blur/Backdrop (optional)

Naming consistently pays off during handoff.

Build Core Components with Auto Layout

Still in 02 UI – Components, create key components:

Buttons

• Base: Auto Layout horizontal stack (8 px gaps), padding 12×16, corner radius 12.
• Variants: Primary / Secondary / Tertiary, Default / Loading / Disabled, With Icon / Text Only.
• Properties: boolean property for Leading Icon, Trailing Icon; text content as a property; state as a variant property.

Inputs

• Label + Input field + Helper/Message using Auto Layout vertical stack.
• Variants: Default, Focused, Error, With Icon.

Navigation

• Top Bar with title slot and optional actions.
• Bottom Tab Bar (4–5 tabs) using icons + labels; create an Active variant.

Chips / Toggles / Checkboxes

Create interactive feel with Default, Hover, Pressed, Selected states.

Pro tip: Use component properties (text, booleans, instance swaps) to avoid endless variant explosion.

Elevate Wireframes to High-Fidelity

Move to 03 UI – Screens. Duplicate your wireframes into this page. Replace gray boxes with real components and styles.

Apply brand:

• Set Primary/500 as main accent.
• Choose a neutral background (Background/Canvas).
• Use Title/M and Body/M for clear hierarchy.

Screen specifics:

• Home: Each habit row is a component (icon, habit name, streak chip, completion toggle). Use Auto Layout vertical list with 8–12 px gaps.
• Add Habit Modal: Overlay card with Shadow/Overlay, fields stacked in Auto Layout, sticky Save button.
• Details: Title, streak indicator, 7-day streak mini chart (use simple rectangles or a component).
• Settings: Group toggles under labeled sections (“Notifications”, “Appearance”).

Spacing discipline:
Stick to 8-point increments for padding and gaps. It immediately makes the UI look coherent.

Make It Responsive (Constraints, Auto Layout, Breakpoints)

Even for mobile-first design, prepare for different sizes and orientations.

• Set constraints of list items to Left & Right so they stretch.
• Use Auto Layout containers for headers/footers so the content adapts.
• Create a Compact, Regular variant for critical components (e.g., small/large buttons).
• Consider a second device frame (larger Android or iPhone Plus) and verify the layout scales.

Add Interactions & Prototype Flows

Switch to 04 Prototype.

Core interactions to wire:

• On Click → Add Habit button → open Add Habit Modal as an Overlay (centered, backdrop enabled, click outside to close).
• Save habit → Navigate To Home with Smart Animate (ease-in-out 200–300 ms).
• Tap habit row → Navigate to Habit Details with slide transition.
• Bottom tab selections: Swap active state; set Maintain scroll position when navigating back.

Interactive components:

• Button Pressed state (While Pressing).
• Toggle switch (On Click → toggle variant).
• Checkbox (On Click → selected variant) to simulate completion.

Pro tip: Keep animation timing consistent across the app (e.g., 200–240 ms for micro-transitions, 300–400 ms for screen changes).

Accessibility Essentials (Do This Early)

• Color contrast: Ensure text/background meet WCAG AA (4.5:1 for body text).
• Touch targets: Minimum 44 × 44 px for tappable controls.
• Text scaling: Check that critical text remains readable if scaled.
• Focus order (keyboard prototypes): Useful when demonstrating on desktop.

Accessible design saves you from expensive redesigns later.

Micro-Interactions That Add Delight

• Completion feedback: When a user marks a habit done, scale the checkbox from 0.9 → 1 with a gentle bounce (Smart Animate 180–220 ms).
• Floating action button: On scroll (simulated state change), reduce elevation or fade label.
• Overlay blur: Apply Blur/Backdrop effect for a premium feel.

Micro-interactions should support usability, not distract from it.

Realistic Content & States

Design empty, error, and loading states early.

• Empty Home: “You don’t have any habits yet” + primary CTA “Create your first habit”.
• Loading: Skeleton rows (faint rectangles with 12 px radius).
• Error: Inline messages in Error variant of inputs; retry actions visible.

Use a plugin (or manual text) to add realistic names: “Drink Water”, “Read 20 mins”, “Walk 5,000 steps”.

Prepare for Developer Handoff

Move final screens to 05 Handoff (Dev Ready).

Checklist:

• Each screen labeled (Home, AddHabit, HabitDetails).
• Components are named predictably (Button/Primary, Input/Text, Nav/TopBar).
• Styles are applied (no rogue colors).
• Add a redlines frame or note layer explaining spacing tokens, elevation, and corner radii.
• Exportable assets marked (icons as SVG, bitmaps @2x/@3x if needed).
• If using Dev Mode, confirm properties appear cleanly (spacing, sizes, typography tokens).

Pro tip: Create a small “Design Tokens” note component listing your color names, type scales, and spacing rules for engineers.

Versioning & Reviews

• Use version history to snapshot milestones: “Wireframes done (Sept 12)”, “HF v1 ready (Sept 16)”.
• For big changes, use branches (if available in your plan). Merge only when reviewed.
• Leave comment pins where decisions were made (“We chose 12 px rounding for cards to match iOS aesthetics.”).

File Hygiene & Team Etiquette

• Keep pages slim; archive explorations monthly.
• Prefix experiments with z_ and move to Archive.
• Use emojis to differentiate sections quickly (e.g., 🧱 for Components, 🚀 for Prototype).
• Document your rules in a tiny README frame at the top of every page.

QA Your Prototype (Mini Test Plan)

Run a 10–15 minute test with 2–3 people:

1. Sign in and reach Home.
2. Add a habit called “Read 20 mins”.
3. Mark “Drink Water” as done.
4. Find the streak for “Read 20 mins”.
5. Turn off notifications in Settings.

Watch for: hesitation on CTAs, unclear labels, missed touch targets, and any unexpected animation delays.

Scale with a Lightweight Design System

Promote your components into a Team Library if multiple files/projects will reuse them. Include:

• Buttons / Inputs / Chips / Avatars / Cards / Nav
• Colors, Grids, Typography, Shadows
• Sample patterns: Empty states, Confirmation dialogs, Error overlays

Keeping this lean prevents “design system bloat” and speeds adoption.

Common Pitfalls (and How to Avoid Them)

• Too many variants: Use component properties to reduce states.
• Inconsistent spacing: Lock to 8-point increments; use Auto Layout consistently.
• Hard-coded colors: Always apply named color styles.
• Ignoring empty/loading/error states: Ship them with v1; they’re part of the UX.
• Messy layer names: Dev handoff slows to a crawl—name predictably from day one.

Keyboard Shortcuts You’ll Use Constantly

• F: Frame tool
• T: Text tool
• Shift + A: Wrap selection in Auto Layout
• Option/Alt + Drag: Duplicate
• Cmd/Ctrl + G: Group
• Cmd/Ctrl + Shift + K: Place image
• Present / Prototype: `Cmd/Ctrl + “ (or click Play)

Lightweight Design Review Checklist

• Typography hierarchy consistent across all screens
• Primary/Secondary actions clearly distinguished
• Tap targets ≥ 44 × 44 px
• Color contrast passes AA
• Spacing aligned to 8-pt scale
• Interactive states (hover/pressed/disabled) present
• Prototype links complete (no dead ends)
• Handoff annotations present (tokens, exports, notes)

Example Component Recipes (Copy These Ideas)

Habit Row (Component):

• Auto Layout horizontal: icon (24), name (Body/M), streak chip, completion toggle
• Padding 12–16, gap 12, divider optional
• Variants: Default, Completed, Overdue (color tweak only)

Add Habit Form (Component):

• Vertical stack: Name input, Frequency chips, Time picker, Save/Cancel
• Properties: show/hide Reminder section, disable Save until valid

These reusable patterns speed up new screens dramatically.

Wrapping Up

A polished app UI in Figma isn’t magic—it’s the result of a repeatable process: define the flow, wireframe with intent, build reusable components, apply tokens and Auto Layout, prototype interactions, and package everything for handoff. Follow the steps here and you’ll ship faster with fewer reworks, cleaner files, and happier collaborators.

Ready to build faster and smarter? Start your App UI in Figma today—use this step-by-step workflow, publish components, and ship a clickable prototype your team can test this week.