Design & Prototype a Mobile UI/UX Experience – Learn Figma Course Syllabus

This project-driven course guides you from mobile UX fundamentals to a fully interactive prototype, combining theory with hands-on Figma practice. Over approximately 8 hours of structured learning, you’ll progress through wireframing, responsive layout design, component creation, prototyping interactions, and real-device testing—culminating in a complete mobile app prototype. Each module includes practical exercises to reinforce key concepts and build portfolio-ready skills.

Module 1: Foundations of Mobile UX

Estimated time: 0.75 hours

• Understand mobile interaction patterns and platform conventions (iOS vs. Android)
• Learn touch target sizes and ergonomic considerations for thumb reach
• Explore common navigation patterns in mobile apps
• Sketch low-fidelity wireframes for a simple onboarding flow

Module 2: Getting Started with Figma

Estimated time: 1 hour

• Navigate the Figma interface and understand core tools
• Differentiate between frames, groups, and layers
• Set up a mobile design file using device presets
• Import and manage design assets and use basic plugins

Module 3: Layout & Auto Layout Basics

Estimated time: 1 hour

• Apply Auto Layout to create flexible containers
• Control padding and margins for consistent spacing
• Enable responsive resizing for dynamic content
• Build a responsive card list component that adapts to varying text lengths

Module 4: Components, Variants & Design Systems

Estimated time: 1.5 hours

• Create reusable components for consistency
• Define Variants for different states (e.g., default, hover, pressed)
• Organize and publish design system libraries
• Build a button component with Default, Hover, Pressed, and Disabled states

Module 5: Prototyping Interactions

Estimated time: 1 hour

• Link frames to simulate user flows
• Create overlay modals and bottom-sheet menus
• Use Smart Animate for smooth micro-interactions
• Apply easing curves to enhance transition realism

Module 6: Final Project

Estimated time: 2 hours

• Design a mini task-management app with at least five screens
• Integrate wireframes, visual design, and interactive flows
• Conduct usability testing using Figma Mirror and iterate based on feedback

Prerequisites

• Basic computer literacy
• No prior design experience required
• Access to a web browser and free Figma account

What You'll Be Able to Do After

• Apply mobile UI/UX principles including touch targets and navigation patterns
• Design responsive layouts using Figma’s Auto Layout and constraints
• Create interactive prototypes with Smart Animate and overlays
• Collaborate with peers and developers using comments, version history, and Inspect
• Test prototypes on real devices and refine based on user feedback