แก้ปัญหาเปลี่ยน Variant แล้ว icon ไม่เปลี่ยนสีตาม (Second trick)

ท่าแรกเราเราใช้ท่า “ทำ sub-layer ของ icon ให้เหมือนกัน” ลองย้อยกลับไปดูที่มาของปัญหาและวิธีการทำได้ใน blog ที่ผ่านมาครับ

ในกรณีที่เราคุมตัว icon ให้มีชื่อ sub-layer เหมือนกันไม่ได้ หรือบางกรณีเราก็ไม่อยากรวบให้มันเหลือแค่ sub-layer เดียว หรือกรณีที่เรากลัวว่าถึงชื่อจะแสดงเหมือนกัน แต่เราก็ไม่รู้ว่ามันเหมือนกันจริงหรือเปล่า

ถ้าเราตกอยู่ในสถานการณ์นี้ ท่าที่สองก็เหมาะสมดีครับ และยังเป็นท่า official ที่ Figma advocate แนะนำด้วย

ท่าที่สอง → Tint icon

สร้าง Component ขึ้นมาเพื่อกำหนดสี

ท่านี้เราจะสร้าง component ขึ้นมาเพื่อใช้กำหนดสีโดยเฉพาะ โดยผมตั้งชื่อมันว่า Tint icon ในนั้นจะมี layer นึ่งที่ตั้งชื่อ layer นี้ว่า Color ซึ่งผมจะใช้ในการกำหนดสีให้กับ icon ที่อยู่ข้างในมันอีกที

หลังจากทำให้ Tint icon กลายเป็น main-component แล้ว เราก็เอามันไปใช้ไว้ใน Component ที่เราต้องการ อย่างในภาพข้างบนผมเอาไปใส่ใน Button

ทดลองสลับ icon ด้วย property ด้านซ้าย และการลากวางจาก Assets

จากวีดีโอข้างบน จะเห็นว่าถึงแม้เราจะใช้ icon ชุด Normal ที่มีชื่อ sub-layer ไม่เหมือนกันเลย แต่พอเราเอา Tint icon ครอบมันไว้ มันก็จะช่วยคุมสีของ icon ให้เราได้เลย (เราไม่ต้องกังวลว่า icon จะชื่อเดียวกันหรือมีไม่)

วิธีสร้าง Component Tint icon แบบ Step by step

สร้าง Frame ครอบ icon และ กล่องสี่เหลี่ยม

ขั้นตอนที่ 1 วาง icon ต้นแบบไว้หนึ่งอัน แล้วสร้าง Frame ครอบ

ในตัวอย่างผมเลือก icon ชื่อ grade มาเป็นต้นแบบ จากนั้นก็สร้าง Frame ขนาดเท่า icon มาครอบเอาไว้ แล้วก็สร้างกล่องสี่เหลี่ยมใส่ไว้ใน Frame ด้วย

ขั้นตอนที่ 2 สั่ง Union กล่องสี่เหลี่ยม และ icon เข้าด้วยกัน

ขั้นตอนจะดีกว่าการใช้เทคนิค mask เพราะพวกเส้นจะยังอยู่ครบ แต่ถ้าเป็น mask ถ้าเส้นไหนที่ลืมสั่ง outline stroke มันก็จะหายไปเลย แต่แนะนำว่าถ้าไม่เป็นกรณีเฉพาะจริงๆ ก็ควรสั่ง outline stroke ทุกครั้ง จะได้ไม่มีปัญหาตอน scale icon ครับ

ขั้นตอนที่ 3 ลบกล่องสี่เหลี่ยมออก

พอเราได้ layer union มา ตัวสีเหลี่ยมก็หมดความหมาย เราสามารถลบออกได้เลย

แก้ชื่อ layer และเปลี่ยนสีเริ่มต้นให้เรียบร้อย

ขั้นตอนที่ 4 แก้ชื่อ layer ให้เรียบร้อย

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

ในกรณีนี้ผมแก้ชื่อ union layer เป็น Color เพื่อสื่อว่าให้กำหนดสีที่ layer นี้นะ แล้วก็เปลี่ยนชื่อ Component เป็น Tint Color

** tint, (n) สีสำหรับย้อม

ทีนี้เราก็จะลองเอาไปใช้กับ varient กันดูครับ

Tint icon กับ Varient

ในภาพด้านบนเราลองเอา Tint icon ไปใส่ใน main-component Button แล้วลองดึงออกมาใช้ จะเห็นว่าตอนเราเปลี่ยน icon มันก็แทนสีดำด้วยสีขาวให้เลย และตอนที่เปลี่ยน Varient สีก็ปรับตามไปด้วยเลย 🎉

**ผมเพิ่ม Property ให้ Tint icon ด้วย เพื่อให้ designer สามารถเลือก icon ได้ง่ายขึ้น

พอเราคุมได้แบบนี้ ก็สบายใจเรื่องสีของ icon ไปได้เยอะเลยครับ ถ้าใครลองแล้วได้ผล หรือไม่ได้ผลอย่างไร ฝากมาถามได้เลยนะครับ

สำหรับใครที่อ่านมาถึงตอนนี้แต่ยังไม่ได้ดูตอนที่ 1 ก็แนะนำให้ดูด้วยนะครับ ในนั้นจะมีที่มาของปัญหาที่ไม่ได้อธิบายใน blog นี้ด้วยครับ

เทคนิคแก้ปัญหา เปลี่ยน Variant แล้ว icon ไม่เปลี่ยนสีตาม (First trick)