Back to Courses

The Netflix Design System Using Figma Variables | 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.

What you get
  • Module 1: Foundation: Setting up the "DNA." Grids, spacing variables, and typography tokens that serve as the backbone for everything else.

  • Module 2: Functional Atom/Molecules: Combining atoms into reusable units like Identity Rows (Avatar + Name), Rating Components, and specialized List Items.

  • Module 3: Organism Architecture: 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 4: 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.

Money Back Guarantee

Modules

1. Introduction

10:19

1. Introduction

10:19

2. Downloadable Files

02:00

2. Downloadable Files

02:00

3. Atomic Design

10:26

3. Atomic Design

10:26

4. File Setup

07:55

4. File Setup

07:55

5. What is a Branded House

13:35

5. What is a Branded House

13:35

6. Primitive Collection

17:39

6. Primitive Collection

17:39

7. Semantic Collection

16:56

7. Semantic Collection

16:56

8. Component Collection

21:42

8. Component Collection

21:42

9. Responsive Variables

12:40

9. Responsive Variables

12:40

10. Text Styles

18:47

10. Text Styles

18:47

11. Effects & Grid Styles

09:56

11. Effects & Grid Styles

09:56

12. Design Annotations

08:16

12. Design Annotations

08:16

13. Colors / Primitives

28:23

13. Colors / Primitives

28:23

14. Colors / Semantic

07:11

14. Colors / Semantic

07:11

15. Typography

24:56

15. Typography

24:56

16. Icons & Logos

10:01

16. Icons & Logos

10:01

17. Effects

04:45

17. Effects

04:45

18. Spacing & Grid

19:37

18. Spacing & Grid

19:37

19. Structuring Our Work

10:02

19. Structuring Our Work

10:02

20. How Components Work

05:26

20. How Components Work

05:26

21. How Variants work

04:56

21. How Variants work

04:56

22. Component Properties

07:54

22. Component Properties

07:54

23. How Instance Swap Works

02:59

23. How Instance Swap Works

02:59

24. Buttons Part 1

47:29

24. Buttons Part 1

47:29

25. Buttons Part 2

23:28

25. Buttons Part 2

23:28

26. Alerts

08:30

26. Alerts

08:30

27. Avatar

35:30

27. Avatar

35:30

28. Ratings

05:38

28. Ratings

05:38

29. Shortcut Tiles

04:02

29. Shortcut Tiles

04:02

30. Checkboxes & Radio Buttons

14:14

30. Checkboxes & Radio Buttons

14:14

31. Toggles

19:09

31. Toggles

19:09

32. Loading Indicator

04:35

32. Loading Indicator

04:35

33. Sliders

18:52

33. Sliders

18:52

34. Page Indicator

06:30

34. Page Indicator

06:30

35. Tabs

09:50

35. Tabs

09:50

36. Tooltips

08:25

36. Tooltips

08:25

37. What are Slots

06:08

37. What are Slots

06:08

38. _Slots

04:48

38. _Slots

04:48

39. List Item

08:54

39. List Item

08:54

40. Feed / Post / Media

14:32

40. Feed / Post / Media

14:32

41. Drawers & Device Mockups

08:04

41. Drawers & Device Mockups

08:04

42. _Modal Sheet

03:40

42. _Modal Sheet

03:40

43. Inputs

23:21

43. Inputs

23:21

44. How To Make Anything Responsive

37:09

44. How To Make Anything Responsive

37:09

45. Youtube Responsive Example

03:42

45. Youtube Responsive Example

03:42

46. Feed / Post

13:22

46. Feed / Post

13:22

47. Login / Form

03:46

47. Login / Form

03:46

48. Marketplace / Buybox

18:47

48. Marketplace / Buybox

18:47

49. Settings / Shortcut Menu

04:19

49. Settings / Shortcut Menu

04:19

50. Navigation

27:40

50. Navigation

27:40

51. Page Profile / Header

08:10

51. Page Profile / Header

08:10

52. Page Profile / Details

08:13

52. Page Profile / Details

08:13

53. Reels & Stories

06:37

53. Reels & Stories

06:37

54. _Template Shell

05:08

54. _Template Shell

05:08

55. Page Profile

02:41

55. Page Profile

02:41

56. Feed

04:10

56. Feed

04:10

57. Login

04:39

57. Login

04:39

58. Drawer

03:38

58. Drawer

03:38

59. Settings

05:37

59. Settings

05:37

60. Add Friends

07:51

60. Add Friends

07:51

61. Marketplace Listing

01:50

61. Marketplace Listing

01:50

62. Feed / Dark Mode

15:28

62. Feed / Dark Mode

15:28

63. Outro

0:38

63. Outro

0:38

About the mentor

Ashraf Youssef

Senior Designer

Senior Designer with 6+ Years of Experience in the Financial Sector

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?

What you get

text

Money Back Guarantee