Back to Courses
Streaming UX Design System: A Netflix Case Study | UX UI Advanced
Master the art of building design systems through a project based building. Dive deep into figma variables, responsive design, component properties, and much more.
1h 15m
Advanced
This isn't your typical "How to use Figma" tutorial. This course is a high-octane deep dive into Design Systems Architecture, using the most complex streaming service on the planet—Netflix—as our primary case study. We are moving past pixel-pushing and into the realm of infrastructure, logic, and scalability.
The Core Philosophy
The goal is to move you from a "Designer" to an "Architect." We treat every UI element as part of a living ecosystem. If a component can't survive a content stress test or a device breakpoint, it’s trash. We build with the "Atomic" methodology, ensuring that every small change at the foundation ripples perfectly through the entire system.
What You Will Build
A Multi-Tier Variable Library: You will learn to architect a library that goes beyond simple colors. We implement Primitives, Semantic, and Component-level tokens so you can re-theme the entire system in seconds.
The "Slot" Component Method: Master the advanced technique of using placeholder slots to create flexible containers like Drawers, Tooltips, and Cards. This eliminates the need for detaching components and keeps your system "linked" forever.
Complex Functional Organisms: We don't just make buttons. We build high-logic blocks like the Video Card and the Video UI, complete with responsive Auto Layout behaviors and conditional states.
Modules
Getting Started
File Setup
Foundations
Components
Sections
Templates
Course End
Module 1: Getting Started: This is where you get access to the course resources, introduction to the course, and a quick explanation into the core of "Atomic Design".
Module 2: File Setup: Here, we are going to set up the figma file that we will be using to build the design system. We will structure the file using Atomic Design building from the ground up. We will also be setting up our variables library.
Module 3: Foundation: Setting up the "DNA." Grids, spacing variables, and typography tokens that serve as the backbone for everything else.
Module 4: Components: Combining atoms into reusable units like Identity Rows (Avatar + Name), Rating Components, and specialized List Items.
Module 5: Sections: This is where we build the heavy lifters. We assemble complex "Sections" like the Global Navigation, the Interactive Video Player UI, and the Content Feed. We focus heavily on "State Management" here.
Module 6: Template & Page Logic: Taking our sections and assembling them into full-scale responsive templates. We stress-test these against various content types to ensure they are bulletproof.
Module 7: Course End: We will be taking a look at the things we have learned and giving advice for next steps.
Disclamer: This course is an independent educational analysis and is not affiliated with, endorsed by, or sponsored by any of the companies referenced, including Netflix, Inc. All trademarks, logos, and brand names are the property of their respective owners and are used solely for identification and educational purposes. All designs, systems, and assets presented are original recreations and are not copied from proprietary sources.
About the mentor
Ashraf Youssef
Senior Designer
Hello, my name is Ash. I am a Senior Design Systems Architect with 6+ Years of Experience working with large tech companies, agencies and large financial institutions.
Frequently asked questions
What do you mean by project-based learning?
Are there any prerequisites for these courses?
Can I access the course materials on my mobile device?
Will I land a job because of these courses?
What is the difference between a designer and a design systems architect?
