Next-Gen Design Academy
UI/UX • 3D Spline • Next.js SaaS
Masterclasses
UI/UX Design
UI/UX Design
Verified Masterclass
all_levels
5 (1 reviews)
Figma & Modern UI/UX Architecture: From Design System to Code
Master enterprise design systems, Figma variables, auto-layout 5.0, and developer handoff pipelines.
N
Lead Faculty:
Nexus Super Admin
4 Weekly Modules
8 Interactive Sessions
Accredited Certificate
Full Curriculum Included
440m Video
What You'll Build & Master
An intensive, project-driven UI/UX design masterclass engineered for product designers, creative directors, and frontend engineers. Master scalable token architectures, multi-mode variables, spatial grids, accessible interfaces, and direct design-to-code synchronizations.
Course Syllabus & Weekly Sessions
Comprehensive schedule with core tools, lead instructors, and milestones.
Session 1: Atomic Design Systems, Typography & 8pt Spatial Grids
Video Session
• Core Philosophy of Atomic Design (Atoms, Molecules, Organisms, Templates, Pages).
• Mathematical Foundations: Constructing an 8pt / 4pt Baseline Grid.
• Fluid Typography Scales (...
Free Preview
50m
Session 2: Auto-Layout 5.0, Nested Stacks & Polymorphic Components
Video Session
• Auto-Layout deep dive: Fill container, Hug contents, Min/Max boundary constraints.
• Nested flex layouts, Wrap modes, and Absolute position overlays inside cards.
• Component Pro...
60m
Week 1 Assessment: Figma Tokens & Auto-Layout
3 Questions • 15 min • 75% Passing Grade
Session 3: Variable Modes, Expressions & Dynamic States
Video Session
• Prototyping with Variables: Number counters, String states, Boolean conditional branches.
• Interactive stateful components (Checkout cart counter, tab switcher, filter dropdowns...
55m
Session 4: Accessibility Audits & WCAG 2.2 Compliance
Video Session
• WCAG 2.2 Guidelines: AA & AAA Contrast standards, Color-blindness simulations.
• Keyboard accessibility: Designing distinct focus rings, skip links, and active states.
• Touch Ta...
45m
Session 5: Designing for CSS Grid, Flexbox & Tailwind CSS
Video Session
• Aligning Figma Architecture with Modern CSS Layout engines (Flexbox & CSS Grid).
• Tailwind CSS token mapping: Spacing scale (p-4, gap-6), Color palettes, Border radii.
• Respons...
55m
Session 6: Design Tokens Export & Component Documentation
Video Session
• Exporting W3C Design Tokens via Tokens Studio & Style Dictionary.
• Component Documentation: Writing clear usage guidelines, do's & don'ts for engineering teams.
• Version Contro...
50m
Session 7: Building a Multi-Tenant SaaS Analytics Dashboard
Video Session
• Enterprise UI Architecture: Data tables with sorting/filtering, Metric stat cards, Apex charts.
• Dark Mode vs Light Mode: Implementing seamless token mode switching in Figma.
•...
65m
Session 8: Design Critique, Usability Testing & Case Study Storytelling
Video Session
• Conducting Heuristic Evaluations and moderated usability testing sessions.
• Crafting a compelling Case Study for Top Global Agency & Tech Hiring.
• Portfolio Presentation: Frami...
55m
Lead Faculty & Mentors
N
Nexus Super Admin
Executive Course Lead
Lead System Director & Academic Administrator at Nexus Design Academy.
Masterclass Tuition
1,500.00 EGP
3,000.00 EGP
50% OFF
8 comprehensive hands-on sessions
0 real portfolio milestone projects
Direct mentor code reviews & feedback
Accredited Nexus completion certificate
This website uses cookies to improve your web experience.
