Login to Skillfora

Login to Skillfora and resume your professional growth.


Atomic design Component documentation Token-based design

Design System from Scratch — Tokens, Components, Docs

Ayesha Siddiqui
Instructor

Ayesha Siddiqui

Subject

UI/UX Design

Last updated

06 May 2026

About Lesson Pack

Eight ninety-minute sessions where we build a real design system in Figma — from foundations (colour, type, spacing tokens) through 12 production components, all documented and library-published. We cover the trade-offs (build vs adopt, scope creep, governance) that decide whether a system survives. Best for designers about to lead this project at their company, or solo designers who want an interview-ready system on their portfolio.

Session Details

Session# 1: Why systems fail — and the goals that prevent it 1Hr 30Min
Real-world failure modes (over-scoping, no governance, drift). We define the goals for your system before any pixels.

Session# 2: Foundations — colour, type, spacing as tokens 1Hr 30Min
Build the token layer first. Light/dark, scale, semantic vs raw tokens. Set up Figma variables properly.

Session# 3: Component principles + the first 4 components 1Hr 30Min
Atomic thinking. We build button, input, card, badge with full variants and states. The patterns repeat from here.

Session# 4: The next 4 components — tables, forms, modals 1Hr 30Min
The harder ones. Composition rules, slot patterns, edge cases. Tables especially — every system trips on them.

Session# 5: The last 4 components + interaction patterns 1Hr 30Min
Navigation, toasts, tooltips, empty states. Interaction patterns that tie the system together.

Session# 6: Documentation — write it for engineers 1Hr 30Min
Each component documented with usage, do/don't, anatomy, props. The documentation that prevents Slack questions.

Session# 7: Publish the library + governance plan 1Hr 30Min
Publish the library. Define who can edit, how changes get approved, the release notes process. The boring part that makes systems last.

Session# 8: Hand-off, portfolio piece, next steps 1Hr 30Min
Document the system as a portfolio case study. Plan how you will roll it out at work or to clients.

What will you Learn?

Ship a real published design system library you can re-use

Make the trade-off calls (build/buy, scope, governance) deliberately

Document the system so engineers can implement without back-and-forth

Have an interview-ready system to show on your portfolio

  • Upon completion of the course, you will have acquired these skills.
  • Design tokens Component architecture System governance Documentation craft

What are the requirments of this course?

Comfortable in Figma (auto-layout, basic components)

A product or brand to anchor the system to

A Figma Professional plan or willingness to use Free with limits

Know Your Instructor

Ayesha Siddiqui
Senior product designer. Led design at Bagallery for two years. I help designers move from "I make things look nice" to "I make things that actually work for users".
0 Rating 1.2k Reputation 0 Student

My sessions are research- and critique-led. We use real briefs (yours or mine), build flows in Figma, run quick user tests, and iterate. Light on theory, heavy on doing.

Language Spoken Level
Urdu
Proficient
English
Advanced
Urdu
Proficient
English
Advanced
Urdu
Proficient
English
Proficient
Urdu
Proficient
English
Advanced
Urdu
Proficient
English
Proficient
Urdu
Proficient
English
Proficient
Urdu
Proficient
English
Proficient
Urdu
Proficient
English
Advanced
Urdu
Proficient
English
Advanced
Urdu
Proficient
English
Advanced
Urdu
Proficient
English
Proficient
Urdu
Proficient
English
Advanced
Urdu
Proficient
English
Advanced
Urdu
Proficient
English
Advanced
Urdu
Proficient
English
Proficient
Urdu
Proficient
English
Advanced

Ratings & Reviews

4.5

Rated 4 out of 1 Rating

5 star
82%
4 star
30%
3 star
15%
2 star
6%
1 star
10%

David W.

My sessions are research- and critique-led. We use real briefs (yours or mine), build flows in Figma, run quick user tests, and iterate. Light on theory, heavy on doing.

Language Spoken Level
Urdu
Proficient
English
Advanced
Urdu
Proficient
English
Advanced
Urdu
Proficient
English
Proficient
Urdu
Proficient
English
Advanced
Urdu
Proficient
English
Proficient
Urdu
Proficient
English
Proficient
Urdu
Proficient
English
Proficient
Urdu
Proficient
English
Advanced
Urdu
Proficient
English
Advanced
Urdu
Proficient
English
Advanced
Urdu
Proficient
English
Proficient
Urdu
Proficient
English
Advanced
Urdu
Proficient
English
Advanced
Urdu
Proficient
English
Advanced
Urdu
Proficient
English
Proficient
Urdu
Proficient
English
Advanced

Ratings & Reviews

4.5
2 weeks ago

I love the way the instructor goes about the course. So easy to follow, even though a
little bit challenging as expected.

Helpful?
Booking Options
Sessions 8
Duration Per Session 1Hr 30Min
Required Skill Level Intermidiate
Session Recording Yes
Recording Availiblity Lifetime access
};