What you'll learn:
- Figma Prototyping Basic to Advanced Level
- Uses of Prototyping in Real world App
- Zooming Hover Prototyping
- Different Types of Prototypes
- Accordion Prototyping
- Advance Prototyping Techniques
- Real Time Typing Keyboard Prototyping
- How On Drag Trigger Works
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
