Figma UI/UX Complete Bootcamp: Design 5 Job-Ready Projects
Figma UI/UX Complete Bootcamp: Design 5 Job-Ready Projects, Figma Master Class: Design Professional Figma UI/UX for Ride-Sharing, Chat, and Shoe Shop Apps with Prototyping Skills.
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