เมื่อใช้ Sketch ทำงานร่วมกับ InVision (Sketch-Craft-InVision)

แรกเริ่มเดิมทีก็เป็นสายถึก จะทำ Mock up ขึ้นมาสักโปรเจคก็เปิดเลยจ้า Adobe Photoshop ไม่ก็ Adobe Illustrator เสร็จถึง Export เป็นไฟล์รูป พอกำลังเริ่มศึกษา Adobe XD หลังจากทาง Adobe ให้โหลดโปรแกรมใช้ฟรี แล้วก็เริ่มมีโปรเจคหนึ่งที่ได้ทำงานร่วมกับ Outsource ซึ่งเขาใช้ Sketch ในการสร้าง mock up/prototype แล้ว Sketch เนี่ย สามารถ Sync ขึ้น InVision ได้ด้วย ก่อนหน้านี้ก็เคยใช้ InVision มาก่อนแล้ว และบทความนี้จะไม่อธิบายอะไรมากมายว่า Sketch กับ InVision คืออะไร ขอข้ามไปเลย

พอเริ่มใช้งานเป็นบ้างจากการได้ศึกษาจากไฟล์ของ outsource และซนด้วยการลองเปลี่ยนตรงนี้ตรงนั้น ก็พบว่า ชีวิตง่ายขึ้นเยอะเลยถ้าเทียบกับการใช้ 2 โปรแกรมที่กล่าวมาข้างต้น อย่างการเรียกใช้สัญลักษณ์ก็ง่ายมาก ยิ่งทำ mock up เป็นระบบ ios คือมีดีไซน์สำเร็จรูปให้เลย แค่กด “insert>IOS UI Design” แล้วเลือกแบบที่ต้องการใช้ก็ได้ละ หรือแม้แต่การสร้างสัญลักษณ์ขึ้นมาเอง เพียงกด “Create Symbol” ก็สามารถเรียกใช้ได้ทั้งโปรเจคนี้ ไม่ว่าจะแยกกี่ page ซึ่งสัญลักษณ์ที่สร้างก็จะไปปรากฏที่ “insert>Document”

พอสร้างหน้าจอเรียบร้อย ต้องการโยง prototype ให้โหลด Plug-in ที่ชื่อ Craft และทำการ Install ก่อน จริงๆ ไม่ต้องรอหน้าจอเสร็จหรอก โหลดมาเลย แล้วก็กดคลิกเข้าไปดูตรงด้านบนของจอที่มีไอคอน C แล้วในส่วนแถบ “Prototypes” ก็ทำการ log in InVision acount ก่อน หากยังไม่มีสมัครได้ที่ website เลย แถบถัดมา “Tool” ให้ทำการเปิด Permission ของ Sketch ให้หมด (Craft plug-in สามารถ sync จาก photoshop ได้ด้วยแต่ยังไม่เคยลอง)

หลังจากทำการ install plug-in เปิดเข้าไปดูใน Sketch ก็จะมีแถบด้านข้าง Inspector เพิ่มมา หากต้องการโยง prototype ก็คลิกที่สัญลักษณ์สายฟ้า หรือ คีย์ลัด c แต่ต้องทำการเลือกวัตถุก่อน แล้วทำการโยงได้เลย ส่วนการ sync ก็ทำการคลิกตรง layer หลักที่เป็นชื่อของ Art board หรือทำการคลุมทั้งหน้าจอ สามารถ sync ทีละหน้าจอหรือจะทั้งหมดเลยขึ้นอยู่ที่เราเลือกเลย แต่ก่อนจะ sync อย่าลืมกด save งานก่อน แล้เ

ทีนี้มาดูหลังจาก sync ไป InVision แล้ว จริงๆ ในตัว InVision เองก็สามารถโยง prototype ได้นะ แต่เราว่าทำใน Sketch จะง่ายกว่าเพราะเห็น Over all เลยว่าตรงไหนโยงไปแล้ว ตรงไหนยัง อีก Feature หนึ่งที่ใช้แล้วช่วยประหยัดเวลาก็คือ Inspector Mode ก็คือมันสามารถดู Code พวกขนาดความกว้าง ความสูง ใช้ฟอนต์ขนาดไหน regular หรือ italic ใช้สีอะไร โดย Dev(Developer) ไม่ต้องมานั่งถาม Designer ละ แถมเลือกประเภท code อย่าง CSS, LESS, SASS และอื่นๆ

อ้อ ลืมบอกว่า ตอนแรกที่เริ่มใช้ Sketch นั้นยังเป็นเวอร์ชัน 50 แล้วมา update เป็นเวอร์ชัน 52.2 ซึ่งจะบอกว่าหลัง update Sketch แล้วก็มีข้อแตกต่างจากเดิมพอควร เริ่มจาก Interface ของโปรแกรมดูดีขึ้น สามารถเปลี่ยนเป็น dark mode หลายอย่างใช้งานง่ายขึ้น โดยเฉพาะในส่วนของ sidebar ที่เป็นที่แสดงของ layer การแยกแต่ละ layer ดูง่ายกว่า เวอร์ชันเก่าคือตาลายมากยิ่งถ้ามีจำนวน layer เยอะๆ

Sketch 52 comes with a fresh new look and more. A totally redesigned interface makes the design process more intuitive than ever before. (web หลักเขาว่าอย่างนี้)

อีก feature ที่น่าสนใจคือและพึ่งหันมาใช้ก็คือ Workflow ด้วยค้นพบว่ามันสามารถเพิ่ม task, due date, description และก็ assign บุคคลได้ ซึ่งก็ง่ายต่อการติดตามงานว่าไปถึงส่วนไหนแล้ว

ท้ายสุด update Sketch ไปแล้ว อย่าลืม update Craft plugin กันตามด้วย ไม่งั้น Dev งงเลย code จากที่เคยแสดงกลับไม่แสดงเหมือนเดิม โดยกดไปตรงไอคอน C ด้านบนจอเหมือนเดิม แล้วคลิกตรงไอคอน Setting>Preferences>Check for updates.