I Remade The Facebook Design System Using Figma | Advanced

Become a Senior Designer And Master Tokens, Responsive, and Atomic Design Through Project-Based Learning

What you’ll learn
✓ You Will Learn How To Design Like Facebook
✓ Become an Expert In Design Systems
✓ You Will Learn About Themes And The Branded House
✓ Design Like A Senior Experience Designer
✓ Learn How to Setup And Structure a Three Tier Architecture Variables Library
✓ Learn The Difference Between A Block And A Component
✓ How To Use Instance Swap In Your Components
✓ Master Auto Layout And Nested Components
✓ You Will Build Facebook’s Design System
✓ Impress Your Next Manager And Experience Director
✓ Become Job Ready With The Skills You Need Day One
✓ You Will Understand How Design Systems Are Made
✓ Learn How to Made Responsive Design
✓ You Will Be Able To Switch From Light Mode To Dark Mode With One Click
✓ Learn What Are Slots, And How To Use Them
✓ Learn How To Structure Your Figma Files
✓ How To Name Your Tokens And Variables
✓ You Will Create A Professional Top-Tier Design System
✓ Get The Facebook Design System File
✓ You Will Learn The Most Professional workflows and shortcuts

Requirements
● No Previous Skills Needed
● You Will Need Figma
● No Previous Design Skills Needed

Description
Hello there! My name is Ash, I am a Senior Designer with 5+ Years of Experience working in tech companies, banks, and Agencies as a Design Systems Architect.

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 social interface on the planet—Facebook—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 Primal, 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 Facebook Feed Post and the Marketplace Buy Box, complete with responsive Auto Layout behaviors and conditional states.

Course Curriculum Breakdown

• 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.

The Mentor’s Guarantee

By the end of this course, you will have a professional-grade Figma library that is more organized and technically sound than what most “Senior” designers are currently shipping. You’ll stop guessing what to do, and see first hand how Senior Designers from top agencies work.

Who this course is for
■ Experience Designers
■ UI Designers
■ Graphic Designers
■ Experience Directors
■ Figma Lovers
■ Tech Enthusiasts