Duration 4 days – 28 hrs
Overview
This hands-on course is designed for designers who already have basic Figma skills and want to elevate their proficiency to an advanced level. It dives deep into design systems, advanced prototyping, component management, responsive design, real-time collaboration, and developer handoff techniques. Participants will work on real-world design challenges and interactive design exercises to sharpen their skills and gain confidence in leading or contributing to large-scale UI/UX projects using Figma.
Objectives
- Utilize advanced Figma features including auto layout, variants, and interactive components.
- Build and manage scalable design systems and UI kits.
- Create responsive design layouts for multiple devices.
- Design complex user flows and prototype advanced interactions.
- Collaborate effectively with teams using Figma’s collaboration and feedback tools.
- Export and hand off designs to developers using best practices.
Audience
- UI/UX Designers with prior experience using Figma
- Web Designers and Front-End Developers
- Product Designers
- Creative Teams and Design Leads
- Freelancers transitioning to enterprise-grade design projects
Prerequisites
- Basic to intermediate knowledge of Figma (e.g., creating frames, shapes, and simple prototypes)
- Familiarity with UI/UX design principles and tools
Course Content
Day 1: Intermediate Figma Mastery
- Refresher: Smart Selection, Constraints, Auto Layout 3.0
- Components & Variants (Multi-variant components, property settings)
- Nested Components and Instance Swapping
- Building Reusable UI Elements
- Design System Essentials: Tokens, Colors, Grids, Typography
Day 2: Advanced Prototyping and Responsive Design
- Advanced Prototyping Techniques (Overlay, Smart Animate, Conditional Navigation)
- Prototyping Microinteractions
- Creating Responsive Layouts (Resizing behavior, fluid grids)
- Cross-platform Design for Web, Tablet, and Mobile
- Interactive Components and Motion Design
- Testing Usability within Figma
Day 3: Collaboration, Systems & Developer Handoff
- Managing Design Libraries Across Projects
- Real-time Collaboration and Feedback Tools
- Version Control, Branching & File Organization
- Figma Plugins for Productivity & Automation
- Developer Handoff: Inspect Panel, Redlines, Code Export
- Final Capstone Project: Design and Prototype a Mini App UI
