Requirements

• “Students dont need to have prior knowledge; they will learn everything from this course.”

Description

In this Figma bootcamp, students will dive deep into the fundamentals and advanced techniques of mobile app design. Through hands-on projects, they will learn to create high-fidelity UI/UX designs and interactive prototypes for real-world applications. Each project will help build core skills in layout, navigation, user flow, and interactive elements using Figma’s powerful design tools.

Project 1: Ride-Sharing Mobile App

• Overview: Design a sleek and functional ride-sharing app, focusing on user-centered interfaces for a seamless ride-booking experience.

• Learning Outcomes:

  • Creating a map interface for user pick-up/drop-off points

  • Designing a ride booking screen with options for ride types (e.g., standard, luxury, carpool)

  • Developing ride selection options (vehicle type, fare estimate, time of arrival)

  • Designing trip options (e.g., scheduling rides, favorite locations)

  • Building profile pages (user profile, payment methods, trip history)

  • Prototyping key user flows (booking a ride, selecting a driver, viewing ride details)

  • Interactive animations for map transitions and route details

Project 2: Shoe Shop E-commerce App

• Overview: Build a modern and engaging e-commerce app for a shoe store, focusing on visually appealing product displays and user-friendly navigation.

• Learning Outcomes:

  • Designing a home page with featured products and categories

  • Creating a bottom navigation bar for easy access to key sections (Home, Categories, Cart, Profile)

  • Developing a product details page with high-quality images, descriptions, and sizes

  • Implementing an “Add to Cart” feature with feedback animations

  • Designing a shopping cart page with options to modify items, apply discounts, and proceed to checkout

  • Adding animations for interactive prototypes to create a more immersive shopping experience

  • Prototyping user flows such as adding products to the cart, viewing details, and checking out

Project 3: Chat App UI/UX

• Overview: Create a user-friendly and visually appealing chat app, focusing on messaging interfaces, notifications, and user interactions.

• Learning Outcomes:

  • Designing a chat interface with messages, timestamps, and read receipts

  • Building a contacts list with options to search and start new conversations

  • Creating user profiles with settings, status updates, and notifications

  • Developing group chat interfaces with unique designs for multiple participants

Project 4: Music Player Mobile App

• Overview: Design a sleek and intuitive music player app interface with album covers, playlist management, and playback controls.

• Learning Outcomes:

  • Designing a home screen with featured playlists, recent tracks, and suggested songs

  • Building a now-playing screen with album art, playback controls, and song information

  • Creating a browse and search feature for finding songs, albums, and artists

  • Adding animated transitions for song changes, shuffle, and playback animations

  • Prototyping user flows for playing music, navigating playlists, and managing favorites

Types of Prototypes That You Will Learn in This Course:

• Discussing the Types of UI Animation.

• Destination, Trigger, Action and animation.

• Prototype Settings,Testing & Sharing Prototypes.

• How On Drag Trigger Works.

• How On Click Trigger Works.

• How While Hovering Trigger Works.

• How After Delay Trigger Works.

• Prototype Action-Navigate to and Change to.

• Open overlay.

• Toggle, Checkbox, Eye off on, radio.

• Accordion Prototyping.

• Tab Bar Prototyping.

• Video interaction Prototyping.

• Zooming Hover Prototyping.

• Card Carosel Drag animation prototyping.

• Sticky Scroll animation.

• Range Slider Prototyping.

• Text Animation Prototyping.

• Notification Effects Prototyping.

• animated card effect.

• Switch and Toggle Button.

• Conditional and set-variable.

• Delete Prototyping using set variable.

• Hide Show using Boolean.

• App Screen Advance Prototyping.

• Advance Prototyping Techniques.

• Advance  prototype using Button Variants.

• Animated Slider.

• Real Time Typing Keyboard Prototyping.

Key Takeaways from the Bootcamp:

• Deep understanding of UI/UX principles for mobile apps

• Hands-on experience in interactive prototyping and animations

• Best practices in mobile app navigation and user interaction

Who this course is for:

• “If youre a Figma UI/UX designer looking to enhance your prototyping skills”
• If you want to master Figma prototyping
• If you want to learn about different types of prototypes with real-world examples