40 Days Figma UI/UX Design Course
Duration: 40 Days
Daily Duration: 2 Hours (1 Hour Theory + 1 Hour Practical)
Level: Beginner to Advanced
Software: Figma
Daily Duration: 2 Hours (1 Hour Theory + 1 Hour Practical)
Level: Beginner to Advanced
Software: Figma
Week 1 – Figma Fundamentals
- Introduction to UI Design
- Introduction to UX Design
- Difference between UI and UX
- Introduction to Figma
- Figma account setup
- Understanding the Figma interface
Practical: Create a Figma account and explore the Figma interface.
- Figma workspace navigation
- Move tool
- Frame tool
- Shape tools
- Pen tool
- Zoom and navigation shortcuts
Practical: Practice Move, Frame, Shape and Pen tools.
- Understanding frames
- Frame sizes
- Mobile layouts
- Desktop layouts
- Working with layers
- Alignment and positioning
Practical: Design a simple mobile screen.
- Rectangle and ellipse tools
- Polygon and star tools
- Vector editing
- Boolean operations
- Combining shapes
Practical: Create icons using vector tools.
- Text tool
- Font selection
- Font size
- Font weight
- Line height
- Letter spacing
- Typography hierarchy
Practical: Design a typography poster.
- Color theory
- Primary and secondary colors
- Color harmony
- Contrast
- HEX, RGB and HSL
- Creating professional color palettes
Practical: Create a professional color palette.
- Understanding grids
- Columns and rows
- Spacing systems
- Layout consistency
- 8px grid system
Practical: Design a UI using an 8px grid.
- Understanding constraints
- Horizontal constraints
- Vertical constraints
- Responsive resizing
- Fixed and flexible elements
Practical: Create a responsive card design.
- Introduction to Auto Layout
- Direction
- Spacing
- Padding
- Alignment
- Resizing behaviour
Practical: Create responsive buttons using Auto Layout.
- Introduction to components
- Main components
- Component instances
- Reusable UI elements
- Component organization
Practical: Create reusable buttons and cards.
Week 2 – Components & Design Systems
- Component variants
- Default states
- Hover states
- Active states
- Disabled states
Practical: Create multiple button states.
- Understanding Assets panel
- Managing components
- Organizing assets
- Reusable design elements
Practical: Organize design assets.
- Text styles
- Color styles
- Reusable styles
- Style naming conventions
Practical: Create a complete style guide.
- Introduction to design tokens
- Color tokens
- Typography tokens
- Spacing tokens
- Reusable design values
Practical: Build reusable design styles.
- Figma plugins
- Icon libraries
- Iconify
- Feather Icons
- Installing and using plugins
Practical: Install and use Iconify and Feather Icons.
- Working with images
- Image adjustments
- Image fills
- Image positioning
- Product imagery
Practical: Design a product card.
- Image masking
- Shape masks
- Image cropping
- Layer masking
Practical: Create a professional website banner.
- Smart selection
- Multiple selection
- Spacing management
- Alignment techniques
Practical: Create a product list layout.
- Team collaboration
- Shared components
- Team libraries
- Publishing components
- Updating shared libraries
Practical: Share components using Figma team libraries.
Create a complete restaurant landing page using the concepts learned during Week 1 and Week 2.
Practical: Complete Restaurant Landing Page UI.
Week 3 – UI Design
- Mobile-first design
- Touch-friendly interfaces
- Mobile spacing
- Visual hierarchy
- Mobile navigation
Practical: Design a mobile login screen.
- Dashboard structure
- Sidebar navigation
- Cards and widgets
- Information hierarchy
- Responsive dashboards
Practical: Create an admin dashboard.
- Navigation patterns
- Top navigation
- Side navigation
- Bottom navigation
- Navigation states
Practical: Design a mobile bottom navigation.
- Input fields
- Labels
- Dropdowns
- Checkboxes
- Radio buttons
- Error states
- Success states
Practical: Design a registration form.
- Card design principles
- Product cards
- List layouts
- Content hierarchy
- Spacing and alignment
Practical: Create an e-commerce product card.
- Table structures
- Data hierarchy
- Rows and columns
- Status indicators
- Pagination
Practical: Design an employee management table.
- Data visualization basics
- Bar charts
- Line charts
- Pie charts
- Dashboard data presentation
Practical: Design dashboard charts.
- Tablet screen sizes
- Responsive layout
- Tablet navigation
- Adaptive components
Practical: Design a tablet home screen.
- Desktop layouts
- Large screen design
- Grid systems
- Navigation systems
- Dashboard layouts
Practical: Design a CRM dashboard.
Design a complete hospital management interface with dashboard, navigation, patient information and data screens.
Practical: Complete Hospital Management UI.
Week 4 – UX & Prototyping
- User experience fundamentals
- User needs
- Usability
- Information architecture
- User journeys
Practical: Create a user flow.
- Wireframe concepts
- Low-fidelity design
- Page structure
- Content hierarchy
- User flow mapping
Practical: Create low-fidelity wireframes.
- High-fidelity UI design
- Visual hierarchy
- Color application
- Typography
- Component usage
Practical: Design a complete mobile application UI.
- Interactive components
- Component states
- Interactive buttons
- Toggle controls
- Tabs
Practical: Create interactive toggles and tabs.
- Smart Animate fundamentals
- Transitions
- Animations
- Timing
- Interactive transitions
Practical: Create animated page transitions.
- Prototype connections
- Navigation flows
- Interactions
- Overlays
- Transitions
- Prototype testing
Practical: Create a complete application flow.
- Developer handoff
- Inspect panel
- Design specifications
- Spacing documentation
- Asset preparation
- Export settings
Practical: Export assets for development.
- UI design review
- UX review
- Consistency checks
- Accessibility basics
- Visual improvements
Practical: Improve an existing UI design.
- Portfolio structure
- Case study presentation
- Project documentation
- Design presentation
- Portfolio organization
Practical: Organize completed projects for your portfolio.
Students will present their final UI/UX project and demonstrate the complete design process.
Final Practical: Complete Mobile App + Desktop UI.
Practical Projects
Beginner
- Login Screen
- Signup Screen
- Profile Page
- Calculator UI
- Weather App
Intermediate
- E-commerce App
- Food Delivery App
- Banking App
- Hotel Booking App
- Hospital Management System
Advanced
- ERP Dashboard
- School Management System
- CRM Dashboard
- Inventory Management System
- AI Chat Application
Plugins to Learn
- Iconify
- Unsplash
- Remove BG
- Content Reel
- Autoflow
- Blush
- Charts
- Mockup Plugin
- Lorem Ipsum
- Stark (Accessibility)
Portfolio Projects
By the end of the course, students should complete:
- Restaurant Website UI
- E-commerce Mobile App
- Banking App
- Hospital Management Dashboard
- ERP Dashboard
- AI Chat Application
- Landing Page
- Portfolio Website
- Travel Booking App
- School Management System
Course Outcomes
After completing this 40-day course, students will be able to:
- Design responsive websites and mobile applications.
- Create reusable components and design systems.
- Build interactive prototypes with Smart Animate.
- Collaborate using Figma team libraries.
- Create wireframes and user flows.
- Design professional dashboards and SaaS products.
- Prepare UI designs for developer handoff.
- Build a strong UI/UX portfolio with 10+ real-world projects.
- Be ready for UI/UX Designer, Product Designer, and Figma Designer roles.
Recent Post
