เบื้องหลัง Design System ของ LINE ตั้งแต่การ สร้างไปจนถึงการเอาไปใช้บน Web Front End
ช่วงนี้กำลังทำ Design System อยู่ ก็เลยอินกับ 2 Session นี้มากๆ เพราะอยากจะรู้เหมือนกันว่าที่ LINE ทำไมถึงต้องทำ Design System และมีเรื่องราวการสร้างยังไงบ้าง ย้อนไปตั้งแต่วันที่ LINE ถูกสร้างขึ้นมา วันแรกไม่มี Design System อะไรทั้งสิ้นไม่มีแม้แต่ Guideline จน ณ ปัจจุบัน LINE มี Design system ที่เป็น Component ที่ Dev สามารถเอาไปใช้งานได้ทันที โดยเนื้อหาช่วงแรกมาจาก Session LINE Design System : making LINE Product faster without losing consistency
เวลาที่เราพูดถึงโครงสร้างของ Design System ก็จะประกอบด้วยของอยู่ 3 อย่างคือ Element, Component, Page
ยันกลับไปก่อนว่าทำไม LINE ต้อง มี Design System เมื่อก่อนตอนมีแค่ App เดียว LINE ก็ไม่ต้องแคร์มากเรื่อง Guideline แต่พอเริ่ม มีหลายๆ App ก็เริ่มมีปัญหาที่ Design แต่ละ App ไม่เหมือนกัน
สิ่งที่เริ่มเป็นปัญหาที่เห็นได้ชัดเลยคือ ใน App ต่างๆของ LINE จะมีปุ่ม Share อยู่ ไอ้เจ้าปุ่มแชร์ในแต่ละ App เนี่ย หน้าตาไม่เหมือนกันเลย แถม ไม่รู้ด้วยซ้ำว่าอันไหนถูกอันไหนผิด
สีที่ไม่เหมือนกัน หัวหน้าทีม Design เล่าให้ฟังว่า สีของ LINE มีเยอะมากๆ ไม่เคยมีใครจัดระเบียบมัน พอถามหาว่าสีเขียวไหนคือสีเขียว LINE ทุกคก็จะก็เอา Eye Dropper ไปจิ้มจากงานเก่าๆเอา
Tab เป็นสิ่งที่ ฮิตมากใน LINE แต่ถ้าถามว่าอันไหนถูกก็กลับไปที่เดิมคือ ไม่มีใครรู้และในทุก App ของ LINE ก็ล้วนมี Tab ที่หน้าตาต่างกันออกไปอีก
สิ่งที่ทีม Design ของ LINE ต้องการ Improve มากๆคือ ความคล่องตัวในการทำงาน และให้ทีม เอาเวลาทั้งหมดไป Focus กับการสร้าง Impact มากกว่าการ เอาเวลามาเสียกับเรื่องงาน Design ที่นึกไม่ออกว่า ส่วนต่างๆต้อง Design ยังไงโดย LINE แบ่ง part ของ Design System ออกเป็น 5 ส่วนคือ Principle, UX Guildeline, Colorm Icon, UI Component
LINE มี Principles อยู่ 6 ข้อ แต่ที่แอบขัดใจก็คงเป็นเรื่อง Respect Legacy แต่ก็พอเข้าใจว่า ถ้าสมมติว่า ไม่ได้สนใจว่าของเก่าเป็นยังไง เวลาเปลี่ยนแปลงก็จะกระทบกับ User และงานเก่าๆเป็นอย่างมาก
ส่วนเรื่องสี LINE ปรับสีจากเดิมที่มีเยอะมากๆจนเหลือแค่ 30 สี พร้อมกับมี Rainbow color เพื่อ Support งานอื่นๆในอนาคต สิ่งที่น่าสนใจใน เชิง Dev คือ LINE ได้แก้ให้ linter ของ LINE ไม่สามารถพิมพ์ hex ของ สีตรงๆลงไปได้ต้องใช้ color variable เท่านั้น รวมถึง LINE ได้ออกแบบให้ Design System รองรับ Darkmode ไว้ด้วย โดย LINE ได้กำหนดชัดเจนว่าถ้าเป็น Darkmode ให้เป็นสีอะไรเป็นสีอะไร
ส่วน Icon LINE ก็วาดขึ้นมาใหม่ทั้้งหมดโดยอ้างอิงจาก Design เก่าๆ แล้วเอามาปรับ
แต่สิ่งที่ ่าสนใจมากกว่าคือการ Distribute เพราะ LINE ทำตั้งแต่สร้าง เป็น Library ใน Sketch เพื่ิอให้ทีม Designer ใช้งานได้ง่ายรวมไปถึงทำเป็น Demo App เป็น และ Code Snipet ให้ Developer แค่ Copy Code ไปแล้วก็ได้ Component หน้าตาตาม Design System เลย
เพื่อให้ทุกคนเข้าใจและเข้าถึง Design System ได้ง่าย LINE ได้ทำเว็บไซต์ที่เป็น Internal ออกมาเพื่อให้ทุกคนสามารถเข้าไปอ่านและ Copy Code ออกมาใช้ได้เลย
คราวนี้ ก็คงเป็นคำถามว่าถ้าเป็นเว็บหละจะต้องทำยังไงใน LINE ซึ่งเนื้อหาเรื่องนี้ถูกพูดใน อีก session ที่ชื่อว่า Front-end in Design System ทาง LINE เล่าว่า ที่ LINE ใช้ Vue.js และ Bootstrap เยอะมากๆ LINE เลยตัดสินใจทำ Component ของ Vue ที่ Follow ตาม Design System ออกมาโดยครอบบน UI framework ของ LINE ที่ชื่อ Koromo อีกทีซึ่งเจ้าตัว Koromo ก็ extend ออกมาจาก Boostrap อีกทีเหมือนกัน
การทำ Component พร้อมใช้ของ LINE บนหน้าเว็บค่อนข้างช่วยเพิ่มประสิทธิภาพการทำงานมากๆ จากตัวเลขที่ LINE บอก คือ ช่วยให้งานเสร็จเร็วขี้นมากถึง 30%
อย่างตัว Icon ของ LINE ของเก่าก็มีปัญหาเรื่อง Name convension ที่แต่ละอันตั้งชื่อไม่เหมือนกันสุดท้าย LINE ก็ลงเอยด้วยการสร้าง Icon System ของตัวเองที่ชื่อว่า LINE Atomic Icon ขึ้นมา โดยที่ไม่ว่าจะเป็น Framework ไหนมันก็สามารถใช้งานได้ รวมถึง LAICON เองก็มี API ที่สามารถเรียก Icon ผ่าน URL ได้เหมือนกัน
นอกจาก Vue ที่คนใน LINE ใช้เยอะมากๆ ยังมี React ที่มีคนใช้กันถึง 43% ทำให้ LINE ต้องเริ่มคิดหา Solution ซึ่งแน่นอน solution ต้องไม่ใช้ korommo-react หรือ koromo-angular เพราะว่า มันจขะใช้ได้แค่ framework เดียว
สุดท้ายหวยก็เลยไปออกที่ Web Component ซึ่งใช้กับ Framework อะไรก็ได้ ใช้กับ Browser ใหม่ๆ ได้ 100% ซึ่ง LINE เล่าว่า UI ต่างๆที่เราเห็น ใน LIFF ก็เป็น Web Component เหมือนกัน
สุดท้ายด้วยความสามารถที่ไม่ยึดติดกับ Framework ของ Web Component ก็ทำให้หลายๆคนรวมถึง LINE เริ่มนำเอา Technology นี้มาใช้แล้วเหมือนกัน
