Back to Courses
The Facebook Design System With Figma Variables | UX UI Advanced
Become a Senior Designer And Master Tokens, Responsive, and Atomic Design Through Project-Based Learning
12h 30m
Advanced
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: Building the "Big Pieces" or "Blocks". Assembling the Settings, Navigation Bars, and the complex Feed Post with nested media slots.
Module 4: Template & Page Logic: Taking our blocks 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?
