ลองทำ Sketch symbol สำหรับ responsive design

ตอนนี้สนุกกับการสร้าง Symbol เอาไว้ใช้งานเป็นลักษณะ UI Kit เพื่อให้คนอื่นสามารถเอาไปทำงานต่อได้

Sketch symbol คืออะไร?
อธิบายแบบเข้าใจง่ายๆ ก็คล้ายๆการ Group ของรวมกัน แต่เพิ่มความสามารถในการนำไปใช้ได้ใน Artboard อื่นๆได้ด้วย เวลาแก้จุดนี้จุดเดียวที่อื่นๆก็จะถูกเปลี่ยนแปลงไปด้วย และก็สามารถ overrides ของได้ ยกตัวอย่างเช่น

ฝั่งซ้าย (A) ค่าเริ่มต้นเมื่อใช้ symbol และหลังจาก Overrides ให้กลายเป็น Download จะได้ฝั่งขวา (B)

และด้วยการออกแบบในลักษณะ responsive design มักจะอยากให้ของแต่ละชิ้นแสดงผลได้เหมาะสมที่สุดในขนาดหน้าจอนั้นๆ ด้วย ซึ่งแต่ก่อนก็จะเลือกทำ symbol ของแต่ละอันแยกกันตามขนาด breakpoint ที่ต้องการ สมมติว่าทำ Navbar ก็จะมี Navbar ของ Desktop, Tablet และก็ Mobile ของแต่ละ breakpoint แยกกันไป ทำให้เวลาแก้ของต้องตามแก้ทั้ง 3 ชิ้น

พอมานั่งดูแล้วก็คิดว่าถ้าเป็น Symbol อันเดียวโดยไม่ต้องมาแยกกว่าเป็นของ breakpoint ไหน เวลาแก้ก็แก้จุดเดียว และก็เลือกว่าจะให้แสดงผลแบบไหน ลองทำวิธีนี้กับ Navbar ดู ซึ่งน่าจะพอทำให้เห็นภาพว่าทำออกมาแล้วจะเป็นยังไงบ้าง ลองตั้งโจทย์พื้นฐานทั่วไปแบบนี้

• Desktop แสดง 4 เมนู ที่มี icon พร้อมชื่อเมนู
• Tablet แสดง 4 เมนู แสดงเฉพาะ icon อย่างเดียว
• Mobile ย้าย Logo มาตรงกลาง แสดง icon เมนูแรกสุด

ได้โครงสร้าง Symbol ออกมาประมาณนี้ มี icon ให้เลือกใช้ 6 แบบ

ในส่วนของ Overrides ต้องใช้เป็นชื่อสั้นๆ

เพราะไม่สามารถขยาย Inspector ของ Sketch ได้ (ไม่รู้ว่าคนอื่นเจอปัญหาแบบนี้มั้ย) จะประกอบไปด้วย Device ส่วนนี้จะเป็นตัวกำหนดว่าจะแสดงใน Breakpoint ไหน ต่อด้วย icon และชื่อเมนูแต่ละอัน

หลักการ Overrides คือชื่อ Field จะต้องเหมือนกัน เวลาสลับก็จะใช้ค่านั้นเสมอ ทำให้สามารถเปลี่ยน Device ไปมาได้

ลองใช้ Symbol ที่ทำขึ้นมา

อันนี้เป็นแค่เงื่อนไขพื้นฐานมากๆ ยังไม่ได้ไปถึงการมี state ย่อยๆ ข้างใน เช่น อยากให้ Active เมนูได้ด้วย หรือ เวลา hover ตรงเมนูแสดงผลยังไง เพราะการเพิ่มสิ่งพวกนี้เข้าไป ตรง field ต่างๆตอน Overrides ก็จะเยอะตามไปด้วย

สิ่งที่รู้สึก

• บางครั้งก็อยากจะตั้งชื่อใน overrides ให้ยาวกว่านี้ เพราะถ้าใช้กับ symbol ที่มีเรื่อง State ของของต่างๆข้างในด้วย จะวุ่นวายขึ้นอีกพอสมควร
• สำหรับการ overrides นั้น ถ้าเป็นที่ขนาดเท่ากันจะถูกหยิบมาให้เลือกด้วย เช่นถ้าเกิดมี symbol สี่เหลี่ยมที่ไม่ได้ใช้ในส่วนของ Navbar แต่ขนาดดันเท่ากับ icon พอดี ก็จะมีให้เลือกตอนเลือก icon ด้วย
• การตั้งชื่อสั้นๆเข้าใจง่ายๆ เช่นชื่อ icon จะดีเวลาที่ override อ่านเข้าใจง่าย เช่น Icon = History แต่จะไม่ได้ใช้ความสามารถในการแบ่ง Category ของ symbol เช่นถ้าตั้งชื่อว่า navbar/icon/history ตอนดู symbol ทั้งหมดก็จะง่าย แต่ตอนเลือก override ก็จะได้ชื่อยาวๆแบบนั้นมาด้วย