ในการออกแบบส่วนติดต่อผู้ใช้ระบบการออกแบบคือกรอบงานที่ครอบคลุมของมาตรฐาน ส่วนประกอบที่นำกลับมาใช้ใหม่ได้ และเอกสารประกอบที่ชี้นำการพัฒนาผลิตภัณฑ์ดิจิทัลอย่างสม่ำเสมอภายในองค์กร ทำหน้าที่เป็นแหล่งข้อมูลที่เชื่อถือได้เพียงแหล่งเดียวสำหรับนักออกแบบและนักพัฒนา ทำให้มั่นใจถึงความสม่ำเสมอและประสิทธิภาพในโครงการต่างๆ ระบบการออกแบบอาจประกอบด้วย: ไลบรารีรูปแบบและส่วนประกอบ; คู่มือสไตล์สำหรับแบบอักษร สี ระยะห่าง ขนาดส่วนประกอบ และการจัดวาง; ภาษาการออกแบบส่วนประกอบที่เขียนโค้ดภาษาแบรนด์และเอกสารประกอบ ระบบการออกแบบช่วยในการออกแบบผลิตภัณฑ์ดิจิทัลและการพัฒนาผลิตภัณฑ์ เช่น แอปพลิเคชันมือถือ^{[ 1 ]}หรือเว็บไซต์

ระบบการออกแบบทำหน้าที่เป็นข้อมูลอ้างอิงเพื่อสร้างความเข้าใจร่วมกันระหว่างทีมออกแบบ วิศวกรรม และผลิตภัณฑ์ ความเข้าใจนี้ช่วยให้การสื่อสารและการทำงานร่วมกันระหว่างทีมต่างๆ ที่เกี่ยวข้องกับการออกแบบและสร้างผลิตภัณฑ์เป็นไปอย่างราบรื่น และท้ายที่สุดจะส่งผลให้ผู้ใช้ได้รับประสบการณ์ที่สม่ำเสมอ^{[ 2 ]}

ระบบการออกแบบที่โดดเด่น ได้แก่ Lightning Design System (โดย Salesforce) ^{[ 3 ]} Material Design (โดย Google) ^{[ 4 ]} Carbon Design System (โดย IBM) ^{[ 5 ]}และFluent Design System (โดย Microsoft) ^{[ 6 ]}

ข้อดีบางประการของระบบการออกแบบ ได้แก่:

• กระบวนการทำงานที่คล่องตัวตั้งแต่การออกแบบไปจนถึงการผลิต
• สร้างภาษาที่เป็นเอกภาพระหว่างและภายในทีมงานข้ามสายงาน
• สร้างโปรเจ็กต์ได้เร็วขึ้น ด้วยส่วนประกอบที่นำกลับมาใช้ใหม่ได้ และหลักการทำงานที่ใช้ร่วมกัน
• ผลิตภัณฑ์ที่ดีกว่า ผ่านประสบการณ์การใช้งานที่สอดคล้องกันมากขึ้น และภาษาการออกแบบที่เป็นมาตรฐานเดียวกัน
• ปรับปรุงการบำรุงรักษาและความสามารถในการขยายขนาดให้ดียิ่งขึ้น ผ่านการลดภาระด้านการออกแบบและเทคนิค
• มุ่งเน้นให้ทีมผลิตภัณฑ์มากขึ้น โดยการแก้ไขปัญหาทั่วไปเพื่อให้ทีมสามารถมุ่งเน้นไปที่การแก้ปัญหาความต้องการของผู้ใช้ได้^{[ 7 ]}

ระบบการออกแบบถูกนำมาใช้มานานแล้วภายใต้ชื่อเรียกที่แตกต่างกัน ระบบการออกแบบมีความสำคัญในวงการออกแบบนับตั้งแต่ถูกสร้างขึ้น แต่ก็มีการเปลี่ยนแปลงและปรับปรุงมากมายนับตั้งแต่เริ่มแรก การใช้ระบบหรือรูปแบบตามที่เรียกกันในทศวรรษ 1960 นั้น ถูกกล่าวถึงครั้งแรกในการประชุมวิศวกรรมซอฟต์แวร์ของ NATO (การอภิปรายเกี่ยวกับวิธีการพัฒนาซอฟต์แวร์) โดย Christopher Alexander ซึ่งดึงดูดความสนใจจากอุตสาหกรรม ในทศวรรษ 1970 เขาได้ตีพิมพ์หนังสือชื่อ “A Pattern Language” ร่วมกับ Murray Silverstein และ Sara Ishikawa ซึ่งกล่าวถึงรูปแบบที่เชื่อมโยงกันในสถาปัตยกรรมในวิธีที่ง่ายและเข้าใจได้ง่าย และนั่นเป็นจุดกำเนิดของสิ่งที่เรารู้จักกันในปัจจุบันว่า “ระบบการออกแบบ”

ความสนใจในด้านดิจิทัลกลับมาเฟื่องฟูอีกครั้งในช่วงครึ่งหลังของทศวรรษ 1980 เนื่องจากเครื่องมือนี้ถูกนำมาใช้ในการพัฒนาซอฟต์แวร์^{[ 8 ]}ซึ่งนำไปสู่แนวคิดของรูปแบบการออกแบบซอฟต์แวร์เนื่องจากรูปแบบต่างๆ สามารถรักษาไว้ได้ดีที่สุดในสภาพแวดล้อมการแก้ไขร่วมกัน จึงนำไปสู่การคิดค้นวิกิ แห่งแรก ซึ่งต่อมานำไปสู่การคิดค้นวิกิพีเดียเอง มีการจัดการประชุมเป็นประจำ และแม้แต่ในสมัยนั้นก็มีการใช้รูปแบบต่างๆ เพื่อสร้างส่วนติดต่อผู้ใช้^{[ 9 ]}ความสนใจยังคงเพิ่มขึ้นอย่างต่อเนื่องจนถึงทศวรรษ 1990 โดยงานวิจัยของ Jennifer Tidwell ปิดท้ายทศวรรษ^{[ 10 ]} ความสนใจทางวิทยาศาสตร์ยังคงดำเนินต่อไปจนถึงทศวรรษ 2000 ^{[ 11 ]}

ความสนใจในกระแสหลักเกี่ยวกับภาษารูปแบบสำหรับการออกแบบ UIกลับมาเฟื่องฟูอีกครั้งด้วยการเปิดตัวYahoo! Design Pattern Library ในปี 2549 ^{[ 12 ]}พร้อมกับการเปิดตัว Yahoo! User Interface Library ( เรียกสั้นๆ ว่า YUI Library ) การเปิดตัวพร้อมกันนี้มีจุดประสงค์เพื่อให้สามารถออกแบบได้อย่างเป็นระบบมากกว่าการใช้เพียงส่วนประกอบต่างๆ ที่ไลบรารี UI จัดเตรียมไว้ให้

Material Design ของ Google ในปี 2014 เป็นครั้งแรกที่บริษัทเรียกว่า "ภาษาการออกแบบ" (เวอร์ชันก่อนหน้านี้เรียกว่า "Holo Theme") หลังจากนั้นไม่นาน บริษัทอื่นๆ ก็เริ่มทำตาม

ความท้าทายทางเทคนิคของโครงการเว็บขนาดใหญ่ทำให้เกิดการคิดค้นแนวทางที่เป็นระบบในช่วงทศวรรษ 2010 โดยเฉพาะอย่างยิ่ง BEM ^{[ 13 ]}และ Atomic Design หนังสือเกี่ยวกับ Atomic Design ^{[ 14 ]}ช่วยทำให้คำว่า "ระบบการออกแบบ" เป็นที่นิยมตั้งแต่ปี 2016 หนังสือเล่มนี้อธิบายถึงแนวทางในการออกแบบเค้าโครงของผลิตภัณฑ์ดิจิทัลในลักษณะที่ใช้ส่วนประกอบ ทำให้เป็นมิตรกับอนาคตและง่ายต่อการอัปเดต

ภาษารูปแบบอนุญาตให้รูปแบบต่างๆ ปรากฏในรูปทรงและรูปแบบที่แตกต่างกันมากมาย – ตัวอย่างเช่น แบบฟอร์มล็อกอินที่มีช่องป้อนชื่อผู้ใช้ รหัสผ่าน และปุ่มสำหรับล็อกอิน ลงทะเบียน และกู้คืนรหัสผ่านที่ลืม ถือเป็นรูปแบบ ไม่ว่าปุ่มจะเป็นสีเขียวหรือสีม่วง รูปแบบต่างๆ ถูกเรียกว่ารูปแบบก็เพราะลักษณะที่แท้จริงของมันอาจแตกต่างกัน แต่ความคล้ายคลึงกันทำให้ความสัมพันธ์ระหว่างพวกมัน (เรียกว่าการกำหนดค่า) ยังคงเหมือนเดิม อย่างไรก็ตาม ภาษาการออกแบบจะมีชุดแนวทางภาพเพื่อกำหนดสีและแบบอักษร ที่เฉพาะเจาะจงเสมอ ระบบการออกแบบส่วนใหญ่จะอนุญาตให้กำหนดค่าองค์ประกอบของภาษาการออกแบบ (ผ่านรูปแบบต่างๆ) ตามความต้องการ

UI kit คือชุดส่วนประกอบ UI โดยไม่มีกฎเกณฑ์การใช้งานที่ระบุไว้อย่างชัดเจน

โทเค็นการออกแบบคือตัวแปรที่มีชื่อซึ่งเก็บคุณลักษณะการออกแบบเฉพาะ เช่น สี การตั้งค่าแบบอักษร ค่าระยะห่าง หรือการตัดสินใจด้านการออกแบบอื่นๆ โทเค็นการออกแบบทำหน้าที่เป็นแหล่งข้อมูลที่เชื่อถือได้เพียงแหล่งเดียวสำหรับคุณลักษณะเหล่านี้ทั่วทั้งแบรนด์หรือระบบ และให้ประโยชน์มากมาย เช่น ความเป็นนามธรรม ความยืดหยุ่น ความสามารถในการปรับขนาด และความสม่ำเสมอแก่ระบบการออกแบบขนาดใหญ่ โทเค็นการออกแบบ ซึ่งโดยพื้นฐานแล้วคือการตัดสินใจด้านการออกแบบที่แสดงออกมาในโค้ด ยังช่วยปรับปรุงการทำงานร่วมกันระหว่างนักออกแบบและนักพัฒนา แนวคิดของโทเค็นการออกแบบมีอยู่ในระบบการออกแบบที่เป็นที่รู้จักกันดีหลายระบบ เช่น Material Design ของ Google ^{[ 15 ]} Style Dictionary ของ Amazon ^{[ 16 ]} Spectrum ของ Adobe ^{[ 17 ]}และ Atlassian Design System ^{[ 18 ]}

กลุ่มชุมชนโทเค็นการออกแบบของ W3C กำลังดำเนินการเพื่อให้มีมาตรฐานแบบเปิดสำหรับโทเค็นการออกแบบ^{[ 19 ]}

ระบบการออกแบบประกอบด้วยส่วนประกอบ รูปแบบ สไตล์ และแนวทางต่างๆ ที่ช่วยในการปรับปรุงและเพิ่มประสิทธิภาพความพยายามในการออกแบบ ปัจจัยสำคัญที่ต้องพิจารณาเมื่อสร้างระบบการออกแบบ ได้แก่ ขอบเขตและความสามารถในการทำซ้ำโครงการของคุณ และความพร้อมของทรัพยากรและเวลา หากระบบการออกแบบไม่ได้ถูกนำไปใช้และบำรุงรักษาอย่างเหมาะสม อาจทำให้เกิดความไม่เป็นระเบียบ ส่งผลให้กระบวนการออกแบบมีประสิทธิภาพน้อยลง อย่างไรก็ตาม หากนำไปใช้อย่างดี ระบบการออกแบบจะช่วยลดความซับซ้อนของงาน ทำให้ผลิตภัณฑ์ขั้นสุดท้ายมีความสอดคล้องกันมากขึ้น และช่วยให้นักออกแบบสามารถจัดการกับความท้าทายด้าน UX ที่ซับซ้อนได้^{[ 20 ]}

• ระบบการออกแบบคืออะไร?โดย โรเบิร์ต กอร์ลีย์
• หนังสือคู่มือระบบการออกแบบ (Design Systems Handbook)โดย Marco Suarez, Jina Anne, Katie Sylor-Miller, Diana Mounter และ Roy Stanfield (จัดพิมพ์โดย Design Better by InVision)
• บทความ (ภาษาฝรั่งเศส): เหตุใดจึงต้องสร้างระบบการออกแบบ?
• รูปแบบการออกแบบ
• ตัวอย่างระบบการออกแบบ