ระบบการออกแบบคืออะไร?

หากไม่มีระบบการออกแบบ นักออกแบบและนักพัฒนาทุกคนจะตัดสินใจเล็กๆ น้อยๆ ได้ด้วยตนเอง เช่น สีฟ้าที่แตกต่างกันเล็กน้อย สไตล์ปุ่มใหม่ ค่าระยะห่างอื่น หลังจากผ่านไปหนึ่งปี ผลิตภัณฑ์ก็มีสินค้าที่เกือบจะซ้ำกันหลายสิบรายการ ระบบการออกแบบจะแทนที่การตัดสินใจซ้ำๆ เหล่านั้นด้วยการตัดสินใจร่วมกัน

ระบบการออกแบบส่วนใหญ่มีสามชั้น โทเค็นการออกแบบเป็นค่าที่มีชื่อ เช่น color.primary, space.4 หรือ motion.duration.short ที่จะจัดเก็บการตัดสินใจเบื้องต้น ส่วนประกอบต่างๆ เช่น ปุ่ม อินพุต การ์ด และกล่องโต้ตอบ ถูกสร้างขึ้นจากโทเค็นเหล่านั้นและรวมทุกสถานะ แนวทางปฏิบัติบันทึกวิธีใช้แต่ละส่วนประกอบ วิธีเขียนป้ายกำกับและข้อความ และกฎการเข้าถึงใดบ้างที่นำไปใช้

ระบบการออกแบบมีอยู่สองแห่ง: ในเครื่องมือออกแบบ เป็นไลบรารีส่วนประกอบ และในโค้ด เมื่อนักพัฒนาแพ็คเกจติดตั้ง การรักษาทั้งสองให้ตรงกันเป็นส่วนที่ยากที่สุด เมื่อปุ่มที่เข้ารหัสไม่ตรงกับปุ่มที่ออกแบบอีกต่อไป ผู้คนก็จะเลิกเชื่อถือระบบ

การเคลื่อนไหวก็อยู่ในระบบด้วย ระยะเวลา การค่อยๆ เปลี่ยนเส้นโค้ง และการตั้งค่าสปริงสามารถเป็นโทเค็นได้ และส่วนประกอบแบบโต้ตอบจำเป็นต้องมีลักษณะการทำงานที่กำหนดไว้สำหรับการวางเมาส์ การกด การโหลด และการเปลี่ยน ExodeUI ซึ่งเราทำขึ้นมา จะจัดเก็บพฤติกรรมนั้นไว้ในไฟล์เปิดไฟล์เดียวที่มีสถานะและฟิสิกส์สปริง ดังนั้นคอมโพเนนต์เดียวกันจึงเล่นใน React, Vue, SwiftUI, Flutter และเฟรมเวิร์กอื่นๆ

ตัวอย่างสาธารณะที่รู้จักกันดี ได้แก่ Material Design ของ Google, Human Interface Guidelines ของ Apple, Carbon ของ IBM และ Polaris ของ Shopify การอ่านสิ่งเหล่านี้เป็นวิธีที่ดีในการดูว่าระบบมีความสมบูรณ์อย่างไร