สวัสดีค่าเพื่อนๆ Designil วันนี้แอดนัทได้ทำสรุปในเรื่องของการทำใช้ระบบออโต้เมชั่น หรือการใช้ AI ในการทำงานฝั่งของ design tokens และ design system มาให้ทุกคนได้อ่านกัน เหมาะสำหรับการทำงานใน design system ระดับขนาดใหญ่ ในองค์กรที่กำลังเจริญเติบโต ที่ต้องการจัดการระบบของ UI ในองค์กรให้สามารถทำงานได้อย่างยืดหยุ่น รองรับการเปลี่ยนแปลงกับเทคโนโลยีที่จะเข้ามาในอนาคต
เคสที่เราสรุปมาให้อ่านกันในวันนี้สรุปมาจากวิดีโอจาก Spotify ในงาน Into Design Systems ปี 2023 สามารถหาวิดีโอรับชมย้อนหลังได้ทาง Into Design Systems
งาน Into Design Systems คืองานอีเวนต์ที่มีสปีคเกอร์จากทั่วโลกมาให้ความรู้เรื่องของ Design system และเทคโนโลยีการจัดการของฝั่ง UI อย่างในวันนี้ที่เรายิบยกมาจะเป็นตัวอย่างจากบริษัท Spotify ที่ทำแอปฟังเพลงให้ทุกคนทั่วโลกได้ใช้งานกัน
โดยในปี 2024 นี้เองก็จะมีงาน Conference ของ Into Design Systems เช่นกัน สามารถติดตามได้ทางเว็บไซต์เลย
ด้านล่างนี้จะเป็นลิงค์สำหรับซื้อวิดีโอเพื่อรับชมย้อนหลังจาก Into Design Systems ค่า
Spotify – the future of design systems is automated
จากคุณ Juli – Design manager
Tiago – Engineering manager
ทีม Encore – Spotify
พูดเรื่อง
1. ทำไมต้องทำ Automation ใน design system
2. Spotify ใช้ automation ใน design system อย่างไร
3. สิ่งที่เขาได้เรียนรู้มาในการทำงาน
Encore ทำงานรองรับ
– 45 platforms
– 2000+ connected devices
– 200 brands
แพลตฟอร์ม
– iOS, Android, Web
Devices
– Phone, Tablets, Desktops, TVs, Consoles, or Watches
Brand identities
– Spotify for Artists, Spotify for Podcasters, Ad Studio and Soundtrap
Modes
Car mode, and large text modes for accessibility
สิ่งที่เขาโฟกัสคือ Coherence ไม่ใช่ Consistency ความเชื่อมโยงของการออกแบบใน product เข้าด้วยกัน
สิ่งที่สามารถทำได้ใน Encore ในปัจจุบันคือ
1. 99% Token Adoption
2. Component adoption is increasing
ทำไมถึงมี adoption แค่ 99%?
– ใช้ผิด: ทีมที่หยิบไปใช้ ใช้ token ผิดที่ ผิดทาง
– deprecated tokens: ของที่หมดอายุแล้ว อาจจะอยู่ในระบบเป็นระยะเวลานาน ทำให้คนยังไม่ย้ายไปใช้ของใหม่
จัดการกับการเติบโตของ design system กับความยากเหล่านี้อย่างไร? Automation จึงถูกเข้ามาใช้ในการทำงานกับ Design system
เพื่อช่วยลดระยะเวลาในการทำงานของมนุษย์และลด error ที่จะเกิดขึ้นในการทำงานนั่นเอง
⭐️ ทำไมต้องใช้ Design system Automation ⭐️
– เพื่อลดงานที่ต้องทำซ้ำซาก
– เพื่อลดความเสี่ยงที่เกิดขึ้นจาก Human error
– เพื่อเพิ่มความเชื่อมโยงกันระหว่าง Design และ Code
– เพื่อลดเวลาของคนในทีม ในการตอบคำถาม support เรื่อง design system
พัฒนาปรับปรุงตัว Design system automation อย่างไรได้บ้าง?
– รับ Feedback ในทุกขั้นตอนของการทำงาน ::: คุยกับผู้คนที่ใช้งาน Encore ในการทำงานของทุกวัน
– จับเวลาในการทำงาน manual tasks ว่าปกติทำงานเท่าไร แล้วพอมี automation ลดลงเท่าไร
– ดูว่า pattern ของ human error เป็นอย่างไร
– ดูข้อมูล insights, และ analytics ต่างๆ ประกอบกัน
Encore ใช้ Automation อย่างไร?
1. ใช้ระบบ computational ในการสร้าง adaptive tokens
2. ใช้ระบบจัดการ automated token
3. Figma plugins
4. ใช้ระบบ Chatbot บน Slack เพื่อตอบคำถาม support และใช้ Chatbot ที่ทำจาก AI
❌ หมดปัญหากับงานที่ต้องทำซ้ำซาก เช่น
> ปกติแล้วดีไซน์เนอร์จะต้องทำการทดสอบสีแบบ manual เช่นเช็ค color contrast ระหว่างพื้นหลัง กับของที่อยู่ด้านบน> Redesign ฟีเจอร์ใหม่ๆ ในหลายแพลตฟอร์ม เช่น web, iOS, Android
> ทดสอบสีใหม่, ทดลองใช้ token ใหม่
🤖 ขอแนะนำ Computational design tokens 🤖
ใช้ base value จำนวนน้อย แต่ใช้การคำนวนทางคณิตศาสตร์ให้มากขึ้น
นั่นก็คือเราเตรียมแค่ของจำนวนน้อยๆ สำหรับ design tokens
ที่เหลือระบบจะทำการเพิ่ม tokens ตัวอื่นให้กับ system ของเราได้เลยแบบอัตโนมัติ โดยใช้วิธีการคำนวน
ข้อดีของการทำ computational design tokens
Manual design = 1 design decision = 1 design value
Computational design = 1 design decision = Many design values
แปลว่าช่วยลดการตัดสินใจในการทำงานของทีมได้
🌼 Encore Color Themes 🌼
– ใช้ Semantic naming เพื่อช่วยให้ทีมสามารถตัดสินใจเรื่องของ accessible contrast ได้ วัดผลพวกเรื่อง contrast ได้ดียิ่งขึ้น
– ลดการเช็ค contrast แบบ manual ใน Figma
– สร้างสี base แค่ 7 ค่าสี หลังจากนั้นให้ระบบทำการคำนวนสีที่เหลือออกมามากกว่า 100+ สี และยังช่วยเช็คเรื่องของ color contrast ให้กับทีมด้วย
📷 (ภาพที่ 1) ถ้าดูจากภาพประกอบที่นัทแนบมาในโพสต์
เราจะเห็นว่าแค่เรากำหนดค่าสีของสีแดง สีเดียว เมื่อเข้าไปอยู่ในระบบของ automation pipeline จะช่วยให้เราสร้างอีก 6 สีแดงขึ้นมาได้ในครั้งเดียว
แถมยังช่วยสร้าง semantic ให้เราได้อัตโนมัติ พร้อมกับเช็คค่าสีแบบ contrast ให้ผ่านระบบของ WCAG อีกด้วย
ในปัจจุบัน Encore สามารถสร้าง set ของธีมสีแบบ automation และทำงานกับแบรนด์ที่อยู่บน Spotify ได้อย่างรวดเร็ว โดยที่ไม่ต้องมานั่งทำงานแบบ manual เลือกสีหรือเช็คสี contrast เองอีกต่อไป
อัปเดตปุ่มสีเขียวท้ังระบบให้เหมือนกัน
หลังจากปรับระบบ automation ใหม่ทั้งหมดแล้ว ทำให้ Spotify สามารถทำการอัปเดตสีของปุ่มจากสีเขียว ที่เป็นหลากหลายเฉดให้เป็นสีเขียวเดียวกันได้ทั้งระบบ ไม่ว่าจะเป็น web, ios, android, tv หรืออื่นๆ แถมยัง accessible อีกด้วย
🌸 Encore Layout Themes 🌸
- ช่วยลดการทำงานที่ต้องสร้าง design ต่อ platform และ device
- component สามารถขยายและฟิตเข้ากับ device และแพลตฟอร์มต่างๆ ได้ รวมไปถึง modes
- กำหนดค่าเริ่มต้นแค่ 14 ค่า หลังจากนั้นใช้ระบบ automation ในการสเกล layout ให้ออกมามากกว่า 45+ รูปแบ
ในหัวข้อนี้จะทำการกำหนดค่าระยะห่างสำหรับการจัดการ layout ในรูปแบบต่างๆ เช่น spacers, layout margins, text sizes, icon sizes ที่มีผลต่อการขยับของ UI
📷 (ภาพที่ 2) – กำหนดค่า base พื้นฐานในฝั่งซ้ายมือ เช่น ขนาดของตัวหนังสือที่เล็กที่สุด, หรือจะเป็น scale ของการคำนวนพวก icon เช่น 1.4 หลังจากนั้นระบบจะทำการคำนวนหน่วย และ layout สร้างออกมาให้เราเป็นตัวอย่างตามภาพขวามือ โดยที่ยังคิดถึงเรื่องของ accessibility ว่าตัวหนังสือสามารถอ่านได้ง่าย, มองเห็นได้ชัดเจน, ขนาดกดได้ง่ายไม่นิ้วเบียด รองรับขนาดของ touch target ได้
สิ่งที่ได้รับคือ ไม่ว่าจะเปลี่ยน layout เป็นแบบไหน ตั้งแต่ web, ios, android, ios, web, TV, Car, watch, ตู้เย็น ก็จะสามารถเปิด Spotify ได้โดยไม่แหก และยังคงความสวยงามของ design system อยู่ด้วยการคำนวนแบบอัตโนมัตินี้
แม่ เจ้า ว้อย !!!!
เป้าหมายคือ: ออกแบบครั้งเดียวหน้าจอเดียว แต่คุณจะได้รับ Design ที่เปลี่ยนไปใช้งานได้ทุกแพลตฟอร์ม
ทีนี้ปัญหาที่ต่อมาก็คือ เราจะทำให้มันเชื่อมต่อได้ยังไงให้ดีไซน์และโค้ดมีหน้าตา และขนาดที่เหมือนกัน ในเมื่อมันถูกคำนวนใน computational ซึ่งแปลว่าโค้ดมันจะออกมาก่อน แล้วในไฟล์ดีไซน์ล่ะทำยังไงต่อ?
❌ ปัญหาที่ทีม designer เจอส่วนใหญ่ในทุกวันนี้คือ Design and Code ไม่ต่อเนื่องกัน
– เขาก็เลยแก้ปัญหาด้วยการทำ automation เพื่อให้มันเชื่อมต่อกันได้ ระหว่างโค้ดและดีไซน์
🤖 FIGGY 🤖
- แนะนำ Figgy เป็น robot ที่จะวิ่งเข้าไปใน Figma และอัปเดต Token ให้เราได้ทั้งหมด
- ช่วยตรวจสอบการเปลี่ยนแปลงระหว่างโค้ดและ design, ช่วยสร้าง tokens ใหม่, ช่วยลบ tokens ที่ไม่ใช้งานแล้วทิ้ง
- ถ้ามี Encore อะไรใหม่ๆ ออกมา จะช่วยให้เราสามารถสร้าง style ใน Figma สำหรับทุก platform ได้แบบอัตโนมัติ
ขออุทานอีกรอบว่า ว๊อทททททท
ตัว Figgy เป็น code snippet ตัวนึง (ที่ไม่ใช่ปลั๊กอิน) จะต่อกับตัว Figma API แล้วก็จะ debug issues ได้เลยว่าเกิดอะไรขึ้นกับไฟล์ Figma บ้าง ในตัวอย่างเขาต่อกับ headless browser แล้วก็รันใน chromium ไปลองเขียนโค้ดกันเองได้
วิธีเขียนโค้ดก็คือกำหนดให้มันไปอ่าน Figma library ที่เราเซ็ตไว้ ว่าจะให้มันแก้ figma file อันไหนให้บ้าง อย่างของ Spotify มีไฟล์ library ประมาณ 20 ไฟล์ และทั้งหมดเชื่อมกับ Figgy
🤖 Figma plugins – Localization 🤖
ช่วยทำ Localization, Accessibility size และ theme swapping
เพื่อช่วยลด QA process ก่อนที่จะนำไปเขียนโค้ดต่อ
– เช่นการเปลี่ยนภาษา จะต้องมีการเปลี่ยนข้อความ จึงใช้ plugin ในการช่วยจัดการตรงส่วนนี้ รวมไปถึงคำที่เก็บใน design tokens ด้วย
– ในส่วนนี้จะใช้คนที่ทำตำแหน่ง design technologist ที่อยู่ใน design ops team ในการจัดการงานส่วนนี้
📷 (ภาพที่ 3) เป็นภาพหน้าตาปลั๊กอินที่ช่วยในการแปลภาษา โดยจะมีภาษาเก็บไว้ในระบบเยอะมากๆ
ที่เหลือดีไซน์เนอร์จะต้องมาเช็ค ว่าตัวหนังสือนั้นพอดีกับตัว UI มีการแหกแค่ไหน สูงเกินดีไซน์หรือไม่ etc. แต่ก็ทำให้การทำงานนั้นไวกว่าเดิม เพราะดีไซน์เนอร์ไม่ต้องมานั่งแปลทีละคำ แต่ว่าห้ามใช้ในงาน Final นะ สุดท้ายดีไซน์เนอร์จะต้องมานั่งเช็คกับ localization ทีม เพื่อเช็คคำที่ถูกต้องก่อนนำไปใช้จริงอีกครั้ง
🤖 Figma plugins – Accessibility testing 🤖
ปลั๊กอินเช็คขนาดตัวหนังสือ A11Y Text sizing
📷 (ภาพที่ 4) หน้าตาปลั๊กอินในการช่วยเช็คขนาดของตัวหนังสือ ว่าสามารถใช้งานได้รองรับกับการสเกลของ Dynamic text ตาม mobile device หรือว่า device แบบอื่นๆ อย่างในภาพจะเป็นตัวอย่างการสเกลตัวหนังสือให้รองรับกับฟอนต์ขนาด xxxLarge ใน iOS
🤖 Figma plugins – Encore swappy 🤖
ตัวช่วยเปลี่ยน theme สีให้กับงาน UI ใน Figma
📷 (ภาพที่ 5) หน้าตาปลั๊กอินช่วยเปลี่ยนธีมสี อย่างในตัวอย่างที่เขาพรีเซนต์เขามีธีมสีเยอะมาก ที่ทำงานกับแบรนด์ของลูกค้าและอื่นๆ ใน preset คือมีเพียบ เช่น Dark, Light, Advertising Dark, Advertising light, Creator dark, creator light etc.
ENCORE CHATBOT
ในปัจจุบันมีดีไซน์เนอร์ใน Spotify มากกว่า 400 คน และมี Dev มากกว่า 1000 คน จะทำอย่างไรให้ทีมที่ใช้งาน Design system นั้นตอบคำถามได้น้อยลงมากที่สุด จึงเกิดเป็นปลั๊กอิน Chatbot ตัวนี้ขึ้นมา
คำถามที่เจอบ่อย เช่น
– มีของอันนี้ใน design system หรือยัง
– จะใช้ component นี้อย่างไร
– หาไฟล์นี้ได้ที่ไหน
ซึ่งทีม design system มีขนาดเล็กมาก จึงทำให้ทีมต้องคิดหนทางอะไรสักอย่างขึ้นมาเพื่อตอบคำถามเหล่านี้กับทีมงานได้
🤖 SLACK BOTS 🤖
- ช่วยตอบคำถามในแชท
- บอตจะช่วยหาไฟล์ใน design system web documentation
แต่สุดท้ายก็มาพบว่า Slack bots ค่อนข้างตอบคำถามได้อย่างจำกัด จึงทำให้ต้องหา solutions อื่นมาเพื่อตอบโจทย์คนใช้งานในองค์กร
เขาจึงสร้าง
🤖 EncoreGPT 🤖
- เขาสร้าง GPT นี้ในงาน hackweek โดยใช้คนทำ 6 คน และใช้ระยะเวลาในการสร้างเพียงแค่ 1 สัปดาห์
- ไม่ได้ใช้ machine learning หรือ data engineers เลยสักคน
- เทรนข้อมูลด้วยไฟล์ที่มีอยู่แล้ว เช่น จาก Slack, Q&A หรือจาก documentation
- ใช้งานได้อย่างดีเยี่ยม
📷 (ภาพที่ 6) EncoreGPT ตัว Bot ที่จะช่วยตอบคำถามให้กับทีม design system จากตัวอย่างจะเห็นว่าสามารถใช้งานได้เหมือน ChatGPT เลย
✅ สิ่งที่ได้เรียนรู้จากการทำทูลเหล่านี้
- การ maintain ดูแล design system ยากกว่าการสร้างใหม่ โดยเฉพาะถ้าคุณมาทำงานในทีม design system ที่ต้องสเกลใน product ขนาดใหญ่อย่าง Spotify ตอนเพิ่มอะไม่ยาก ตอนแก้นี่แหละที่จะเป็นปัญหา
- ถ้าเกิดมี tradeoffs ล้านอย่าง และ edge cases เกิดขึ้น เราจะไปต่อข้างหน้าอย่างไรให้เกิดผลกระทบน้อยที่สุด ทำยังไงให้คนที่ใช้งาน design system เชื่อถือเรา เพราะถ้าเปลี่ยนครั้งนึงเพื่อนก็ไม่อยากเปลี่ยน อยากจะหยุมเรามากกว่า
- การตัดสินใจ Decision making สำคัญมาก บางครั้งเราจะเกิดคำถามว่า การเปลี่ยนแปลงใน design system ครั้งนี้จะคุ้มค่ากับความเจ็บปวดของเราแค่ไหน
- การทำงานใน Design system และการเปลี่ยนแปลง ไม่มีคำว่าเสร็จ ไม่มีคำว่าสิ้นสุด มันเป็นแค่สิ่งที่เกิดขึ้นมา แล้วก็จะเกิดขึ้นอีก
บทความที่เกี่ยวข้อง
Designil ทำงานกันอย่างเต็มที่เพื่อสร้างคอนเทนต์ดีๆ มีสาระประโยชน์ให้กับผู้อ่าน สิ่งที่ทีมงานแนะนำทั้งหมดมาจากการค้นคว้าและทดลองใช้งานจริงหลายสัปดาห์ หากคุณชอบเนื้อหาแบบนี้และอยากสนับสนุนให้ทีมงานให้มีแรงสร้างคอนเทนต์ดีๆ ในอนาคต สามารถซื้อสินค้าหรือบริการผ่านลิงก์บนบทความของเราได้นะครับ บางลิงก์ทางทีมงานจะได้รับส่วนแบ่งเล็กน้อยโดยจะไม่เป็นการเพิ่มภาระค่าใช้จ่ายให้กับทางผู้อ่าน ขอบคุณสำหรับการติดตามครับ การทำงานของเรา
- Design System คืออะไร? เล่าเคสการทำงานจริงพร้อมตัวอย่างประกอบ
- ทีมงาน Design system ต้องมีใครบ้าง + แจกหนังสือสอนทำ Design System ฟรี
- ทฤษฎีสี HSL ออกแบบเว็บไซต์ UI อย่างมือโปร
- 10 ข้อผิดพลาดที่เรียนรู้จากการทำงานในทีม Design system
- 10 ข้อผิดพลาดในการสร้าง Design system บน Figma
- 10 Figma plugins for Design system
