Design System หรือ Single Source of Truth ของระบบการออกแบบ

Hola! 👋🏻 Design System หรือ ระบบการออกแบบ เปรียบเสมือน Single Source of Truth ที่ช่วยสร้างระบบที่ทุกคนในทีมสามารถเข้าถึง, ทำความเข้าใจ, และนำไปใช้ได้ตามส่วนงานของตัวเอง

cover-img

Hola! 👋🏻 Design System หรือ ระบบการออกแบบ เปรียบเสมือน Single Source of Truth ที่ช่วยสร้างระบบที่ทุกคนในทีมสามารถเข้าถึง, ทำความเข้าใจ, และนำไปใช้ได้ตามส่วนงานของตัวเอง

introduction-to-design-system-1.png

Design System ประกอบไปด้วย Collection of Reusable Components ที่ช่วยให้ทีมสามารถนำส่วนประกอบเหล่านี้ไปใช้ในการสร้างสรรค์ผลงานได้อย่างรวดเร็วและมีการรองรับการออกแบบที่ยั่งยืน

ระบบการออกแบบที่ดี ทำหน้าที่เป็นเหมือน North Star ให้กับทีม Product Development เนื่องจากถูกใช้เป็น Guideline หลักในการทำงานของทั้งทีมและทั้งโปรเจค ซึ่งประกอบไปด้วย

  • Components หรือ ส่วนประกอบในแอปหรือเว็บไซต์ที่ถูกออกแบบมาเพื่อใช้ใหม่ได้ (reusable), ส่วนประกอบเหล่านี้จะรวมถึงปุ่ม, แบบฟอร์ม, ไอคอน เป็นต้น

  • Style Guides หรือ คู่มือการออกแบบ แสดงสไตล์และมาตรฐานขององค์ประกอบการออกแบบของภาพรวมของ UI เช่น ฟ้อนท์อะไร, ขนาดเท่าไร, สีสันอย่างไร เป็นต้น

  • Design Principles / Patterns หรือ กฎหรือหลักที่ทีมออกแบบจะปฎิบัติตามเมื่อสร้างสรรค์

introduction-to-design-system-2.png

คุณสมบัติ/ จุดเด่นของ Design system,

  • Consistency = มีความสม่ำเสมอ
  • Scalable = รับรองการพัฒนาอย่างยั่งยืน
  • Maintainable = บำรุงรักษาได้ง่าย
  • DRY (Don’t Repeat Yourself) = ช่วยประหยัดเวลาโดยการไม่ทำซ้ำ
  • Code-friendly = มีมาตรฐานที่สามารถนำไปเขียน code ได้ง่ายยิ่งขึ้น

introduction-to-design-system-3.png

Peace! ✌️