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 three weeks and 18 hours, you’ll gain practical skills in building design tokens, styles, components, and documentation in Figma, while leveraging AI-powered workflows.
🔷 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.
🤖 AI Integration: Explore how AI can enhance token generation and documentation efficiency.
✔ 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.
Learn the importance of structure and consistency in design and understand what a design system is, including its definition, value, and when to create one.
Explore the Atomic Design approach and its core components to build cohesive and scalable systems.
Learn the end-to-end process of building a design system from research to maintenance.
Understand the key differences and relationships between styles, design tokens, and variables, and how they work together to create scalable design systems.
Learn how design tokens create consistency and scalability, bridging the gap between design and development.
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.
Learn how to create and apply color styles in Figma.
Learn how to create and apply primitive color variables in Figma.
Learn how to create and apply semantic/alias color variables in Figma.
Learn how to create and apply component-specific color variables in Figma.
Learn how to use AI to generate token structures and color tokens.
Understand key principles and best practices for typography, including hierarchy, readability, and accessibility, to ensure effective and consistent designs.
Create a practical and scalable set of typography tokens and styles.
Provide foundational knowledge about creating consistent spacing and sizing scales for scalable and structured design systems.
Create a consistent and scalable spacing and sizing system using grid-based principles and best practices.
Understand the role of effects (shadows, borders, blurs) in design systems.
Learn to create, organize, and apply scalable effects (shadows, borders, and blurs) as tokens for cohesive and consistent design systems.
Learn how to use AI-powered tools and frameworks to streamline the creation of typography, spacing, and effects tokens.
Learn the fundamentals of Atomic Design and its hierarchy—atoms, molecules, and organisms—to create modular and reusable 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.
Create basic design system building blocks (atoms), and refine them through peer and instructor feedback.
Build molecules and organisms using atoms and variables, and assemble them into a complete screen layout.
Learn how to create clear, accessible documentation to ensure consistency and collaboration in design systems.
Document components by creating usage guidelines, visual examples, and best practices for consistent application.
Understand governance models, versioning, and collaboration practices to maintain scalable design systems.
Learn how to use AI tools to efficiently generate and manage documentation for design systems.
🗓️ 1st Session:
Date and Time: Friday, 7 February • 9:30 AM – 10:30 AM (Cairo Time).
Topic: Introduction & Overview
🗓️ 2nd Session:
Date and Time: Friday, 7 February • 2:00 PM – 5:00 PM (Cairo Time).
Topic: Design Tokens and Styles (Part 1)
🗓️ 3rd Session:
Date and Time: Saturday, 8 February • 2:00 PM – 6:00 PM (Cairo Time).
Topic: Design Tokens and Styles (Part 2)
Guest interview.
🗓️ 4th Session:
Date and Time: Saturday, 15 February • 12:00 PM – 6:00 PM (Cairo Time).
Topic: Atomic Design Principles.
Topic: Component Design & Screen Assembly.
(Includes breaks)
🗓️ 5th Session:
Date and Time: Saturday, 22 February • 12:00 PM – 4:00 PM (Cairo Time).
Topic: Documentation, Governance, and maintenance.
Guest interview.
🗓️ 6th Session:
Date and Time: Saturday, 22 February • 4:00 PM – 4:30 PM (Cairo Time).
Topic: Capstone project details.
Enroll with your friend or work colleague and both of you will get 15% discount contact Zomra on LinkedIn
Google