Course Overview
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
FAQ
FAQ area empty
Course curriculum
-
Introduction to Figma Part-1
158 Xem trước -
Create Figma Account (Free vs Pro Plan) Part-2
449 Xem trước -
Figma Tool (Move, Region & Shape Tools) Part-3
561 Xem trước -
Figma Tool (Pen tool & Vector Network) Part - 4
451 Xem trước -
Figma Tool (Comment Tool & Presentation ) Part - 5
301 -
Figma Tool (Text Tool & Text Style) Part - 6
329 Xem trước -
Setup File & Canvas Part - 7
198 Xem trước
-
Discuss About Types of UI Animation Part-1
460 -
Destination Trigger Action and Animation Part-2
230 -
Prototype Settings Testing Sharing Prototypes Part-3
288 -
How On Drag Trigger Works Part-4
425 -
How On Click Trigger Works Part-5
350 -
How While Hovering Trigger Works Part-6
194 -
How After Delay Trigger Works Part-7
254 -
Prototype Action-Navigate to and Change to Part-8
331
-
Open Overlay Part-1
419 -
Toggle Checkbox Eye off on Radio Part-2
418 -
Accordion Prototyping Part-3
301 -
Tab Bar Prototyping Part-4
580 -
Video Interaction Prototyping Part-5
205 -
Zooming Hover Prototyping Part-6
202 -
Card Carousel Drag Animation Prototyping Part-7
289 -
Sticky Scroll Animation Part-8
135 -
Range Slider Prototyping Part-9
279 -
Text Animation Prototyping Part-10
209 -
Notification Effects Prototyping Part-11
174 -
Animated Card Effect Part-12
402 -
Switch and Toggle Button Part-13
251
-
Conditional and Set Variable Part-1
564 -
Delete Prototyping Using Set Variable Part-2
261 -
Hide and Show Using Boolean Part-3
345 -
App Screen Advance Prototyping Part-4
227 -
Advance Prototyping Techniques Part-5
298 -
Advance Prototype Using Button Variants Part-6
487 -
Animated Slider Part-7
352 -
Real Time Typing Keyboard Prototyping Part-8
413 -
Interactive Drop Down Menu Prototyping Part-9
548 -
Interactive Drop Down Menu Prototyping Part-10
276
-
Spotify Web App Clone UI/UX Project - Resources
-
Spotify Web App Clone UI/UX Project - Live Demo
176 -
Spotify Web App Clone UI/UX Project Walk-Through
354 -
Create new design file Part - 1
186 -
Create color template Part - 2
450 -
Adding color to style guide Part - 3
212 -
Create typography style list Part - 4
601 -
Adding typography to style Part - 5
368 -
Create brand logo Part - 6
378 -
Add icons Part - 7
569 -
Create low fidelity navbar for landing page Part - 8
578 -
Complete low fidelity top navbar of landing page Part - 9
382 -
Create left panel bar in low fidelity landing page Part - 10
495 -
Complete left panel bar of low fidelity landing page Part - 11
427 -
Create small cards of song in low fidelity landing page Part - 12
638 -
Create artists'cards of song in low fidelity lading page Part - 13
447 -
Complete cards sections of low fidelity landing page Part - 14
244 -
Create footer of low fidelity landing page Part - 15
482 -
Complete low fidelity landing screen Part - 16
585 -
Create low fidelity login page Part - 17
530 -
Completion of low fidelity login page Part - 18
443 -
Create low fidelity home page Part - 19
476 -
Create low fidelity song details page Part - 20
384 -
Continue with low fidelity song detail page Part - 21
658 -
Create play panel on low fidelity song detail page Part - 22
624 -
Completion of low fidelity song detail page Part - 23
429 -
Create banner of low fidelity song playlist page Part - 24
644 -
Completion of banner section of low fidelity song playlist page Part - 25
426 -
Create playlist section on low fidelity song playlist page Part - 26
650 -
Completion of playlist section of low fidelity song playlist page Part - 27
649 -
Create low fidelity logout page Part - 28
548 -
Create high fidelity landing screen's small card Part - 29
633 -
Create carousal-1 of high fidelity landing page Part - 30
614 -
Continue with carousal-1 of high fidelity landing page Part - 31
493 -
Completion of carousal-1 of high fidelity landing page Part - 32
481 -
Do minor modification Part - 33
602 -
Create carousal-2 of high fidelity landing page Part - 34
436 -
Complete carousal-2 in high fidelity landing page Part - 35
410 -
Create carousal-3 of high fidelity landing page Part - 36
597 -
Create carousal-4 of high fidelity landing page Part - 37
435 -
Create carousal-5 of high fidelity landing page Part - 38
386 -
Create carousal-6 and completion of high fidelity landing page Part - 39
516 -
Create high fidelity login page Part - 40
137 -
Create high fidelity home page & do minor modification Part - 41
306 -
Create carousal-6 & 7 of high fidelity song detail page Part - 42
698 -
Create carousal-8,9 of high fidelity song description page Part - 43
506 -
44. Completion of high fidelity song detail page Part-44
331 -
Create carousal-10 of high fidelity song playlist page Part - 45
525 -
Completion of high fidelity song playlist page Part - 46
551 -
Add prototype to the high fidelity wire-frame pages Part - 47
535 -
Completion of prototyping Part - 48
395 -
Organizing design components & complete the project Part - 49
236
-
Food Order Mobile App UI/UX : Project - Figma Source File
-
Food Order Mobile App UI/UX Project - Live Demo
87 -
Color Style Guide Making Part - 1
588 -
Typography Style Guide Making Part - 2
454 -
All Possible Icon Setup Part - 3
436 -
Button Design and Its Variant Making Part - 4
525 -
Top Navbar Design Part - 5
424 -
Bottom TabBar Design Part - 6
423 -
Input Field Design Part - 7
425 -
Featured Card Design Part - 8
550 -
Categories Card Design Part - 9
186 -
Popular Card Design for Home Page Part - 10
271 -
PR-Splash Screen Design Project Part - 1
433 -
PR-Login Screen Design Project Part - 2
382 -
PR-Sign Up Screen Design Project Part - 3
165 -
PR-Home Screen Design Project Part - 4
313 -
PR-Home Screen Design Project Part - 5
444 -
PR-Common Frame Setup for Design System Project Part - 6
236 -
PR-Order Screen Design Project Part - 7
469 -
PR-Favorite Screen Design Project Part - 8
259 -
PR-All About Prototyping Project Part - 9
479
-
Uber Ride Sharing App UI/UX Project - Figma Source File
-
Ride Sharing App UI/UX Project: Live Demo
196 -
Choosing Colors 1 Part-1
513 -
Choosing Colors 2 Part-2
583 -
Defining Variables Part-3
594 -
Creating Typography 1 Part-4
556 -
Creating Typography 2 Part-5
417 -
Iconography Part-6
621 -
Understanding Basics of Auto-layout Part-7
603 -
Creating your First Component Part-8
596 -
Finishing All Buttons Part-9
454 -
Finalizing Style Guide Part-10
325 -
Low-Fidelity Design On-boarding Page Part-11
611 -
Low Fidelity Design Sign in Page Part-12
603 -
Low Fidelity Design Ride Selection and Payment Part-13
581 -
Low Fidelity Design Ride Search and Ride Found Part-14
533 -
Low Fidelity Design Ride Details and Rating Part-15
602 -
Low Fidelity Design Join a Ride and Previous Ride Part-16
603 -
Low Fidelity Design Final Design Part-17
233 -
High Fidelity Creating On-boarding Page Slider Part-18
608 -
High Fidelity Completing On-boarding Page Part-19
614 -
High Fidelity Sign in and Sign Up Page Part-20
608 -
High Fidelity Bottom Navbar Component Part-21
544 -
High Fidelity Home Page Done Part-22
498 -
High Fidelity Ride Selection Page Part-23
612 -
High Fidelity Payment Page Part-24
569 -
High Fidelity Loader Part-25
671 -
High Fidelity Ride Confirm and Ride Details Part-26
608 -
High Fidelity Ride Details and Rate My Ride Part-27
587 -
High Fidelity Join a Ride and Previous Ride Part-28
535 -
High Fidelity Previous Ride Info Part-29
542 -
Final Design and Prototype Part-30
591 -
High Fidelity Final Prototyping Part-31
446 -
Low Fidelity Design Sign Up and Home Page Part-32
538
-
Shoe Sop E-Commerce App UI/UX Project : Live Demo
407 -
Shoe Sop E-Commerce App UI/UX Project 2 - Source File
-
Project Setup Figma Part-1
170 -
Creating Color Style Guide Part-2
352 -
Creating Typography Style Guide Part-3
461 -
Creating Splash Screen Home Screen (Low Fidelity Wire frame) Part-4
500 -
Creating Product Details, Cart, Purchase Screen (Low Fidelity Wire frame) Part-5
500 -
Designing Splash Screen Part-6
381 -
Designing Search Bar (Home Screen) Part-7
488 -
Designing Category Section (Home Screen) Part-8
435 -
Designing Cart Section (Home Screen) Part-9
354 -
Designing Bottom Navigation Bar (Home Screen) Part-10
395 -
Designing Image Section (Product Details Screen) Part-11
412 -
Designing Product Details Section (Product Details Screen) Part-12
479 -
Designing Cart Screen Part-13
446 -
Designing Place Order Successful Screen Part-14
425 -
Creating Images and Icons Components(Design System) Part-15
349 -
Creating Button Components (Design System) Part-16
392 -
Creating Category Section Components (Design System) Part-17
306 -
Creating Bottom Navigation Bar Components (Design System) Part-18
358 -
Creating Select Size Section Cards Components (Design System) Part-19
578 -
Creating Cart List Components (Design System) Part-20
268 -
Splash Screen Home Screen Prototyping Part-21
451 -
Product Details Screen Prototyping-I Part-22
288 -
Product Details Screen Prototyping - II Part-23
533 -
Cards Components Prototyping Part-24
437 -
Cart Screen Prototyping Part-25
547 -
Final Prototyping Part-26
143
-
Chat App UI/UX Project : Figma Source File
-
Chat App UI/UX : Project- Live Demo
283 -
Understanding Basics Part-1
579 -
Understanding Colors 1 Part-2
555 -
Understanding Colors 2 Part-3
556 -
Understanding Colors 3 Part-4
599 -
Understanding Colors 4 Part-5
548 -
Declaring Variables 1 Part-6
543 -
Declaring Variables 2 Part-7
431 -
Understanding Typography 1 Part-8
584 -
Understanding Typography 2 Part-9
516 -
Iconography Part-10
632 -
Creating Bottom Navbar and Testing Part-11
581 -
Creating Bottom Navbar and Testing Part-12
590 -
Prototyping and Creating Buttons Part-13
552 -
Creating Chat Components Part-14
525 -
Testing Components Part-15
354 -
Mental Models Part-16
592 -
Understanding User Flow of The App Part-17
599 -
Creating Low Fi Design of The App 1 Part-18
575 -
Creating Low Fi Design of The App 2 Part-19
609 -
Creating Low Fi Design of The App 3 Part-20
567 -
Creating Low Fi Design of The App 4 Part-21
619 -
Creating Low Fi Design of The App 5 Part-22
601 -
Creating Low Fi Design of The App 6 Part-23
284 -
Creating Slider for On Boarding Page Part-24
535 -
Completing On Boarding Page Part-25
676 -
Number Input Page Part-26
575 -
Continuing Sign in Sign Up Pages Part-27
561 -
Completing Sign in Sign Up Pages Part-28
603 -
Designing Home Page 1 Part-29
575 -
Designing Home Page 2 Part-30
834 -
Designing Home Page 3 Part-31
603 -
Completed Designing Home Page 4 Part-32
621 -
Prototyping Bottom Navigation Bar Part-33
282 -
Designing New Chats Option Part-34
638 -
Creating Messages Page 1 Part-35
646 -
Creating Messages Page 2 Part-36
565 -
Creating Messages Page 3 Part-37
639 -
Completed Messages Page Part-38
546 -
Others Profile View Page 1 Part-39
595 -
Others Profile View Page 2 Part-40
440 -
Creating User Profile Page Part-41
612 -
Creating User Profile Details Edit Page Part-42
580 -
Group Messages Page Part-43
556 -
Stories Page Design Part-44
570
-
Music Player APP UI/UX Project - Source File
-
Music Player APP UI/UX Project - Live Demo
182 -
Understanding Basics Part - 1
338 -
Deciding Font Sizes Part - 2
745 -
Testing Fonts Part - 3
403 -
Creating Font Styles Part - 4
578 -
Understanding Colors Part - 5
645 -
Deciding Colors For App Part - 6
657 -
Declaring Color in Styles Part - 7
545 -
Iconography Part - 8
419 -
Completing Style Guide Part - 9
435 -
Creating Home Page of The App Low Fidelity Part - 10
647 -
Competing The Home Page Low Fi Part - 11
434 -
Completing The Music Player Low Fi Part - 12
385 -
Creating Bottom Navbar Component Part - 13
640 -
Creating Other Components Part - 14
709 -
Designing Home Page Part - 15
717 -
Designing Recently Played Section in Home Page Part - 16
634 -
Adjusting The Navbar in Home Page Part - 17
588 -
Designing Music Player Part - 18
572 -
Designing Seek-bar and Player in UI Part - 19
518 -
Prototyping UI Part - 20
595 -
Prototyping The Music Player Screen Part - 21
135
-
E-commerce Web App UI/UX Project 6 - Figma Source File
-
E-commerce Web App UI/UX Project - Live Demo
512 -
Introduction to Text Style Part - 1
492 -
Finalizing The Text Styling Part - 2
399 -
Color Styling Part - 3
268 -
Low Fidelity Logo Part - 4
375 -
Low Fidelity Top Navbar and Search Field Part - 5
455 -
Low Fidelity Category Bar Part - 6
369 -
Intro to Banner Image of Low Fidelity Part - 7
338 -
Finishing of Banner Section of Low Fidelity Part - 8
329 -
Category Section of Low Fidelity Part - 9
277 -
Low Fidelity Section Title Bar Part - 10
255 -
Large Card of Low Fidelity Part - 11
541 -
Finish of Large Card of Low Fidelity Part - 12
401 -
Trending Brand Section of Low Fidelity Part - 13
427 -
Popular Item Section of Low Fidelity Part - 14
263 -
Small Card of Low Fidelity Part - 15
497 -
Intro to Crazy Offers Section of Low Fidelity Part - 16
535 -
Finishing of Crazy Offers Section of Low Fidelity Part - 17
444 -
Intro to Footer Section of Low Fidelity Part - 18
492 -
Finishing of Footer Section of Low Fidelity Part - 19
342 -
Intro to Product Description of Low Fidelity Part - 20
282 -
Continuing Product Description of Low Fidelity Part - 21
358 -
Fine Tuning of Product Description Section of Low Fidelity Part - 22
444 -
Icon Setting of Product Description of Low Fidelity Part - 23
444 -
Finishing Product Description Section of Low Fidelity Part -24
335 -
Related Product Section of Low Fidelity Part - 25
409 -
Purchase Page Navbar Section of Low Fidelity Part - 26
440 -
All Items Section of Low Fidelity Part - 27
551 -
Intro to Order Summary Card Section of Low Fidelity Part - 28
357 -
Finishing The Order Summary Card Section of Low Fidelity Part - 29
274 -
Purchase Page Section Completion of Low Fidelity Part - 30
568 -
Create High Fidelity Ware-frame Part - 31
52 -
Intro to High Fidelity Navbar and Banner Part - 32
447 -
Completion of High Fidelity Banner Section Part - 33
255 -
High Fidelity Category Section Part - 34
297 -
Category Section Animation of High Fidelity Part - 35
386 -
Completion of Category Section Animation of High Fidelity Part - 36
202 -
Hot Deals Section of High Fidelity Part - 37
319 -
Completion of Hot Deals Section of High Fidelity Part - 38
488 -
Intro to Large Card Carousel of High Fidelity Part - 39
326 -
Continuing of Large Card Carousel of High Fidelity Part - 40
509 -
Completion of Large Card Carousel of High Fidelity Part - 41
154 -
Trending Brands of High Fidelity Part - 42
352 -
Popular Items Section of High Fidelity Part - 43
487 -
Crazy Offers and Footer Section of High Fidelity Part - 44
196 -
Intro to Footer Section Part - 45
542 -
Completion of Footer Section of High Fidelity Part - 46
612 -
Product Description Section of High Fidelity Part - 47
530 -
Related Product Carousel Section of High Fidelity Part - 48
585 -
Payment System Animation Part - 49
530 -
Payment System Animation Part - 50
539 -
Re-commanded Section Carousel of High Fidelity Part - 51
333 -
Footer and Page Transition Animation of High Fidelity Part - 52
646
-
Netflix Clone Web App UI/UX Project - Live Demo
141 -
Netflix Clone Web App UI/UX Project - Overview
389 -
Netflix Clone Web App UI/UX Project -Figma Source File
-
Create Design File Part-1
146 -
Create Color Style Guide Part - 2
397 -
Create Typography Part - 3
235 -
Completion of Typography Part - 4
583 -
Adding Style to Typography Part - 5
321 -
Icons Part - 6
635 -
Create Low Fidelity Ware-frame Landing Page Navbar Part - 7
410 -
Create Low Fidelity Ware-frame Landing Page Body Text & Buttons Part - 8
631 -
Low Fidelity Landing Page Completion Part - 9
510 -
Introduction to Low Fidelity Plan Pricing Page Part - 10
304 -
Create Low Fidelity Plan Card Part - 11
477 -
Completion of Low Fidelity Plan Card Part - 12
317 -
Complete Low Fidelity Plan Cards Part - 13
349 -
Create Low Fidelity Footer Part - 14
356 -
Low Fidelity Footer & Plan Purchase Page Completion Part - 15
488 -
Create Low Fidelity Profile Page Part - 16
602 -
Create Low Fidelity Home Page Navbar Part - 17
524 -
Completion of Low Fidelity Home page Navbar Part - 18
124 -
Completion of Low Fidelity Banner Section Part - 19
491 -
Create Next Watch Section in Low Fidelity Home Page Part - 20
225 -
Create Continue Watching Section of Low Fidelity Home Page Part - 21
519 -
Create Top Trending Movies Section of Low Fidelity Home Page Part - 22
548 -
Create Action & Hollywood Movies Section of Low Fidelity Ware-frame Part-23
183 -
Game, Asian & Family Movies Section of Low Fidelity Ware-frame Page Part - 24
279 -
Create Footer of Low Fidelity Home Page Part - 25
360 -
Create Drop-down Menu in Low Fidelity Ware-frame Home page Part - 26
571 -
Create Drop-down Menu in Low Fidelity Home Page Part - 27
194 -
Create Details Page Frame & Banner of Low Fidelity Home Page Part - 28
568 -
Add Buttons in Low Fidelity Ware-frame Details Page Part - 29
463 -
Add Descriptions of Series in Low Fidelity WareFrame in Description Page Part-30
413 -
Continue Adding Description in Low Fidelity Description Page Part - 31
427 -
Create Cards for Episodes in Low Fidelity Details Page Part - 32
401 -
Completion of Episode section of Low Fidelity Ware-frame Details Page Part - 33
470 -
Create Video Pause Screen of Low Fidelity Paused Screen Part - 34
402 -
Continue Low Fidelity Paused Screen Part - 35
324 -
Completion of Low Fidelity Video Paused Screen Part - 36
484 -
Completion of Low Fidelity Ware-frame Video Play Screen Part - 37
394 -
Create High Fidelity Landing Page Part - 38
343 -
Complete High Fidelity Landing Page Part - 39
180 -
Completion of High Fidelity Purchase Plan Page Part - 40
456 -
Completion of High Fidelity Ware-frame Profile Page Part - 41
118 -
Create Banner in High Fidelity Homepage-1 Part - 42
466 -
Create Carousal-1 of High Fidelity Home Page Part - 43
378 -
Create Carousal-1 in High Fidelity Home Page Part - 44
640 -
Completion of Carousal-1 in High Fidelity Home Page Part - 45
211 -
Create Carousal-2 Part - 46
529 -
Completion of Carousal-2 Part - 47
659 -
Create Carousal-3 Part - 48
599 -
Completion of Carousal-3 Part - 49
544 -
Create Carousal-4 Part - 50
532 -
Create Carousal-5 Part - 51
555 -
Completion of Carousal-5 Part - 52
345 -
Completion of Carousal 6 & 7 Part - 53
340 -
Create Carousal-8 Part - 54
473 -
Completion of Carousal-8 Part - 55
421 -
Completion of High Fidelity Homepage Part - 56
247 -
Adding Logout Modal Frame in Homepage Part - 57
216 -
Creation of High Fidelity Details Page Part - 58
304 -
Completion of High Fidelity Details Page Part - 59
556 -
Completion of all Three Video Screens Part - 60
479 -
Create Prototype Part - 61
751
-
Airbnb Mobile App Clone UI/UX Project - Live Demo
342 -
Airbnb Mobile App Clone UI/UX Project - Source File
-
Create a New Design File Part-1
163 -
Add Color Style Part - 2
455 -
Add Typography Style Part - 3
540 -
Completion of Typography Style Part - 4
332 -
Add Icons in Design System Part - 5
564 -
Continue Adding Icons in Design System Part - 6
484 -
Create Low Fidelity Landing Screen Part - 7
341 -
Create Low Fidelity Login Screen Part - 8
566 -
Continue With Low Fidelity Login Screen Part - 9
386 -
Completion of Low Fidelity Login Screen Part - 10
389 -
Create Low Fidelity Banner Section in Home Screen Part - 11
585 -
Create Card in Low Fidelity Home Screen Part - 12
505 -
Completion of Low Fidelity Card of Home Screen Part - 13
326 -
Continue With Low Fidelity Home Screen Part - 14
586 -
Completion of Low Fidelity Home Screen Part - 15
499 -
Create Low Fidelity Detail Screen Banner Section Part - 16
234 -
Continue Low Fidelity Detail Screen Part - 17
588 -
Add Additional Details in Low Fidelity Home Screen Part - 18
474 -
Add Facilities Section in Low Fidelity Detail Screen Part - 19
621 -
Add Map Section in Low Fidelity Detail Screen Part - 20
550 -
Create Review Section in Low Fidelity Detail Screen Part - 21
500 -
Complete Review Section in Low Fidelity Detail Screen Part - 22
357 -
Create Host Detail Card of Low Fidelity Detail Screen Part - 23
520 -
Complete Host Detail Section of Low Fidelity Detail Screen Part - 24
471 -
Add Additional Features Detail in Low Fidelity Detail Screen Part - 25
545 -
Completion of Low Fidelity Detail Screen Part - 26
561 -
Create Low Fidelity Map Screen Part - 27
240 -
Create Product detail card of low fidelity reservation process screen-1 Part-28
427 -
Create review card in low fidelity reservation process-1 screen Part - 29
481 -
Completion of low fidelity reservation process screen-1 Part - 30
552 -
Create low fidelity reservation process screen-2 Part - 31
309 -
Create input fields in low fidelity reservation process screen-3 Part - 32
516 -
Completion of low fidelity reservation process screen-3 Part - 33
589 -
Create low fidelity reservation process screen-3 (Card Input) Part - 34
521 -
Completion of low fidelity reservation process screen-3 (Card Input) Part - 35
505 -
Create low fidelity reservation screen-4 Part - 36
542 -
Continue with low fidelity reservation process screen-4 Part - 37
540 -
Completion of low fidelity reservation process screen-4 Part - 38
286 -
Create low fidelity booking confirmation screen Part - 39
545 -
Create low fidelity profile screen Part - 40
488 -
Completion of low fidelity profile screen Part - 41
530 -
Completion of low fidelity ware-frame Part - 42
550 -
Create high fidelity landing screen & login screen Part - 43
279 -
Create high fidelity home screen banner section Part - 44
390 -
Create carousal 1 in high fidelity home screen Part - 45
381 -
Create carousal-2 of high fidelity home screen Part - 46
350 -
Create carousal-3 of high fidelity home screen Part - 47
609 -
Create carousal 4 & 5 of high fidelity home screen Part - 48
550 -
Create carousal 6 of high fidelity home screen Part - 49
532 -
Create carousal 7 of high fidelity home screen Part - 50
1 -
Create carousal 8 of high fidelity home screen Part - 51
21 -
Create carousal 9 of high fidelity home screen Part - 52
3 -
Create high fidelity detail screen Part - 53
62 -
Completion of high fidelity detail screen and review carousal Part - 54
413 -
Create high fidelity map screen Part - 55
270 -
Completion of high fidelity ware-frame screens Part - 56
451 -
Add additional screens for prototype transition Part - 57
326 -
Prototype feature to landing screen, login screen and home screen Part - 58
517 -
Add transitional prototype feature in from home screen to map screen Part - 59
545 -
Add transitional prototype feature to all screen Part - 60
436 -
Completion of prototype Part - 61
202 -
Arranging design system Part - 62
218
-
Figma Resource File for Flight Booking Mobile App UI/UX Project
-
Figma Flight Booking Mobile App UI/UX Project - Live Demo
234 -
Figma Flight Booking Mobile App UI/UX Project Walk-through
315 -
Create new design file and page setup Part - 1
139 -
Create color style guide Part - 2
442 -
Create typography style guide Part - 3
492 -
Completion of typography style guide Part - 4
627 -
Icon collections Part - 5
557 -
Create low fidelity animation screens Part - 6
535 -
Create low fidelity landing screen Part - 7
299 -
Create low fidelity login screen Part - 8
618 -
Completion of low fidelity login screen Part - 9
600 -
Create banner section of low fidelity wire-frame Part - 10
598 -
Create new section in low fidelity home screen Part - 11
624 -
Create featured section of low fidelity home screen Part - 12
546 -
Create large card for low fidelity home screen Part - 13
605 -
Completion of low fidelity home screen Part - 14
526 -
Create Flight booking details screen Part - 15
590 -
Create time selection bar in low fidelity flight booking detail screen Part - 16
599 -
Trip detail section card in low fidelity flight booking detail screen Part - 17
603 -
Trip detail section card in low fidelity flight booking detail screen Part - 18
649 -
Trip detail card sections in low fidelity flight booking detail screen Part - 19
572 -
Completion of low fidelity flight booking detail screen Part - 20
417 -
Create Low fidelity Booking confirmation screen Page - 21
546 -
Continuation of Booking confirmation screen Part - 22
619 -
Continue with Booking confirmation screen Part - 23
421 -
Completion of Booking confirmation screen Part - 24
266 -
Create personal details section of low fidelity profile screen Part - 25
653 -
Continue creating profile screen Part - 26
446 -
Add features options in low fidelity profile screen Part - 27
614 -
Completion of low fidelity profile screen Part - 28
256 -
Create reward card section in low fidelity reward screen Part - 29
405 -
Complete reward card section in low fidelity reward screen Part - 30
271 -
Create voucher card for low fidelity reward screen Part - 31
579 -
Completion of low fidelity reward screen Part - 32
350 -
Create low fidelity destinations screen Part - 33
403 -
Create destination trips card in low fidelity destination screen Part - 34
635 -
Completion of low fidelity destination screen Part - 35
398 -
Create high fidelity animation and landing screen Part - 36
391 -
Create high fidelity login screen Part - 37
234 -
Create high fidelity home screen Part - 38
502 -
Completion of high fidelity home screen Part - 39
631 -
Add animations in high fidelity home screen Part - 40
288 -
Horizontal scroll in high fidelity home screen Part - 41
392 -
Create high fidelity flight booking details screen Part - 42
504 -
Hovering effects on date and time slots in flight booking details screen Part-43
591 -
Trip cost calculation card of flight booking details screen Part - 44
478 -
Add conditional logic to the numbers of travelers in booking details Part - 45
541 -
Add cost calculative value based on the total numbers of travelers Part - 46
240 -
Add conditions to radio buttons in flight booking detail screen Part - 47
708 -
Completion of high fidelity flight booking detail screen Part - 48
510 -
Create high fidelity booking confirmation screen Part - 49
311 -
Create high fidelity profile screen Part - 50
287 -
Modify voucher card in high fidelity reward screen Part - 51
594 -
Completion of high fidelity reward screen Part - 52
614 -
Create high fidelity destination screen Part - 53
598 -
Continuation of high fidelity destination screen Part - 54
659 -
Completion of high fidelity destination cards Part - 55
262 -
Create popular destinations card section for high fidelity Part - 56
608 -
Create frequently traveled destinations cards for high fidelity Part - 57
589 -
Completion of Historical places cards section in high fidelity Part - 58
532 -
Organizing files Part - 59
426 -
Add prototyping in high fidelity screens Part - 60
372 -
Complete adding prototyping in high fidelity screens Part - 61
632
Requirment
-
Students don't need to have prior knowledge; they will learn everything from this course.
Outcomes
-
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
0 Student
1 Course
0 review