การจัดระเบียบระบบการออกแบบเว็บไซต์ให้สามารถขยายตัวได้ใน Figma

การจัดระเบียบระบบการออกแบบเว็บไซต์ให้สามารถขยายตัวได้ใน Figma

หากคุณทำงานกับระบบการออกแบบเว็บไซต์ใน Figma คุณคงเคยเห็นวิธีการจัดระเบียบไลบรารีระบบการออกแบบแบบดั้งเดิม...

ภายในโปรเจค Figma หนึ่งที่ใช้สำหรับไลบรารี:

- ไฟล์หนึ่งสำหรับพื้นฐานหรือสไตล์ไกด์ (สี, ไทโปกราฟี, ฯลฯ)

- ไฟล์หนึ่งสำหรับคอมโพเนนต์เว็บในโหมดแสง

- ไฟล์หนึ่งสำหรับคอมโพเนนต์เว็บในโหมดมืด

- ไฟล์หนึ่งสำหรับเอกสารที่จำเป็นในการฝังเข้าไปในแพลตฟอร์มที่คุณใช้สำหรับเอกสาร เช่น Zero Height

วิธีการนี้ทำให้ทุกอย่างเป็นระเบียบเรียบร้อยสำหรับผู้ใช้ระบบการออกแบบ และง่ายสำหรับนักออกแบบในการดึงเอาสินทรัพย์เหล่านี้มาใช้ใน Figma canvas ของพวกเขา

แต่... ทุกอย่างจะง่ายจนกว่าคุณจะได้รับข้อความเตือนที่น่ากลัวจาก Figma ที่ด้านบนของ canvas ของคุณ คุณอาจเห็นหลากหลายข้อความเตือนดังที่แสดงด้านล่าง ซึ่งผมชอบเรียกว่า DEFCON scale

DEFCON 4/5 — ไฟล์ของคุณยังดีอยู่

DEFCON 3 — ไฟล์ของคุณไม่ค่อยดีแล้ว

DEFCON 2 — ไฟล์ของคุณแย่แล้ว

DEFCON 1 — ไฟล์ของคุณอยู่ในโหมดซอมบี้แอพโคลิพส์

นั่นคือสิ่งที่เกิดขึ้นกับทีมระบบการออกแบบของผมและตัวผมเองในไฟล์ที่มีคอมโพเนนต์เว็บในโหมดแสง

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

โชคดีที่ทีมระบบการออกแบบของเรากำลังเตรียมสำหรับเวอร์ชันใหม่ของไลบรารี Version 2.0.0 และเราสามารถใช้โอกาสนี้ในการดูว่าสิ่งใดทำให้เกิดปัญหาหน่วยความจำไฟล์ในไลบรารีปัจจุบันของเราและเราจะทำอย่างไรเพื่อป้องกันมันในไลบรารีใหม่ของเรา

ปัญหาหน่วยความจำไฟล์ของ Figma คืออะไร?

เนื่องจาก Figma เป็นระบบคลาวด์ แต่ละไฟล์ (หรือแท็บ) สามารถมีได้สูงสุดเพียง 2GB ทั้งในเบราว์เซอร์และแอปพลิเคชันเดสก์ท็อป แต่โดยทั่วไป การรักษาไฟล์ของคุณให้มีการใช้งานหน่วยความจำต่ำกว่าจะช่วยให้การทำงานของไฟล์โดยรวมดีขึ้น

ผมพบว่า Figma ไม่ชอบเมื่อคุณเริ่มเข้าใกล้ 60% ของขีดจำกัด 2GB นี้ ดังนั้นคุณจึงมีเพียง 1.2GB ที่สามารถใช้งานได้ก่อนที่จะมีแบนเนอร์เตือนหน่วยความจำไฟล์ที่น่ากลัวปรากฏขึ้น

การดูว่าทรัพยากรไฟล์ของคุณใช้อะไรบ้าง

หากคุณสงสัยว่างานสำคัญของคุณใช้หน่วยความจำไฟล์มากแค่ไหน คุณต้องดึงดูดมุมมอง ‘Resources used’ ในไฟล์ของคุณ

วิธีการทำคือ:

ไปที่แถบนำทางด้านบน → คลิกโลโก้ Figma ‘F’ → คลิกที่ ‘View’ → คลิกที่ ‘Resources used’

หลังจากคลิกที่ ‘Resources used’ วิดเจ็ตเล็กๆ จะปรากฏที่มุมบนซ้ายของ canvas ไฟล์ของคุณ (หรือทางขวาของแถบสินทรัพย์โดยตรง)

วิดเจ็ตที่ปรากฏเมื่อดูหน่วยความจำไฟล์ของคุณ

ตัวเลขเหล่านี้หมายถึงอะไร?

- ตัวเลขด้านบนสุดแสดงจำนวนเลเยอร์ทั้งหมดในไฟล์ของคุณ

- ตัวเลขตรงกลางแสดงจำนวนหน่วยความจำที่ไฟล์ของคุณใช้อยู่ (ใน GB)

- ตัวเลขสุดท้าย (จะแสดง) การอัพเดทแบบสดของจำนวนหน่วยความจำที่การกระทำปัจจุบันในไฟล์ของคุณใช้อยู่ (เช่น หากคุณตัดสินใจที่จะย้ายส่วนของงานไปด้านข้างของ canvas)

ทำไมเราถึงไม่สามารถรวมสาขากลับไปยังไฟล์หลักได้?

ไฟล์ Figma โหมดแสงสำหรับเว็บของเรามีน้ำหนักประมาณ 1.05GB ของงานออกแบบ แต่เราไม่สามารถรวมสาขาที่มีการเปลี่ยนแปลงได้ ทั้งๆ ที่เราอยู่ภายใต้ขีดจำกัด 60% ดังนั้นสิ่งที่เกิดขึ้นคืออะไร?

เมื่อคุณสร้างสาขาจากไฟล์หลัก คุณกำลังสร้างไฟล์ที่ซ้ำกันจากไฟล์หลักที่เป็นไฟล์ ‘ชั่วคราว’ ไฟล์ที่สอง เมื่อคุณรวมไฟล์กลับไปยังไฟล์หลักพร้อมการอัพเดทของคุณ Figma จะต้องรวมไฟล์เหล่านี้ชั่วคราวเพื่อประเมินว่ามีอะไรเปลี่ยนแปลง

หากทั้งสองไฟล์เริ่มต้นที่ 1.05GB แต่ละไฟล์ โดยสาขาน่าจะมีข้อมูลเพิ่มเติม (สมมติว่า 0.5GB) เมื่อพวกเขาถูกรวมชั่วคราวเพื่อตรวจสอบการเปลี่ยนแปลง พวกเขาจะมีน้ำหนักรวม 2.15GB นั่นเป็นสิ่งที่ Figma จะไม่ยอมรับและจะปฏิเสธที่จะประมวลผลไฟล์เหล่านี้

ตามที่ผมกล่าวไว้ข้างต้น การรักษาไฟล์ของคุณให้ต่ำกว่า 1.2GB หากคุณวางแผนที่จะใช้สาขา คุณควรพิจารณารักษาไฟล์ของคุณให้อยู่ใต้ 1.0GB เพื่อความปลอดภัย การทำงานซ้ำไม่เคยสนุกเลย

การคิดเกี่ยวกับการสร้างสาขาใน Figma

การจัดเก็บข้อมูลจำนวนมากจากไฟล์โหมดแสงสำหรับเว็บ

เราได้ทุกสิ่งทุกอย่างที่เราทำผิดจากไลบรารีเก่าออก และสร้างโครงสร้างไฟล์ใหม่สำหรับทีมของเราให้ปฏิบัติตาม

หลังจากการย้ายคอมโพเนนต์ทั้งหมดไปยังไฟล์โหมดแสงสำหรับเว็บใหม่ ไฟล์นั้นมีน้ำหนักเพียง 0.3GB หรือประมาณลดลง 70% จากไลบรารีเดิม แน่นอนว่าขนาดไฟล์นี้จะเพิ่มขึ้นตามการเติบโตของไลบรารี แต่ก็ทำให้เราอยู่ในจุดที่สะดวกสบายในการขยายระบบการออกแบบของเรา

วิธีแก้ปัญหานี้สำหรับผมและทีมงานระบบการออกแบบของเราอาจไม่ใช่วิธีที่ดีที่สุดสำหรับคุณและทีมงานของคุณ บางทีโครงสร้างไฟล์ระบบการออกแบบแบบดั้งเดิมที่กล่าวถึงในตอนต้นอาจทำงานได้ดีสำหรับคุณ ซึ่งนั่นก็ยอดเยี่ยม!

แต่การป้องกันปัญหาไฟล์ Figma เป็นสิ่งที่นักออกแบบ Figma ทุกคนควรทำ เราทุกคนสามารถยอมรับนิสัยที่ไม่ดีที่เราอาจปฏิบัติในไฟล์ Figma ของเรา และหลีกเลี่ยงมันในอนาคต

ขอให้คุณลบเลเยอร์ที่ซ่อนอยู่ทั้งหมดและป้องกันไฟล์ Figma จากการเข้าสู่ DEFCON 1

อ่านเพิ่มเติม ได้จาก Link นี้ 🔗 : https://uxdesign.cc/organizing-a-design-system-for-scalability-in-figma-f56d651febdd