BBD Block-based Design with Figma

Learn professional UI/UX design skills using Figma through 24 hands-on lessons. Master design principles, create mobile and web applications, and build a professional portfolio.

Learning Outcomes

By completing this course, students will be able to:

• Master UI/UX design principles using Figma - Apply color theory, typography, and layout principles to create professional designs
• Create professional mockups and prototypes - Design interactive mobile and web applications with industry-standard tools and workflows
• Build design systems with components and variants - Develop scalable design systems including brand guidelines, component libraries, and interactive prototypes

Prerequisites

• Computer with internet access
• Free Figma account
• Basic computer skills

BBD Block-based Design with Figma - Session Logistics

Lesson	Topic	Objectives	Notes/File Link	Activities Link	Projects	Exit Ticket	Submission Link
1	Introduction to UI/UX Design	Learn UI vs UX fundamentals and course overview	Concept 01: Introduction to UI/UX Design	Activity 01: Introduction to UI/UX Design	-	ET-1	Submit Activity
2	Design Principles Part 1 - Color Theory	Master color theory, color wheel, and palette creation	Concept 02: Design Principles Part 1 Color Theory	Activity 02: Design Principles Part 1 Color Theory	-	ET-2	Submit Activity
3	Design Principles Part 2 - Typography	Learn typography fundamentals, font selection, and hierarchy	Concept 03: Design Principles Part 2 Typography	Activity 03: Design Principles Part 2 Typography	-	ET-3	Submit Activity
4	Design Principles Part 3 - Layout and Composition	Master layout principles, grids, alignment, and composition	Concept 04: Design Principles Part 3 Layout and Composition	Activity 04: Design Principles Part 3 Layout and Composition	-	ET-4	Submit Activity
5	Creating Your Own Brand Guideline	Develop brand identity and comprehensive brand guidelines	Concept 05: Creating Your Own Brand Guideline	Activity 05: Creating Your Own Brand Guideline	-	ET-5	Submit Activity
6	UI/UX Case Studies	Analyze successful designs and case study methodology	Concept 06: UI-UX Case Studies	Activity 06: UI-UX Case Studies	-	ET-6	Submit Activity
7	Material Design	Learn Material Design and Apple HIG principles	Concept 07: Material Design	Activity 07: Material Design	-	ET-7	Submit Activity
8	Project 1 - Project Documentation	Create comprehensive project documentation and requirements	-	-	Project Documentation	-	Submit Project
9	User Flow and Wireframe Development	Create user flows and wireframes for screen design	Concept 08: User Flow and Wireframe Development	Activity 08: User Flow and Wireframe Development	-	ET-8	Submit Activity
10	Quiz 1 - Design Foundations	Review design foundations and complete assessment	Quiz 1 Prep	-	-	Quiz 1	-
11	Mobile App Design Principles	Learn mobile design principles and navigation patterns	Concept 09: Mobile App Design Principles	Activity 09: Mobile App Design Principles	-	ET-9	Submit Activity
12	Designing Mobile App Screens	Create mobile interfaces with consistent design systems	Concept 10: Designing Mobile App Screens	Activity 10: Designing Mobile App Screens	-	ET-10	Submit Activity
13	Project 2 - Prototyping Mobile Apps	Build interactive mobile prototypes with Figma	-	-	Prototyping Mobile Apps	-	Submit Project
14	Web App Design Principles	Master responsive design and web accessibility	Concept 11: Web App Design Principles	Activity 11: Web App Design Principles	-	ET-11	Submit Activity
15	Designing Web App Screens	Create responsive web designs for multiple screen sizes	Concept 12: Designing Web App Screens	Activity 12: Designing Web App Screens	-	ET-12	Submit Activity
16	Project 3 - Prototyping Web Apps	Build interactive responsive web prototypes	-	-	Prototyping Web Apps	-	Submit Project
17	Introduction to AI-First Applications	Learn AI application concepts and design ethics	Concept 13: Introduction to AI-First Applications	Activity 13: Introduction to AI-First Applications	-	ET-13	Submit Activity
18	AI Application Interfaces	Design AI interfaces and conversational experiences	Concept 14: AI Application Interfaces	Activity 14: AI Application Interfaces	-	ET-14	Submit Activity
19	Quiz 2 - Advanced Design	Review advanced design concepts and complete assessment	Quiz 2 Prep	-	-	Quiz 2	-
20	Final Project (Part 1) - Analysis	Plan final project and conduct requirements analysis	-	-	Final Project	Check-1	-
21	Final Project (Part 2) - Wireframe	Create wireframes and design system architecture	-	-	Final Project	Check-2	-
22	Final Project (Part 3) - Portfolio Building	Build portfolio presentation and document design process	-	-	Final Project	Check-3	-
23	Final Project (Part 4) - Presentation	Present final project and demonstrate design decisions	-	-	Final Project	-	Submit Project
24	Graduation	Project evaluation and course completion	Graduation Background	Feedback Form	-	Share Your Story	-

Resources

• Figma Design Tool
• Material Design Guidelines
• Apple Human Interface Guidelines