Design Systems 🆕
Learn about the underlying tech stack, components and code behind design and how to take things from static to implementation.
Chapters
Design System UI Kits
In this lesson, we'll explore some of the most popular design system UI kits for Figma and how to use them
Resources
📓 Exercise: Choose one of the Design System UI Kits from the list below, open it in Figma and start to assemble a few screens using the provided components.
🔹 Material 3 (M3) – Google's latest design system focusing on dynamic theming, adaptive components, and accessibility.
🔹 Material 3 (M3) – Google's latest design system focusing on dynamic theming, adaptive components, and accessibility.
🔹Orbit – Kiwi.com's open-source design system tailored for travel-related interfaces and consistent user experiences.
🔹Backstage Design System – A Figma community file providing reusable UI components and patterns for designing efficient workflows.
🔹Fluent 2 – Microsoft's modern design system emphasizing accessibility, cross-platform consistency, and adaptable UI patterns.
🔹Atlassian Design System – A design language for Atlassian products, offering scalable UI components and guidelines for collaboration tools.
🔹Zendesk Garden – Zendesk’s design system provides components, patterns, and accessibility best practices for customer support interfaces.