วิธีใช้ Overrides และ Nested Symbol ใน Sketch

คราวที่แล้วเราได้พูดถึง Basic ของการใช้ Symbol ใน Sketch ไปแล้ว หากใครที่ยังไม่ในใจกับวิธีสร้าง Symbol ผมแนะนำให้อ่านบทความที่แล้วก่อนครับ (กดที่นี่)

คราวนี้เราจะมาต่อกันเลยกับเรื่อง Overrides และ Nested Symbol ซึ่งจะทำให้ Symbol ใช้ประโยคได้อีกมาก

Table of Content​: Advance Level I

  • เปลี่ยนค่าต่างๆ ใน Symbol (หรือเรียกว่า Overrides)
  • Symbol ซ้อน Symbol (Nested Symbol)

Table of Content​: Advance Level II — รอต่อคราวหน้านะครับ :)

  • Responsive Symbol สำหรับการเปลี่ยน Size
  • การ Organize Symbol

ความเดิมจากบทความที่แล้ว

ครั้งที่แล้วเราได้ เรียนรู้กันถึงวิธีการสร้าง Symbol เพื่อช่วยลดเวลาการแก้ไข element ที่ซ้ำๆ กัน เช่น ปุ่ม หรือ เมนู วิธีสร้าง Symbol นั้นง่ายๆ

  1. Group layer ของ Background และ ของ Text เข้าด้วยกัน
  2. คลิกขวาที่ Group นั้นและเลือก Create Symbol (หรือ ไปที่เมนู Layer > Create Symbol)
  3. ใส่ชื่อ Symbol ที่เราสร้างขึ้นใหม่ (ชื่อสามารถเปลี่ยนได้ภายหลัง)

เปลี่ยนค่าต่างๆ ใน Symbol (Overrides)

เรามาลองสร้าง Symbol ที่ complex ขึ้นบาง เช่น Contact List

  1. สร้าง Contact List ขึ้นมาหนึ่งอัน
  2. Group Layers รวมกันแล้ว Create Symbol
  3. Copy Symbol นั้น แล้ว Paste อีกหลายๆ รอบ

Tip:

ตรงภาพ Profile Picture ผมใช้ รูปสีเหลียมจัตุรัสและทำการ Mask ด้วยวงกลม

เมื่อทำเสร็จแล้วคุณก็จะได้ Contact List ที่เป็น Symbol หากคุณต้องการเปลี่ยน สี ของทุก Contact List คุณก็สามารถ Double Click ที่ Symbol อันหนึ่งและแก้ตรงนั้นที่เดียว

แต่การที่ รูป และ text ซ้ำๆ กัน มักจะทำในคนเห็น UI เรารกกว่าที่ควรจะเป็น ดังนั้นเราจึงต้องใช้อีก Feature หนึ่งของ Symbol ชื่อว่า Overrides เพื่อทำให้ Contact List แต่ละอันแตกต่างกัน

ทุกครั้งที่คุณเลือกที่ Symbols จะมีเมนูด้านขวาชื่อว่า Overrides แสดงขึ้นมา เมื่อคุณพิมในแต่ละช่องของ Overrides ข้อมูลใน Symbol ก็จะถูกเปลี่ยนตาม คุณสามารถเปลี่ยนรูปที่ใช้ได้เช่นกัน ถึงแม้คุณจะเข้าไปแก้ Symbol เช่นเปลี่ยนสี Content ที่คุณใส่ไปใน Overrides ก็ยังคงอยู่

Tip 1:

เวลา Override ใช้รูปที่มี Ratio เดียวกับรูปใน Symbol ไม่เช่นนั้นรูปที่ใส่เข้าไปจะถูกยืดจนเพี้ยนได้

Tip 2:

ชื่อของและลำดับของแต่ละ Field ใน Overrides จะตรงกับใน Layer ของ Symbol ดังนั้นเพื่อความสะดวกภายหลังผมจะ Layer ให้และตั้งชื่อแต่ละอันให้เข้าใจง่าย เช่น Layer “Jon Snow” ควรเปลี่ยนชื่อเป็นชื่อว่า “Name”

Tip 3:

คุณสามารถ เปลี่ยนจาก Symbol อันหนึ่งเปลี่ยนเป็นอีกอันได้ Text ใน Overrides จะคงเดิม แต่รูปจะถูก Reset

Symbol ซ้อน Symbol (Nested Symbol)

Symbol สามารถอยู่ในอีก Symbol ได้ (ฟังดู Inception มาก) หรือเรียกกันว่า Nested Symbol ซึ่งจะมีประโยคเมื่อคุณมี Component ใน Symbol ที่ใช้อยู่หลายที่ ในตัวอย่าง Contact List จะเห็นได้ว่า Icon นั้นจะถูกใช้ได้หลายครั้ง ซึ่งเราสามารถทำแต่ละ Icon ให้กลายเป็น Symbol ได้

เหมือนคุณเปลี่ยน Icon ที่เดียว Icon ที่เป็น Nested Symbol ก็จะถูกเปลี่ยนตาม อีกหนึ่งสิ่งที่ Nested Symbol จะช่วยคุณได้คือการเปลี่ยน Symbol ใน Overrides

นอกจากเลือกรูปแล้ว คุณยังสามารถเลือก Symbol อืนมาแทนใน Overrides ได้ด้วย (Feature นี้พึ่งใหม่มาพร้อมกับ Sketch 41)

Caution

Nested Symbol ที่คุณสามารถเปลี่ยนกันได้จะต้องมี Size ของ Artboard ที่เท่ากัน

ปิดท้ายบทความ

ตอนแรกผมจะเขียนทีเดียวให้หมด Advance Level เลย แต่รู้สึกเนื้อหาเริ่มเยอะเกิน เลยอยากจะให้ๆ ค่อยๆ ย่อยกันไปนะครับ

ขอเสริมท้ายว่า ในกรณีที่คุณไม่ต้องการให้ Symbol เป็น Symbol แล้ว ซึ่งเกิดขึ้นบ่อยเมื่อคุณต้องการ Component ใหม่ที่ไม่เหมือนเดิม ไห้คุณคลิกขวาที่ Symbol นั้นแล้วเลือก “Detach from Symbol” Symbol นั้นก็จะแตกกลายเป็น Layers เหมือนเดิม แต่อย่างไรก็ตามถ้าคุณรู้ว่า Component นั้นจะต้องถูกนำมาใช้ใหม่ ผมก็แนะทำให้เอามาทำเป็น Symbol อันใหม่ครับ

ข้อดีของ Symbol อีกอย่างคือการทำให้ Layers ของคุณ Organize และ อ่านง่ายขึ้น ในรูปด้านล่างบนให้ดูสอง Artboard อันแรกมีใช้แต่ Symbol อีกอันแยกออกมาเป็น Layers คุณลองเปรียบเทียบความแตกต่างของ Layers ดูครับ

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.