Figma UI/UX Complete Bootcamp: Design 5 Job-Ready Projects
- Description
- Curriculum
- FAQ
- Reviews
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
-
7Discuss About Types of UI Animation Part-1Video lesson
-
8Destination Trigger Action and Animation Part-2Video lesson
-
9Prototype Settings Testing Sharing Prototypes Part-3Video lesson
-
10How On Drag Trigger Works Part-4Video lesson
-
11How On Click Trigger Works Part-5Video lesson
-
12How While Hovering Trigger Works Part-6Video lesson
-
13How After Delay Trigger Works Part-7Video lesson
-
14Prototype Action-Navigate to and Change to Part-8Video lesson
-
15Open Overlay Part-1Video lesson
-
16Toggle Checkbox Eye off on Radio Part-2Video lesson
-
17Accordion Prototyping Part-3Video lesson
-
18Tab Bar Prototyping Part-4Video lesson
-
19Video Interaction Prototyping Part-5Video lesson
-
20Zooming Hover Prototyping Part-6Video lesson
-
21Card Carousel Drag Animation Prototyping Part-7Video lesson
-
22Sticky Scroll Animation Part-8Video lesson
-
23Range Slider Prototyping Part-9Video lesson
-
24Text Animation Prototyping Part-10Video lesson
-
25Notification Effects Prototyping Part-11Video lesson
-
26Animated Card Effect Part-12Video lesson
-
27Switch and Toggle Button Part-13Video lesson
-
28Conditional and Set Variable Part-1Video lesson
-
29Delete Prototyping Using Set Variable Part-2Video lesson
-
30Hide and Show Using Boolean Part-3Video lesson
-
31App Screen Advance Prototyping Part-4Video lesson
-
32Advance Prototyping Techniques Part-5Video lesson
-
33Advance Prototype Using Button Variants Part-6Video lesson
-
34Animated Slider Part-7Video lesson
-
35Real Time Typing Keyboard Prototyping Part-8Video lesson
-
36Interactive Drop Down Menu Prototyping Part-9Video lesson
-
37Interactive Drop Down Menu Prototyping Part-10Video lesson
-
38Food Order Mobile App UI/UX : Project - Figma Source FileText lesson
-
39Food Order Mobile App UI/UX Project - Live DemoVideo lesson
-
40Color Style Guide Making Part - 1Video lesson
-
41Typography Style Guide Making Part - 2Video lesson
-
42All Possible Icon Setup Part - 3Video lesson
-
43Button Design and Its Variant Making Part - 4Video lesson
-
44Top Navbar Design Part - 5Video lesson
-
45Bottom TabBar Design Part - 6Video lesson
-
46Input Field Design Part - 7Video lesson
-
47Featured Card Design Part - 8Video lesson
-
48Categories Card Design Part - 9Video lesson
-
49Popular Card Design for Home Page Part - 10Video lesson
-
50PR-Splash Screen Design Project Part - 1Video lesson
-
51PR-Login Screen Design Project Part - 2Video lesson
-
52PR-Sign Up Screen Design Project Part - 3Video lesson
-
53PR-Home Screen Design Project Part - 4Video lesson
-
54PR-Home Screen Design Project Part - 5Video lesson
-
55PR-Common Frame Setup for Design System Project Part - 6Video lesson
-
56PR-Order Screen Design Project Part - 7Video lesson
-
57PR-Favorite Screen Design Project Part - 8Video lesson
-
58PR-All About Prototyping Project Part - 9Video lesson