🔥ไฟล์ใหญ่ไม่ไหวแล้ว

เคยเจอปัญหานี้กันบ้างรึเปล่านะ เวลาทำงานที่มีสเกลขนาดใหญ่จนโปรแกรม Figma ไม่สามารถรองรับได้ ด้านบนจะมี Banner สีแดงและเหลืองปรากฎอยู่ ซึ่งนั้นเป็นเหมือน Red Flag ที่เตือนเราว่าไฟล์งานที่เรากำลังทำอยู่มีขนาดใหญ่เกินไปและอาจจะไม่ถูกบันทึกแล้ว หรืออาจบึ้มเมื่อไหร่ก็ได้ 😥

ซึ่ง Banner นี้จะเริ่มเตือนตั้งแต่ที่ไฟล์ของเรากินความจำมากตั้งแต่ 65% – 100% ค่ะ

ภาพจาก Figma Community

🎃Problems Statement:
ต้นตอของปัญหาเป็นไปได้หลายรูปแบบ เช่น
→ สเกลงานที่มีขนาดใหญ่มากๆ และ scope ที่เพิ่มเติมเข้ามา
→ ในไฟล์มี unstructured Component จำนวนมากที่ถูกสร้างใหม่
→ มี UI molecule/atom ที่ไม่ถูกสร้างเป็น sub component นอกจากจะมีปัญหาเรื่องไฟล์แล้ว เมื่อเกิดการเปลี่ยนแปลงตาม requirement เลยยากที่จะตามแก้ด้วย

🎯Solutions:
เป้าหมายของ Blog นี้
→ Clean up: ลดจำนวน variants โดยใช้ component property
→ Scalability : เพิ่มประสิทธิภาพในการ reuse component/update design ตาม change requests

.

.

✍️Component Properties

เป็นฟีเจอร์ของ Figma ที่ประกาศใช้เมื่อ May 2022 โดยเน้นใช้แนวคิดเดียวกับ CSS property / CSS variable

💡 Properties คือ การกำหนดตัวแปรขึ้นมา
💡 Variant (Variable) คือ การนำค่าของตัวแปรมาใช้

ซึ่งหลักการของ CSS นี้สามาระนำมาปรับใช้ได้ไม่ยากเลย

👉 1. สร้าง Base Components

Concept ของ Base Component คือ การสร้าง Component หลักเพียงชิ้นเดียว ที่มีโครงสร้างครบถ้วน

→ ต้องการแสดงข้อมูลอะไรบ้าง
→ ข้อมูลนั้นเป็นข้อมูลแบบใด (character, numeric, image, icon)
→ ใครคือ user และมี user กี่ประเภทที่สามารถมองเห็นข้อมูลประเภทนั้นบ้าง
→ประกอบด้วย Atoms / sub components อะไรบ้าง

👉 2. กำหนดรูปแบบ property ใน element ของ Component นั้นๆ

🔹  Variants: การระบุ custom property ที่ต้องการ
👁  Boolean Property: การซ่อน/แสดง component
⌨️ Text property: ช่วยให้เราแก้ไข text ได้ที่ panel
🔁  Swap instance: property ที่ช่วยให้เราสลับ component ได้ที่ panel

👉3. Apply property ไปยัง Base Component

เมื่อเราวางโครงสร้างและเตรียม element ต่างๆ เสร็จแล้ว ให้ Select ที่ element นั้น ใน Base Component → ไปที่ Panel ด้านข้างจะพบ สัญลักษณ์บนขวา ให้กด Apply

เราจะสามารถ Apply Property ไปยัง Base Component ได้หลายแบบ ซึ่งเป้าหมายคือการ set up panel สำหรับการตั้งค่า element ต่างๆ โดยเมื่อเราลองใช้ copy Base Component เราจะพบว่า panel ได้รับการอัพเดท

เราต้องการให้ Base Component ของเราเป็นดังนี้

• Icon = Instance สามารถเลือกจาก library ได้
• Homework = เป็น Text Property ที่สามารถพิมพ์แก้ไขได้ที่ Panel โดยไม่ต้องกดที่ตัว Layer
• Status = Boolean เปิดปิด
• Assignee = Boolean เปิดปิด
• Assignee = เป็น Text Property เช่นกัน

และ Status, Button ที่ถูกออกแบบเป็น Varients สามารถแก้ไขได้ที่หน้า panel นี้เลยโดยไม่ต้องลงไปที่ Layer เช่นกัน

วิธีการ Set up เพิ่มเติมสามารถดูได้ที่: https://www.figma.com/community/file/1100581138025393004

🔥 เสร็จแล้ว! Base Component เอาไปใช้งานอย่างไรดี?

• ทำ Varients : เหมาะใช้สำหรับ component ที่อาจมีหลาย scenario และใช้ในหลายๆหน้า เพราะจะช่วยให้เราสร้าง preset ของ component นี้ได้โดยไม่ต้องไปคอยแก้ไข property ใน artboard ทีละชิ้น

• ประกอบใน Component อื่นๆ อีกที

📡 สรุปแล้ว Component property ช่วยลดขนาดไฟล์ได้จริงไหม?

จากที่เราทดลองแก้ไข component โดยการเปลี่ยนการใช้แต่ Varient มาเป็น Component Property จากตัวอย่าง สามารถลดจำนวน component จาก 9 Varients เหลือเพียง 1 Base Component ! ซึ่งแปลงค่า Memory usage จาก 89% ลดลงเหลือ 60% เลยทีเดียว

หวังว่า blog นี้จะมีประโยชน์และสามารถนำไป Apply ได้นะคะ

References:

https://www.figma.com/community/file/1100581138025393004
https://www.joeyabanks.me/component-properties-in-figma/
https://stackoverflow.com/questions/48873595/is-there-a-difference-between-css-custom-properties-and-css-variables
https://uxplanet.org/figma-component-properties-548728f25392
https://www.figma.com/community/file/1113141767963760931
https://www.uiprep.com/blog/figma-variants-101