Introduction to UI/UX Design and Figma Basics

• Introduction to UI/UX Design: Understanding principles, differences, and importance.
• Overview of Figma: Interface tour, basic tools, creating shapes, layers, and artboards.
• Assignment: Create a simple UI design using basic shapes and elements in Figma.

Exploring Prototyping in Figma and Introduction to Framer

• Understanding User Experience (UX) Design: User research, personas, user journey mapping.
• Introduction to Prototyping: Creating interactive prototypes in Figma using links and frames.
• Introduction to Framer: Exploring how Framer complements Figma for advanced prototyping.
• Assignment: Design a basic wireframe, create an interactive prototype in Figma, and enhance it with basic interactions using Framer.

Mastering Figma Tools and Applying Design Principles

• Advanced Figma Tools: Mastering vector editing, using components, and organizing design systems.
• Typography and Color Theory for UI Design: Principles, choosing fonts, creating harmonious color schemes.
• Assignment: Design a mid-fidelity prototype for a real-world project in Figma, focusing on typography and color.

User-Centric Design and Prototyping Refinement

• UI Design Best Practices: Layouts, grids, visual hierarchy, and designing for different screen sizes.
• Introduction to User Testing: Methods, conducting usability tests, gathering feedback.
• Assignment: Refine the mid-fidelity prototype based on user testing feedback and design principles.

Advanced Prototyping Techniques in Figma and Introduction to Framer

• Advanced Prototyping Techniques in Figma: Nested animations, overlays, and scroll-based interactions.
• Micro-interactions and Animation Principles: Adding polish to UI designs with subtle animations.
• Assignment: Design a high-fidelity prototype with advanced interactions in Figma, and enhance it with code-based animations using Framer.

Integrating Figma and Framer for Advanced Interactions

• Collaborative Design in Figma: Version control, commenting, and real-time collaboration features.
• Design Handoff and Developer Collaboration: Generating specs, exporting assets, and communication with developers.
• Assignment: Collaborate with a partner to refine and hand off the high-fidelity prototype for development, using Figma for design and Framer for advanced interactions.

Specialization Workshops and Project Kickoff

• Mobile App Design
• Web Design
• UX/UI for E-commerce
• Design for Social Impact
• Project Kickoff: Students select a real-world project or propose their own for the final assignment.
• Assignment: Begin working on the final project, applying specialized skills learned in the workshop using both Figma and Framer.

Project Development and Final Presentations

• Project Work and Feedback Sessions: Instructor-led feedback sessions to guide students in finalizing their projects.
• Presentation Preparation: Tips for creating compelling project presentations and portfolios.
• Final Project Presentations: Students present their final projects, receive feedback, and celebrate their accomplishments, showcasing their proficiency in using Figma and Framer for UI/UX design