Duration: 12 Weeks (Cohort-based)
Format: Hybrid (Live Virtual Lectures + In-person Lab Sessions)
Level: Beginner to Intermediate
I. Course Mission & Objective
To provide students with a comprehensive foundation in User Interface (UI) and User Experience (UX) design. Students will transition from design theory to building high-fidelity, interactive prototypes using Figma, culminating in a professional portfolio project.
II. Weekly Curriculum Breakdown
Phase 1: Foundations & UX Research (Weeks 1–3)
- Week 1: Introduction to Design Thinking
- Understanding the double-diamond process.
- User research methodologies and empathy mapping.
- Week 2: Information Architecture
- Creating user flows and sitemaps.
- Figma Intro: Setting up the canvas, frames, and basic shapes.
- Week 3: Low-Fidelity Wireframing
- The transition from paper sketches to digital skeletons.
- Using Figma’s Pen tool and layout grids.
Phase 2: Visual Interface Design (Weeks 4–7)
- Week 4: Typography & Color Theory
- Applying visual hierarchy in digital interfaces.
- Figma Feature: Creating and managing Global Styles (Color & Type).
- Week 5: Components & Atomic Design
- Building reusable UI elements (buttons, inputs, cards).
- Figma Feature: Master Components and Variants.
- Week 6: Layout Systems & Responsive Design
- Designing for Mobile, Tablet, and Desktop.
- Figma Feature: Auto Layout 5.0 and Constraints.
- Week 7: Design Systems & Libraries
- Organizing assets for scale.
- Figma Feature: Publishing Team Libraries and documentation.
Phase 3: Interaction & Prototyping (Weeks 8–10)
- Week 8: Basic Interaction
- Connecting screens and defining triggers (On Click, On Hover).
- Figma Feature: Prototype Mode and Overlay settings.
- Week 9: Advanced Animation (Smart Animate)
- Creating seamless transitions and micro-interactions.
- Figma Feature: Smart Animate and Multi-state Variants.
- Week 10: User Testing & Iteration
- Conducting usability tests using Figma Mirror and Live Embeds.
- Collecting stakeholder feedback via Figma Comments.
Phase 4: Professional Practice (Weeks 11–12)
- Week 11: Developer Handoff
- Preparing files for engineering teams.
- Figma Feature: Using Dev Mode and exporting assets (SVG, PNG).
- Week 12: Final Capstone Presentation
- Students present their end-to-end case study designed entirely in Figma.
III. Learning Outcomes
By the end of this program, students will:
- Master Figma’s professional feature set (Auto Layout, Components, Prototyping).
- Collaborate in real-time on shared files, mimicking a modern tech team environment.
- Complete a high-fidelity prototype ready for user testing.
IV. Assessment & Community
- Weekly Mentorship: 1:1 design critiques with instructors.
- Community: Dedicated Slack/Discord for peer feedback and collaborative “FigJam” brainstorming sessions.
- Graduation Requirement: 80% attendance and submission of a Figma-based case study.