แก้ปัญหา เปลี่ยน Variant แล้ว icon ไม่เปลี่ยนสีตาม (First trick)
ปัญหาของการสลับ icon ใน instant คือมันจะไม่จำสีเดิม พอเราเปลี่ยน icon ใหม่ ไม่ว่าจะใช้วิธี Drag & Drop แบบในภาพข้างบน หรือใช้วิธีเปลี่ยน component ที่ property ด้านขวา ก็จะได้ผลว่ามันจะใช้สีเดิมของ icon แทนที่จะเปลี่ยนสีตามที่ component ของเรากำหนดเอาไว้
ทางแก้สวยๆ ตอนนี้มีสองท่าครับ ใน Blog นี้จะเป็นท่าแรก 😁
ท่าแรก → ตั้งชื่อ layer ให้เหมือนกัน
จะเห็นว่าในวีดีโอผมลาก icon บนพื้นสีเขียวมาใส่ ซึ่งทำให้ icon ในปุ่มมันกลายเป็นสีดำตามสีดั้งเดิมของ icon แต่ถ้าลองดูชื่อ layer ในแต่ละ icon จะเห็นว่าชื่อของมันเป็นชื่อเดียวกับ component (ภาพซ้าย) เราลองเปลี่ยนชื่อ layer ด้านในของ icon ให้เป็นชื่อเดียวกันหมด ซึ่งในที่นี้ผมใช้คำว่า “vector” (ภาพขวา)
** จุดสำคัญคือมันต้องรวบให้เหลือแค่ layer เดียวไม่อย่างนั้นตัว Figma อาจจะเดา layer ที่ต้องเปลี่ยนสีผิดได้
หลังจากเปลี่ยนชื่อ layer ให้เหมือนกันหมดแล้ว ก็ทดลองใหม่ครับ
จะเห็นว่าพอเราลาก icon มาใส่ Figma ก็เปลี่ยนสีของ layer ให้เราเลย เพราะมันเดาได้ว่าต้อง overide สีใน layer ที่ชื่อเดิม ทำให้เราได้ผลอย่างที่เราต้องการ 🥰
** ในวีดีโอ จะเห็นว่าเหมือนว่า background ของ icon เป็นสีเขียวกับสีฟ้า แต่จริงๆ background ของ icon ไม่ได้มีสีครับ 🫥 ทาง Figma จะเอาสีของ Frame หรือ Session ที่คลุม main-component เอาไว้ มาแสดงเป็นสี backgroundในช่อง Asset ซึ่งเราสามารถใช้ความสามารถนี้ในการแยกประเภทของ main-component ได้
ทีนี้ก็ลองเอาเทคนิคเดียวกันมาใช้กับ Varient ดูครับ
ในวีดีโอนี้ icon ของเราเปลี่ยนสีไปเมื่อเอา icon มาใส่ใน instant และเมื่อเราเปลี่ยน varient สีของ icon ก็เปลี่ยนตามที่เรากำหนดใน varient ได้เลย แก้ปัญหาไปอย่างสวยงาม 💁 🎉
ในกรณีที่เราคุมตัว Design System หรือคุม icon ได้ การใช้เทคนิค “เปลี่ยนชื่อ layer ให้ตรงกัน” ก็สามารถทำได้ และทำให้มันดูเรียบร้อยมากๆ ด้วยครับ
แต่ note ไว้นิดหน่อยนะครับชื่อ layer ที่เราเห็นว่ามันเหมือนกัน บางทีมันก็ไม่เหมือนกันครับ 🥹 เพราะ Figma มันซ่อนพวก “ “ ช่องว่างเอาไว้ ถ้าลองไปใช้แล้วไม่สำเร็จก็ให้ลองเขียนชื่อใหม่อีกรอบนึงนะครับ
และแน่นอนว่าไม่ใช่ทุกครั้งที่เราจะคุม icon ได้ทั้งหมด อาจจะเป็นเพราะเค้าใช้ icon นี้มานานแล้ว ยังไม่อยากให้เราไปแตะ หรือเราไปเอา icon ของคนอื่นมาใช้ จะต้องเปลี่ยนทุก icon ให้เหมือนกันหมดก็งานหนักไป
ถ้าเราตกในกรณีนี้ ผมจะไปเจออีกเทคนิคนึงครับ ชื่อว่า “Tint icon” ไว้เราไปเล่าต่อใน blog หน้านะครับ
