Figma UI/UX Complete Bootcamp: Design 5 Job-Ready Projects

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