The Design System Lab Bootcamp is a hands-on, immersive program designed to help you master the art of creating scalable, efficient, and adaptable design systems. Over the course of 4 weeks and 20 hours, you’ll gain practical skills in building design tokens, styles, components, and documentation in Figma.
🔷 Design Tokens: Understand and create typography, color, spacing, and effects tokens.
⚛️ Atomic Design Principles: Build atoms, molecules, and organisms, and assemble complete screens.
📐 Scalable Systems: Learn the processes for research, design, delivery, and maintenance.
🔧 Figma Mastery: Apply Auto Layout, component properties, and responsive design techniques.
📚 Documentation: Craft clear, accessible component and style documentation.
✔ A portfolio-ready mini design system showcasing your skills.
✔ Practical experience in creating and scaling design systems.
✔ A certificate of completion to highlight your expertise.
✔ Insights into design system governance and maintenance.
✔ Mastery of tools and techniques to streamline your workflow.
✅ UI/UX Designers Transitioning to Design Systems: Moving beyond standalone UI/UX projects.
✅ Product Designers: Looking to upskill and lead design system creation.
✅ Freelancers: Aiming to offer specialized design system services.
✅ UI Developers: Eager to understand design-centric aspects of systems.
I’m Mohamed Ismail, Product Design Lead at du, with over a decade of experience in crafting human-centered solutions and building scalable design systems.
I’m a design systems specialist with a proven track record of creating and managingsystems from concept to production. Over the past 6 years, I have:
I’m an active mentor on ADPList, sharing insights and guiding aspiring designers in their careers. My contributions include:
Empowering designers with practical skills and insights to build scalable design systems and unlock their creative potential.
Understand the key differences and relationships between styles, design tokens, and variables, and how they work together to create scalable design systems.
Learn how to create and apply color styles, primitive color variables, semantic/alias color variables, and component-specific color variables in Figma through hands-on activities and guided practice.
Understand key principles and best practices for typography, including hierarchy, readability, and accessibility, to ensure effective and consistent designs.
Provide foundational knowledge about creating consistent spacing and sizing scales for scalable and structured design systems.
Master Figma’s Auto Layout and learn how to define component-level spacing for responsive and scalable designs.
Explore Figma’s properties to create dynamic and reusable components, improving flexibility and efficiency in design workflows.
Date and Time: Friday, 11 July • 04:00, Cairo Time (GMT+2).
---------------------
Date and Time: Friday, 11 July • 05:30, Cairo Time (GMT+2).
---------------------
Date and Time: Saturday, 12 July • 12:00, Cairo Time (GMT+2).
---------------------
Date and Time: Saturday, 19 July • 12:00, Cairo Time (GMT+2).
---------------------
Date and Time: Saturday, 26 July • 12:00, Cairo Time (GMT+2).
---------------------
Date and Time: Saturday, 2 August • 12:00, Cairo Time (GMT+2).
---------------------
Date and Time: Saturday, 2 August • 05:30, Cairo Time (GMT+2).
---------------------
Google