Image for post
Image for post

Secret of Symbols on Sketch ตัวช่วยชีวิต UI Designer จากการแก้ไข Mockup

แน่นอนว่า UI Designer หลายๆคงจะคุ้นเคยโปรแกรมอย่าง Sketch เป็นอย่างดี แต่จะมีซักกี่คนที่รู้ทริคเหล่านี้ ในการใช้ Symbols ให้เกิดประโยชน์สูงสุด เพื่อทำให้การแก้ไข Mockup ที่เป็นร้อยๆหน้า ให้เสร็จรวดเร็วทันใจแค่ 2–3 คลิ๊ก

จากการลองผิดลองถูก และประสบการณ์ในการใช้โปรแกรมนี้มาอย่างหนักหนาสาหัส(?)ที่ผ่านมาของตัวเราเอง รวมถึงคนในทีม ทำให้รู้ว่าการใช้ Symbols บนโปรแกรม Sketch ที่เคยทำกันมาตลอด เรากลับใช้ประโยชน์จากสิ่งนี้ได้ไม่ครบถ้วนมากเท่าที่ควรจะเป็น

เรามาลองดูกันค่ะ ว่าสุดท้ายแล้วเราตกตะกอนอะไรกันมาบ้าง มาเริ่มกันเลยนะคะ

Image for post
Image for post

เคยเป็นปัญหากันไหมคะ ในการกด Copy Symbol จากหน้าต่างการทำงานเดียวกัน แล้วทำให้ Symbol Double ขึ้นมากลายเป็น 2 อันใน Pages Symbols การกดตามวิธีข้างต้นทำให้เราลดปัญหาเหล่านี้ไปได้เลยค่ะ

โดยการใช้งานก็แค่กดปุ่ม Insert ด้านซ้ายบนของหน้าต่าง แล้ว เลือกที่ Document ตามภาพ เราก็จะเห็นสิ่งที่เราสร้าง Symbols ไว้ แล้วก็กดมาใช้งานได้แล้วละค่ะ

2. การใส่ / ในชื่อของ Symbols เพื่อจัด Folder ให้กับมัน

Image for post
Image for post

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

ซึ่งปัญหานี้ก็แก้ไขง่ายๆด้วยการใส่เครื่องหมาย “/” เข้าไปให้การตั้งชื่อ Symbols ของเรา เช่น แทนที่จะตั้งชื่อว่า textfield-input ก็ควรจะเปลี่ยนชื่อเป็น textfield/input แทนแบบนี้ค่ะ

Image for post
Image for post

3. การเปลี่ยนตัวอักษรที่นำมาใช้งานจาก Symbols

การแก้ไขตัวอักษรให้กับ Symbols ที่เรานำมาใช้งานนั้น สามารถแก้ไขได้ด้วยการพิมพ์ในช่องจากหน้าต่างด้านขวามือสุด ที่จะปรากฏเมื่อเรากดโฟกัสที่ Symbol นั้นๆค่ะ

Image for post
Image for post
Image for post
Image for post

4. การ Overrides เพื่อเปลี่ยน Symbols ได้อย่างรวดเร็ว

การ Overrides คือการแทนที่ด้วย Element นึง เป็นอีก Element นึงได้อย่างรวดเร็ว ถ้าเราวางแผนในการทำ Symbols ไว้มาอย่างดีแล้วละก็ การ Overrrides ถือว่าทำให้เราประหยัดเวลา และรวดเร็วมากจริงๆค่ะ เพราะเพียง 2–3 คลิ๊กเท่านั้นจริงๆ เราก็สามารถเปลี่ยน Element ได้รวดเร็วอย่างใจเลยละคะ

ซึ่งส่วนการทำ Overrides นั้นก็วางอยู่ในตำแหน่งด้านขวามือของหน้าจอเช่นกันตามภาพดังนี้ค่ะ

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

5. การ Lock Element เพื่อการยืดขยายของ Group Element ที่เรานำมาใช้งาน

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

เราแก้ปัญหานี้ได้ด้วยการใช้ประโยชน์จาก Resizing ที่ด้านขวาของหน้าจอค่ะ

Image for post
Image for post
Image for post
Image for post

ในที่นี่จะขอยกตัวอย่างการ lock placeholder ด้วยการใช้ Resizing ค่ะ ให้เรากดเลือกสิ่งที่ต้องการจะ lock และเลือก Position ว่าเราจะเลือก lock ด้านไหนบ้าง ในที่นี่ต้องการให้ Placeholder อยู่ชิดซ้าย และด้านบน เลยกดไว้ตามภาพค่ะ (จะเห็นเป็นสีน้ำเงินถ้ากดเลือก lock position ในด้านนั้นๆแล้ว)

ในที่เดียวกันนี้ เราสามารถ lock Width และ Height ของ Element ไว้ได้ด้วยเช่นเดียวกันค่ะ ที่นี่เราก็ไม่ต้องกังวลแล้ว ว่าการยืดขยายจะส่งผลกระทบต่อ element ของเราค่ะ

Image for post
Image for post
Image for post
Image for post

6. Prototyping Text style

การออกแบบหน้าจอ Mockup จำนวนมาก หลายๆครั้งก็จำไม่ได้ใช่ไหมละคะ ว่าในงานเดียวกันเนี้ย เราใช้ Font ไปกี่ Size, Weight เท่าไรบ้าง แถมมี font มากกว่า 1 font ก็จะยิ่งเพิ่มความงงเข้าไปอีก ทั้งตัวคนออกแบบเอง รวมไปถึง Dev

การจัดระเบียบที่ดีก็เป็นเรื่องที่สมควรใช่ไหมละคะ แล้ว Sketch ก็ตอบโจทย์เราด้วยการมี Prototyping มาให้ค่ะ

ซึ่งการใช้งาน Prototyping เนี้ยไม่ยากเลย การทำคือให้เราเลือก Text ที่ต้องการให้เป็นตัวอย่าง แล้วกดที่ลูกศรลงในส่วนของ Prototyping ด้านขวาของหน้าจอเพื่อ Create new Text Style ขึ้นมาค่ะ พอตั้งชื่อเสร็จเราก็จะได้ Text Style มาสดๆร้อนๆ พร้อมนำไปใส่ Text อื่นๆได้ง่ายๆ สะดวกและรวดเร็วค่ะ

Image for post
Image for post
Image for post
Image for post

ถ้าเรามี Text Style เยอะๆ ก็สามารถเข้าไปจัดการได้ที่หน้าต่าง Organize Text Styles… ตามภาพเลยค่ะ ทำได้ทั้งลบ และเปลี่ยนชื่อ สะดวกสบายใช่ไหมละคะ

Image for post
Image for post
Image for post
Image for post

ซึ่งถ้าหากเราใช้ Text Style ร่วมกันเยอะๆเนี้ย การแก้ไข (Update Text Style) ก็จะเปลี่ยนแปลง Font ที่ Text Style เดียวกันพร้อมกันทั้งหมดเลยละคะ

7. Prototyping Layer style

คอนเซปของ Prototyping Layer style จะคล้ายกับของ Prototyping Text style ค่ะ แต่เปลี่ยนจากการทำงานกับ Text เป็น Element แทนค่ะ

Image for post
Image for post

ครบถ้วนหมดแล้วละคะสำหรับทริคดีๆที่อยากจะบอกกล่าวให้กับ UI Designer ที่ใช้ Sketch ออกแบบงานทุกๆคน สำหรับใครที่ยังไม่รู้ทริคเหล่านี้แนะนำอยากให้ลองนำไปใช้ทำงานกันดูนะคะ เพราะจะทำให้การทำงานของคุณง่ายขึ้นมากๆเลยละคะ

ถึงแม้ว่าช่วงแรกในการใช้งานกับ Symbols จะค่อนข้างเข้าใจยากนิดหน่อย แถมยังต้องคิดเผื่ออนาคตเยอะๆว่าจะมีอะไรเกิดขึ้นใน mockup ของเราบ้าง แต่ถ้าได้ฝึกใช้จนชิน จะทำให้ทีมของคุณและตัวของคุณเองทำงานง่ายมากขึ้นเยอะเลยค่ะ แถมยังประหยัดเวลาได้มากขึ้นอีกด้วยนะคะ :)

teamappman

AppMan has become a leading provider in life insurance…

Natnalin Sompaiboon

Written by

UI Specialist @ Appman Co.,Ltd

teamappman

AppMan has become a leading provider in life insurance space. We serve top insurers in Thailand by providing our solution to make insurance better.

Natnalin Sompaiboon

Written by

UI Specialist @ Appman Co.,Ltd

teamappman

AppMan has become a leading provider in life insurance space. We serve top insurers in Thailand by providing our solution to make insurance better.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store