Design Systems & Craft ระดับ: Intermediate 8 ชม. 30 นาที

Crafting Design Systems: From Design Tokens to Enterprise Code

สร้างระบบดีไซน์ระดับโปรดักชันที่เชื่อมต่อ Figma เข้าสู่ Codebase อย่างไร้รอยต่อ ลดเวลาและข้อผิดพลาดในการพัฒนา

ดร. กานต์พิชชา ภัทรเดช
ดร. กานต์พิชชา ภัทรเดช
Lead Design Technologist & Design System Specialist
•
อัปเดตล่าสุด: Sep 2026

เกี่ยวกับหลักสูตรนี้

หลักสูตรเจาะลึกการสร้าง Design System ตั้งแต่รากฐาน การนิยาม Semantic Tokens, การจัดการ Palette และ Dark/Light Mode Tokens ไปจนถึงการ Build Component Library ด้วย Clean CSS และ Web Standards โดยไม่ยึดติดกับ Framework ตัวใดตัวหนึ่ง สิ่งที่ผู้เรียนจะได้รับ: • สถาปัตยกรรม Token 3 ระดับ (Global, Semantic, Component) • เทคนิคการสร้าง Color Scales ด้วย OKLCH / HSL เพื่อการมองเห็นที่สมบูรณ์แบบ • การทำ Headless Component State สำหรับ UI ที่ซับซ้อน • แบบฝึกหัดและเอกสาร Token Spec พร้อมใช้งานทันที

สารบัญเนื้อหาหลักสูตร

2 บทเรียน • 6 ตอน
บทที่ 1: สถาปัตยกรรม Design Tokens และ รากฐานการออกแบบ 3 ตอน
ทำความเข้าใจ Design Tokens: Global, Semantic และ Component Tier
คู่มือเชิงลึก: สถาปัตยกรรม Color Ramp และ Dark Mode Tokens
ดูตัวอย่างฟรี 10 นาทีอ่าน
แบบทดสอบท้ายบท: ประเมินความเข้าใจ Design Tokens Architecture
5 ข้อคำถาม
บทที่ 2: การพัฒนา Component Library และ Micro-Interactions 3 ตอน
Typography Scales & Fluid Layout System ด้วย CSS Clamp
19:45
การสร้าง Button Component State Machine และ Accessible Focus Ring
22:15
ชุดไฟล์ทรัพยากร: Figma Token Spec & CSS Variables Boilerplate
ดาวน์โหลดไฟล์

ผู้สอนประจำหลักสูตร

ดร. กานต์พิชชา ภัทรเดช

ดร. กานต์พิชชา ภัทรเดช

Lead Design Technologist & Design System Specialist

อดีต Lead Product Designer ประสบการณ์กว่า 12 ปีในการออกแบบและสร้างระบบ Design Tokens ให้แก่ผลิตภัณฑ์ระดับสากล

Crafting Design Systems: From Design Tokens to Enterprise Code
● พร้อมเข้าเรียนได้ทันที
฿1,890 ฿2,490
เข้าถึงเนื้อหาได้ตลอดชีพ (Lifetime Access)
สมัครเรียนคอร์สนี้ (สั่งซื้อ)
เนื้อหาทั้งหมด 6 ตอน (8 ชม. 30 นาที)
เอกสารสเปกและไฟล์โค้ดสำหรับดาวน์โหลด
แบบทดสอบท้ายบทพร้อมตรวจผลทันที
เรียนได้ทุกอุปกรณ์ตลอด 24 ชั่วโมง