[บันทึกเด็กข้างห้อง] รู้จัก Design System การออกแบบและใช้งาน Figma สำหรับ We Love Bug #LearningWithSCK

สอนโดย (คุณครู) นัท เกษสุรางค์ งามตระกูลชล YWC8 ผู้ถูก Import มาจากออสเตรเลีย และเพิ่งบินกลับมาจากไต้หวันเมื่อคืน

• แนะนำให้สมัครโปรแกรม Education เพื่อจะได้ใช้ Full Features แบบไม่เสียเงิน
• แนะนำตัวแบบกรุบกริบ จากนั้นก็เริ่มกันเลย

Design System

• เป็นตัวเก็บ Library ฝั่ง UI ทั้งหมด ไม่ว่าจะเป็นเทคโนโลยีแบบไหนก็ตาม (Web, App, iOS, Android) แล้วก็จะมีทีมที่ Maintain ของเหล่านี้ บางองค์กรจะมีทีมดูแลเฉพาะ แต่บางบริษัทที่ยังไม่ใหญ่มาก ก็อาจจะยังไม่มีคนดูแลส่วนนี้
• จะเก็บหน่วยย่อยที่สุด เช่น สี คำพูด ตัวหนังสือ เก็บแยกรายภาษาได้
• ตัว Platform ที่ดึงมาใช้ สามารถดึงใช้ที่เดียวกัน เพราะฉะนั้นทุก Device จะมีรูปแบบเดียวกัน
• UX Writer สามารถอยู่ในทีมนี้ได้
• Design System มีการเปลี่ยนแปลงตลอดเวลา เลยต้องมีการดูแล เหมือนการทำสวน ต้องรดน้ำ พรวนดินตลอด ถ้าไม่ดูแล มันก็จะเจ๊ง

ข้อดี Design System

• เพื่อจะได้ปล่อย product ออกไปสู่ตลาดได้อย่างรวดเร็ว
• แก้ปัญหาที่เราทำอะไรซ้ำๆ ซากๆ ได้ เช่น Component ซ้ำๆ ปุ่มแบบเดิม ก็เช็คที่ตัวแม่ ทำให้งานบางส่วนทำน้อยลง แต่ก็ยังต้องมีการทดสอบอยู่
• ช่วยให้ภาษาของ product ไปในทิศทางเดียวกัน
• เป็นงานที่เราต้องทำร่วมกันทั้งองค์กร ไม่ใช่แค่ Designer ต้องมีการ Maintain มีขั้นตอนการทำงานร่วมกันกับทุกคน (Governance) จะเกิดขึ้นไม่ได้ ถ้าไม่ได้รับความร่วมมือจากทุกคน
• Figma เป็น Tool ที่ช่วยทำให้ทำงานไวขึ้น
• สุดท้ายต้องวัดผลได้ เช่น ลด Cost ให้องค์กรได้กี่ %

ทำไม Design System ถึงสำคัญ

• อ่านออกได้ง่าย
• มีระบบระเบียบมากขึ้น
• ถ้ามีการอัปเดตอะไรสักอย่าง สามารถอัปเดตที่ master ตัวแม่ได้เลย เช่น เปลี่ยนสี
• สำหรับคนที่เข้างานใหม่ มาอ่านคู่มือแป๊บเดียว ก็สามารถทำตามได้อย่างรวดเร็ว
• เราทำงานไวขึ้น

ข้อเสีย

• ใช้เวลานานในการทำ
• มีราคาในการ Maintain สูง

ตัวอย่าง Design System

• Material design 3
• IBM Carbon
• Gov.uk เอาไว้ดู Accessibility
• Shopify Polaris ใช้กับตัวเว็บ
• Salesforce — Lightning design system เป็นเจ้าแรกๆ ที่ใช้ และเป็นคนคิด Design Token ขึ้นมาเป็นที่แรก

สิ่งที่ต้องมีใน Design System

• Foundation
• Core components
• Content
• Design tokens
• Documentation
• Process & Governance

User ของ Design System แทบจะเป็นทุกคนในองค์กร

การทำงานในองค์กรขนาดใหญ่ พอมี Design System ต้องทำงานร่วมกับหลายทีม ต้อง Maintain อยู่ตลอดเวลา

แชร์เคส Booking dot com

เวลามีเคสแค่ต้องการใส่ X (กากบาท) เข้าไป คือเรื่องใหญ่ ของ Design System

• ต้องเริ่มจาก Audit คือการไปตรวจเช็คก่อนว่าแต่ละ Platform ทำงานแบบใดอยู่ นั่งคิดก่อนว่าจะปรับออกมาแบบไหน แต่ละ Device จะเป็นยังไง
• ต้องเช็ค Anatomy โดยละเอียด มี Variance, Behaviour แบบใด
• ใช้หลักการ Community Feedback เอาทุกคนทุกตำแหน่งมา Brainstrom ร่วมกัน
• คุยเรื่อง Edge cases ดีสุดโต่ง แย่สุดโต่ง หน้าตาจะเป็นยังไง
• คนที่ทำ Technical assessment ต้องดูเรื่อง properties ด้วย เช่น text: string, selected: boolean ถ้าเราเขียนโค้ด ให้คุยเรื่องนี้กับ designer ตั้งแต่แรก เพราะถ้าไม่คุยตั้งแต่แรก designer จะทำมั่วมาให้ ซึ่งเป็นกันหลายบริษัท ถ้าคุยตั้งแต่ต้น จะได้เหมือนกันตั้งแต่ Figma file ถ้ามันทำไม่เหมือนกัน เวลาทำไปสักพัก มันจะเกิดปัญหา
• แนะนำให้มี properties ที่ตรงกันในทุก platform
• จากนั้นก็ส่งต่อให้แต่ละ platform เพื่อเขียนโค้ด เวลา implementation จะได้ตรงกัน

ปัจจุบัน component ของ iOS และ Android มีความใกล้กันมากๆ แทบไม่เห็นแล้ว และ Android มีเยอะกว่าด้วย

Custom Component

• ส่วนใหญ่แบรนด์ต่างๆ จะทำเก็บไว้เฉพาะสิ่งที่ต้องการให้คนว้าวๆ และเปิดตัว product ได้เร็ว
• ช่วยทำให้ปรับแต่ง Usability ได้ตอบโจทย์มากกว่า
• แต่ถ้าใช้ Native แล้ว ก็จะไม่ค่อยทำกันแล้ว

แนะนำ https://www.figma.com/community

เช่น Shopify — Polaris Components

https://www.figma.com/file/tPlzXCE7yAr5NYA1xeB7Sj/Polaris-Components-(Community)?type=design&node-id=111959-85930&mode=design&t=J8jEBLee9rJCEeZe-0

• ลาก Assets มา แล้วปรับๆ ด้านขวาได้เลย

เริ่มจากการสร้างไฟล์ Figma

• Stamp (e) เพื่อบอกได้ว่าเป็นเราเอง
• พิมพ์ / เพื่อคุยในบอร์ดได้

• เข้าไปที่ community — พิมพ์ Polaris Components — Open in Figma เราจะเอาไฟล์ชาวบ้านมาแกะกัน
• จากนั้น Move to Project ที่เป็น Team Education ของเรา

• ทำเสร็จแล้ว ส่งการบ้านอีกรอบ ว่าไปเอาของชาวบ้านมาเก็บไว้ใน Project ของเราแล้ว

• ด้านซ้ายมือของหน้าจอ เรียกว่า Pages ก็จะบอกว่า ไฟล์นี้มีอะไรบ้าง
• บางบริษัท จะมี Version เป็น Beta, Alpha คือทดลองใช้งานอยู่ ทำให้เราเข้าใจมากขึ้นว่า แต่ละอันอยู่ใน Status ใด
• ต่อจาก Pages ก็จะเป็น Component

Deprecated

• มีการหมดอายุ เช่น เปลี่ยนแบรนด์ เปลี่ยน Version Code หรือ เปลี่ยน APIs ที่ต้องการ Migrate Component เราทั้งหมด
• การที่เราลบไฟล์ทันทีใน Figma จะส่งผลกระทบกับคนในองค์กร ก็เลยต้องติด Tag บอกก่อนว่า เดี๋ยวจะลบนะ

• กดเปิด จะไป Dev Mode ถ้ากดปิด จะเป็น Mode แก้ไข จะสามารถ Copy ได้

• เวลาทำ Component จะมี ตัวแม่ ตัวลูก เก็บไว้ใน File figma

• คนที่จะมาใช้ จะต้องดึงตัวลูกไปใช้
• วันหนึ่ง สมมติเปลี่ยนสีแบรนด์จากดำเป็นแดง คนเปลี่ยน จะเข้ามาเปลี่ยนที่ตัวแม่ ตัวลูกที่ใช้ master เดียวกันก็จะเปลี่ยนตามแม่
• แต่ถ้าลูกเปลี่ยน แม่ไม่เปลี่ยน

• ทดลอง Copy จาก Figma ข้ามมา Figjam ก็จะมี Variants ให้เปลี่ยนได้ด้วย
• ถ้าอยากจะกลับไปหาต้นทางที่ Figma ต้องใส่ Link ด้วยตัวเอง เพื่อจะกลับไปที่ตัวตั้งต้น
• แต่ถ้าตัวแม่ Figma Update แล้วอยากให้ Figjam ปรับตามได้ไหม? คำตอบคือทำได้ แต่ต้องเสียเงินแบบ Organization และ Enterprise Plan ซึ่งมันแพง

ไปหา Polaris Styles แล้วก็ Move to Project เดิมของเรา

https://www.figma.com/community/file/1293614121185734569/polaris-styles?searchSessionId=ltmlw12t-6xkltsdw5x

Design Token

• ใช้จัดเก็บ Styles ที่ใช้ในงาน UI เก็บเป็น JSON file แล้วใช้ plugin หรือ code อะไรสักอย่าง แปลงเข้าไปในแต่ละ platform
• ทำให้ชื่อมันตรงกัน คุยงานได้เข้าใจกัน แก้ไขง่าย
• เป็นตัวแปร เหมือนที่เราเขียนใน CSS แหละ แต่ปัญหามันมีเยอะ เพราะต่างคนต่างตั้งชื่อมันก็จะเละเทะ

สี ส่วนสูง ความกว้าง เก็บเวลา/ประเภทเพื่อทำ Animation ตัวหนังสือ เส้น ขอบ ขนาดของเส้น การเปลี่ยนรูป เงา ช่องว่าง เส้นขอบมน และอื่นๆ

• ปัจจุบันมีการเก็บเป็นชั้นๆ เช่น Level 1 (เก็บไว้ใช้ในทีม), Level 2 (UI), Level 3 (UI) และมีการถ่ายทอดค่าไปยังแต่ละ Level เพื่อจะได้จัดการ UI ได้ดียิ่งขึ้น

• ทำให้เราแก้ไขสี UI Style ได้ในอนาคต ไม่ต้องแก้ Code

Error เยอะ แถมยัง Maintain ยาก

จากเดิม

จะเปลี่ยนเป็นนี่ ซึ่ง Translation Tool ก็มีหลายตัวให้ใช้งาน

Shopify Styles — Design Token

• เป็นไฟล์ที่เก็บ Styles ทั้งหมด
• ด้านขวา ดูได้ว่า มี Local Styles อยู่

Local Variables

• จะมี Level ตรงนี้ให้เลือก (มุมซ้ายบนของ Popup)

• ทดลองทำ ด้วยการ Copy มา 1 ปุ่มจากไฟล์ Components
• จากนั้นเลือก fill-magic

• แล้วก็กดที่ว่างเปล่าๆ เพื่อเปิด Local Variables หา bg-fill-magic แล้วก็เปลี่ยนสีตรงนี้ได้เลย

• พอเราเปลี่ยนสีจากหน้า Variables ก็คือไม่ต้องแก้ Code
• ถ้ามี Design tokens ทำให้ประหยัดเวลาแก้ UI ในอนาคต

Publish Components

• เพื่อให้การเปลี่ยนแปลงของเรา ไป Apply ใช้กับทั้งองค์กรได้
• เข้าไปที่ Assets → รูปหนังสือ → Publish จะใช้เวลาประมาณหนึ่ง ถ้า Components เยอะ
• คนที่ใช้ Components แบบเดียวกับเราอยู่ ก็จะขึ้นมาบอกให้ Update ว่ามีของใหม่มาแล้ว
• (แก้ปัญหาด้วยเงินตามที่กล่าวไปด้านบน) ถ้ามัน Success ก็จะ Update ใน Figjam ได้ด้วย ซึ่งนี่ทำไม่สำเร็จ เจอ Popup แดงจ้ะ 55+

Components

• แนะนำให้เขียน hierarchy ก่อนเริ่มเขียน UI

• ในแต่ละ components มี anatomy อยู่ ควรเขียนให้ครบก่อนไปเขียนโค้ด
• components กลายร่างไปเป็นแบบไหนได้บ้าง เช่น การ์ด ฟอร์ม
• แต่ละ component มี state ของมันอยู่
• ปรับ component ให้สุด MAX เพื่อดูว่า ถ้ามันใหญ่บึ้ม เพื่อรองรับ สว. แล้ว หน้าตาจะเป็นยังไง ทาง Design System ก็ต้องมาปรับแก้ให้มันรองรับ ก็จะมี 3 Size เช่น ระดับปกติ ระดับกลาง และระดับใหญ่บึ้มบึ้ม

https://carbondesignsystem.com/components/button/usage/

Properties ต้องทำงาน sync กับ Figma

ทดลอง Copy ปุ่ม แล้วไปวางแบบไกลๆ ถ้าวางใกล้ๆ มันจะกลายเป็น แม่ ถ้าวางไกลๆ มันจะเป็นลูก

• พอ Copy เสร็จแล้วก็เปิด Dev Mode ที่มุมขวาบน หน้าจอจะกลายเป็นสีเขียวๆ
• เอาไว้เช็ค properties
• ดูว่าใส่ Design Token มาให้หรือเปล่า

• open in playground ก็สามารถกดเล่นต่อได้ ว่าหน้าตาเป็นอย่างไร

• สามารถต่อกับ Plugins ต่างๆ ได้ด้วย https://www.figma.com/community/plugins/devmode

Prototype คือการทำแบบจำลองให้เหมือนจริง

• ใส่ Frame Selection ก่อน
• จากนั้นเปิด Mode Prototype แล้วลากเส้นโยง ว่ากดปุ่มนี้ แล้วให้ไปต่อที่ไหน
• แล้วก็กดปุ่ม Play ที่มุมขวาบน
• Resources ที่จะดาวน์โหลดลงมาได้ ถ้าเสียเงิน https://mobbin.com/browse/ios/apps
• เนื่องจากคุณครูนัทเสียเงิน ก็จะ copy มาให้ได้ เราก็จะ copy จาก Figjam มาลง Figma อีกที
• แต่ละภาพ คลิกขวาเลือก Frame Selection หรือ Option + Cmd + G
• จากนั้นเอา Rectangle มาปาดทับส่วนที่เป็นปุ่ม แล้วเลือก Layer — Pass Through ให้เป็น 0% เพื่อให้กล่องมันยังอยู่
• กดโหมด Prototype แล้วลากเส้น ซึ่งเลือกรูปแบบการเปลี่ยนหน้าได้ด้วย

• ถ้าต้องการให้เริ่มตั้งแต่หน้าแรก ต้องลาก Flow 1 มาไว้ตรงส่วนหน้าด้วย

• กด Shift + Spacebar จะมีหน้าจอเด้งมาให้เลย ไม่ต้องกดปุ่ม Play
• สามารถเลือก Device ได้ด้วย เวลา Preview ก็จะได้ขอบมือถือรุ่นที่อยากเห็น

• กด Play แล้วสามารถ Share Prototype ให้คนอื่นเล่นได้ เลือกเป็น Can view prototypes และเปิดใน Browser ปกติ ซึ่งสามารถเอาสิ่งนี้ไปทำ Usability Testing ได้เลย
• ถ้าเราเปิด Link นี้ในมือถือ ก็จะเห็นแบบนี้เป๊ะๆ เลย

วิธีการ Export รูปจาก Figma

• คลิกเลือกที่รูปนั้น ด้านขวาจะมี Export ก็กดโหลดลงมาได้เลย

การ Management Design System

• จะต้องมีการ Manage หลายอย่าง
• การเก็บ Version ของแต่ละ Component https://atlassian.design/components/banner/changelog
• จะต้องเขียน Code เอาไว้ track ว่า ทีมไหนใช้ Version ไหนอยู่
• เวลาเจอ Issues ก็จะมีการคุยกัน อะไรแก้แล้ว ยังไม่แก้ https://github.com/carbon-design-system/carbon/issues
• ถ้าเจอปัญหา ต้องมีการรายงานกลับมาที่ส่วนกลาง เลยต้องสร้าง community (contribution) เพื่อส่งกลับมา
• ทุก Design System จะต้องมี Roadmap ของตัวเอง
• เวลาเราทำงานแล้วเจอบั๊ก แล้วมันไม่อยู่ใน Roadmap ของทีม Design System ก็แปลว่าทีมเราต้องแก้เอง แล้วทีมก็ต้อง contribute กลับมา แต่ก็ต้องมีคนคอย Manage System ตรงนี้ ไม่งั้นคนก็จะตีกัน เพราะเป็นการเปลี่ยนขั้นตอนการทำงานในองค์กร

https://carbondesignsystem.com/developing/frameworks/react/

Measurement

• การทำ Design System มีการวัดผลตลอดเวลา
• ใครหยิบไปใช้ มีกี่คนใช้ Version นี้อยู่

• สามารถเขียนโค้ดไป track ได้ว่าใน 1 หน้า มีการใช้ Design System กี่เปอร์เซ็นต์ ใช้ component กี่ตัว

• การวัดผล เช่น Dev ใช้ระยะเวลาในการเขียนโค้ดลดลงกี่เปอร์เซ็นต์?
• มีความ Consistency เพิ่มขึ้น เท่าไหร่? ทุกคนใช้สีตรงกัน ขนาดที่เท่ากัน ระยะห่างเท่ากัน
• ในเชิง Quality แนะนำให้ทำ Usability Testing (UT) อีกที ในแต่ละทีมที่ไปทำงานจริง เพราะทำ UT ทีละปุ่ม ทีละ component อาจจะไม่ช่วยอะไร
• Update version ราย component https://designsystem.morningstar.com/getting-started/tracking-usage จะมีเปลี่ยน version code (บน GitHub) อยู่ตลอด
• ถ้ามีการเปลี่ยนแปลงโค้ด ก็ต้อง Test และ Validate ใหม่
• ถ้า Designer Publish Figma ไปแล้ว แต่ Code อัปเดตไม่ทัน มันก็จะกลายเป็นคนละเวอร์ชัน ก็พังยับต่อ
• ถ้า Tech Stack เปลี่ยน Version เช่น Vue 2 → 3 Design system ก็ต้องเปลี่ยน Version — migrate ฝั่ง UI ก็ต้องทำการ Regression ใหม่ การทดสอบทั้ง Automate และ Manual ก็อาจจะต้องเปลี่ยนด้วย การเปลี่ยนแบบนี้เรียกว่า Breaking Changes (มันจะต้องมีอะไรพังแน่ๆ)

ทำไมเราถึงต้องเปลี่ยน?

https://medium.com/@nathanacurtis/design-system-generations-65f99960dc3d

อายุของ Design System จะเกี่ยวกับการทดสอบเยอะมาก

https://medium.com/@nathanacurtis/design-system-generations-65f99960dc3d

ช่วงตอบคำถามที่แปะไว้ใน Board Figjam

• เก็บค่าสีที่เป็น gradient อย่างไร? >> https://design-tokens.github.io/community-group/format/#gradient เขียนคล้ายๆ กับ CSS แต่เขียนลง JSON file
• กระบวนการจาก Design ไปยัง Production จะ Automate ได้ไหม >> ตอนนี้ยังไม่ได้ — Publish ให้คนอื่นใช้ได้ ซึ่งต้องไปทำ LIB กลาง แล้วส่งต่อให้ Dev ว่าจะใช้ตัวไหน component ไหน version ไหน สมมติเปลี่ยนสีแบรนด์ จากแดงไปเป็นชมพู ถ้าทุกทีมใช้โครงสร้าง Design tokens และ component เดียวกัน ทีมงานที่เอาไปใช้ แค่กด update ก็เปลี่ยนได้เลย ถ้าคนหยิบไปใช้น้อย ก็จะไม่เกิดวงจรนี้ขึ้น ก็เลยต้องมี Roadmap และต้องแจ้งก่อน
• Technical Assessment ต้องมี Dev เข้าด้วยถูกไหมครับ ทำอย่างไรให้ทุกคนให้ความสำคัญ >> ใช่ ทุกคนต้องเข้า Dev, Tester, Designer มีสิทธิ์โหวต เพื่อดูว่าจะทำอะไรก่อน จะแก้อะไรก่อน
• การตั้งชื่อ Component >> แนะนำให้ตั้งชื่อปกติ อย่าตั้งชื่อแปลก
• UX/UI ต้องเป็น Dev Front End มาก่อนไหม >> ที่ออสเตรเลีย UX/UI เขียนโค้ดกันได้หมดเลย
• เรามี Standard UI ที่มี Properties ตามมาตรฐานของ Dev เลยไหม >> มี Open Source หลายตัวเลย (ไว้หาเจอ คุณครูนัทบอกจะส่งให้อีกที)
• Frame กับ Section ต่างกันอย่างไรบ้าง >>
  Section ใหญ่สุด เอาไว้ครอบทุกคน
  Frame เป็นสี่เหลี่ยม เปิด Dev Mode ไม่ได้ เอาไว้ล็อคขนาดหน้าจอ
  สามารถเอา Frame ไปใส่ใน Section ได้

หลักฐานการตั้งใจเรียนของเราและชาวคณะ

เป็นคลาสเรียนที่สนุกมาก ไม่เคยได้ใช้ Figma แบบจริงจังขนาดนี้ ปกติคือ ใช้ดูเฉยๆ กดๆ แล้วก็ Export ออกมาแบบงงๆ (ส่วน Figjam เดี๋ยวนี้ใช้บ่อย เพราะ Site ลูกค้าใช้)

ตอนฟังอาจจะตามไม่ค่อยทันบ้าง สนุกตอนที่ได้ลงมือทำ Workshop แม้จะทำตามได้ทันทีบ้าง ไม่ทันบ้าง (อาศัยการถามพี่บอม พี่นุ่น คุณครูนัทเอา) ชอบสุดก็น่าจะเป็นการลากเส้นทำ Prototype นี่แหละ ง่ายมาก ง่ายกว่าเมื่อก่อนที่เคยเล่น Sketch + InVision (ผ่านมาหลายปีมากแล้ว เทคโนโลยีก็ดีขึ้นแบบนี้แหละ)

และที่ขาดไม่ได้ ขอบคุณ​ SCK (พี่หนุ่ม) สำหรับค่าตัวคุณครูนัทที่มาสอนพวกเราค่ะ -/\-