waranyahTeaching · Design system01(09)

Bootcamp

Design System Bootcamp

Nov 2025 · PEA · 2-day class2D

Waranya
S. (DYU)

Curriculum designer & instructor

Teaching teams to build a system, not just a library.

Tokens
Components: base → function → feature
Recipes, PALs & hub–spoke

waranyahDesign System Bootcamp02(09)

Day 2 · Build →

Day 1 · Foundations →

Introduction →

DYU presenting the slide 'Design system ≠ component library' to the class

Hi! I'm DYU About the class

I designed and taught this two-day, hands-on bootcamp for 29 people at PEA (Provincial Electricity Authority), through Odd-e. Designers, developers and BAs, most of them new to design systems.

It's built on my production work for ttb ONE App, Business ONE and Thai Life Insurance. Day 1: tokens, components and handoff. Day 2: every team builds its own system and presents it.

8 sessions76-slide deckFigma hands-onTeam build + vote

waranyahDesign System Bootcamp03(09)

Language first, components second.

A design system is a shared language: between designers, between design and dev, and with users. So the class starts from real pains and ends with a system people built themselves.

My approach

01
Start from pain, not theoryEach group maps the problems in its own design process before seeing a single component.
02
Design system ≠ component libraryCommon behaviours like pull-to-refresh and long-press are the first layer of consistency. Brand comes after.
03
Learn by buildingColor, text, size and spacing tokens, then base, function and feature components, in Figma.
04
Think like a systemFive maturity levels, pace layers, and a hub–spoke model with recipes and PALs, so teams can pick the level that fits them.

Teaching design system maturity, Level 3: dedicated core team

waranyahDesign System Bootcamp04(09)

⁺70%

Self-rated design-system skill (1.86 → 3.17 / 5)

Result & Growth

4.07/5

Overall satisfaction

93%

Say they can now explain DS levels or apply them to their team (self-reported)

26/29

Rated their skill higher afterwards

From the post-class feedback form (29 responses). 18 of 29 rated themselves 1 out of 5 coming in. Afterwards, nobody did.

Key metrics

29participants: UX/UI, dev & BA
79%rated the session 4 or 5 out of 5

Before class

1.86

After class

3.17

waranyahDesign System Bootcamp05(09)

Present & vote →

Group work →

In the room →

A group gathered around a laptop during the build workshop — Teams huddle on their own system

Explaining color token naming: element, saturate, hierarchy, state — Token naming, live in Figma

The full room working on laptops during the hands-on session — Hands-on: token → component

Wide view of the classroom with groups at tables — 29 people, mixed roles at every table

I mixed designers, developers and BAs at every table, so handoff problems came up right there.

Two full days

waranyahDesign System Bootcamp06(09)

Session map →

Curriculum →

Token

Color, text, size & spacing, from raw value to alias to component token

Component

Base → function → feature. Lego bricks, then mechanisms, then sets

Recipe

Reusable patterns & behaviours, e.g. search variants and form validation timing

PALs & Hub

Hub–spoke: product libraries that promote proven patterns back to the core

Day 1 Foundations & basic tokens

Pain mapping in your design process
Why a design system matters: common behaviours
Inside the system: anatomy
Figma hands-on: token to component
Design-to-code collab & Storybook

Day 2 Build your own system

Design system maturity levels 1–5
Think like a system: pace layers
Ecosystem & hub–spoke model
Team build → present → vote → back to the pain map

waranyahDesign System Bootcamp07(09)

From the deck.

76 slides, written in Thai and English, with real examples from Material 3, Atlassian, IBM Carbon and Shopify Polaris.

Slide: Design System = Foundation (token, asset), Library (component, pattern, guideline), Apply (business flow) — **Anatomy**Foundation → library → apply

Slide: Color token levels — raw value, global, alias, component token — **Color token levels**Raw → global → alias → component

Slide: Loan calculator example of a core hub design system with base components — **Hub–spoke, worked example**One loan calculator, traced from core to domain

waranyahDesign System Bootcamp08(09)

In their own words.

Wow. I've never worked at this level of detail before. It's new knowledge, eye-opening. I see the value of a design system so much more now. รู้สึกว้าววมากค่ะ ปกติไม่เคยทำละเอียดแบบนี้ ถือเป็นความรู้ใหม่ เปิดโลกค่า เห็นข้อดีของ DS มากขึ้นมากๆ UX/UI designer

I used to only use components that already existed. Building one from scratch showed me how much detail and effort really goes into it.ได้ลงลึกทำความเข้าใจมากขึ้นจากที่เเค่เคยใช้ component จากที่มีอยู่แล้ว พอได้ปั้นของขึ้นมาเองตั้งแต่แรก…UX/UI designer

Practical content I can actually use. The instructor and TAs were lovely, and their guidance made it so much clearer.เนื้อหาที่สามารถนำไปใช้ได้จริง / อาจารย์และ TA น่ารักมากๆ ตอนให้คำแนะนำทำให้เข้าใจมากขึ้นเยอะเลยUX/UI designer

I loved the "steal ideas" part. Learning from the other groups gave me new perspectives and techniques.ชอบที่มีพาร์ทขโมยไอเดีย การศึกษาจากเพื่อนๆกลุ่มอื่น ทำให้ได้มุมมองและเทคนิคการทำงานใหม่ๆUX/UI designer

I liked how often she shared real experience. It made what she taught much easier to picture.ชอบที่เล่าประสบการณ์บ่อย ๆ ทำให้เห็นภาพสิ่งที่สอนมากขึ้นUX/UI designer

I learned things I'd always wanted to learn and never had the chance to. Enjoyed it a lot.ได้เรียนรู้อะไรที่ไม่เคยเรียนและอยากเรียนมาตลอด เลยได้เข้าใจอะไรหลาย ๆ อย่างมากขึ้น เอนจอยมากค่าBusiness analyst

The instructor has real expertise.ผู้สอนมีความเชี่ยวชาญDesigner who builds design systems

Knowing that building a design system has a process helped me put my thinking in order.พอรู้ การสร้าง DS ก็มี process ทำให้สามารถจัดลำดับความคิดในการสร้างได้ดีUX/UI designer

It went deep into design at enterprise level.ลงลึกถึงการ design ระดับ enterpriseDeveloper & UX/UI

So much fun!สนุกมากค่ะUX/UI designer

"How would you explain design systems to a teammate?"

A shared language: designer to designer, designer to dev, and dev to dev.UX/UI & BA

Like OOP: classes ready to extend and implement, at several levels.Developer

Designing with a system, so the whole UI stays consistent and reusable, and saves effort.Developer

There are several levels. Which one you choose depends on money, people, time and fit with the project.Business analyst

waranyahDesign System Bootcamp09(09)

Let's train
your team!

I'd love to help your team build a design system people actually use.

Contact me