จาก mouse สู่ code ลองใช้ react-sketchapp ออกแบบบน Sketch

Korakot Thanoodet
Jul 29, 2017 · 2 min read

ได้ลองอ่าน Painting with Code จาก Airbnb แล้วรู้สึกว่าสนใจมาก น่าสนุกดี และน่าจะช่วยทำอะไรหลายๆอย่าง ที่เคยอยากได้บน Sketch แต่ยังหาวิธีการทำเพื่อเอาไปใช้ต่อดีๆไม่เจอ ลองนึกดูก็จะมี ..

บางครั้งอยากได้เมนูที่เรียงกัน มีระยะห่างระหว่างเมนูเท่าๆกัน ชื่อเมนูสั้นยาวต่างกัน พยายามลองทำใน symbol เพื่อเอาไป overrides ใช้ในส่วนอื่นๆ ได้ด้วย เท่าที่ลองยังหาวิธีทำไม่ได้ จริงๆ เหมือนจะมีเครื่องมือพวก Auto-Layout แต่ยังไม่เคยลองใช้ดูสักที

เมนูที่อยากได้

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

ทั้งสองกล่องมี Spacing 20px ทุกด้าน ถ้ามีการแก้ไขคำก็ต้องขยับกันอยู่หลายที

ถึงเวลาที่จะมาทดสอบสิ่งที่คิดกับความเป็นจริงว่าจะเป็นยังไง แตกต่างกันมากน้อยแค่ไหน ของขาดไม่ได้ก็คือ Sketch และ Editor สักตัว(ตอนนี้ใช้ Visual Studio Code) และก็ Terminal ที่มีติดเครื่องอยู่แล้ว

ก่อนอื่นก็ต้องเริ่มจากลง react-sketchapp ก่อน (วิธีติดตั้งและใช้งาน) ส่วนผมให้พี่ๆ Engineer ช่วยครับ (ถ้าทำเองน่าจะยาว ฮ่าๆ) พร้อมกับนั่งฟังพื้นฐานของ React ว่ามีอะไรบ้าง แต่ละส่วนนี้คืออะไรทำอะไร และหลังจากลงเสร็จก็ลองเขียนด้วยกันอยู่สักพักใหญ่ๆ เข้าใจบ้าง มึนบ้าง ผสมปนเปกันไป ส่วนตัวพอมีความรู้พื้นฐานของ html กับ css อยู่บ้าง ช่วยได้นิดหน่อย

หลังจากผ่านการเรียนรู้ tag ที่ไม่เคยรู้จักมาก่อนไม่ว่าจะเป็น <View> , <Text> และการเขียน Style ที่คล้ายๆกับ css ก็ลองลุยดูเลย ผมเริ่มต้นจากไฟล์นี้

จากนั้นก็รัน npm run render (ในรูปใช้ yarn run render) พอรันออกมาแล้วจะได้ผลลัพท์เป็น Artboard ที่พร้อมให้ลุยแล้ว!

ผลลัพท์หลังจาก render ออกมาบน Sketch แล้ว

อันนี้เป็น Screen record ตอนที่ลองทำ Element ที่เปลี่ยนแปลงตามเนื้อหาดู แอบพิมพ์ผิดไปเยอะเหมือนกัน แต่พอทำเสร็จแล้วความรู้สึกที่ต่างคือ ความพร้อมสำหรับการแก้เนื้อหา ที่ทำได้ง่ายมากๆ

จริงๆแล้วเราสามารถใส่ชื่อให้กับ Tag ต่างๆได้ด้วย โดยจะใช้เป็น <Text name="title"> เป็นการตั้งชื่อของที่ถูก Render ออกมา แต่ที่ลองทำไม่ได้ใส่เข้าไป ถ้าใส่ไปก็จะมาแสดงผลใน Sketch ด้วย

Layer ต่างๆที่ถูก Render ออกมา

สิ่งที่คิด

Jitta Engineering

Our moment, our solution and our works

Korakot Thanoodet

Written by

UI/UX Designer at Jitta.

Jitta Engineering

Our moment, our solution and our works

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