จาก mouse สู่ code ลองใช้ react-sketchapp ออกแบบบน Sketch
ได้ลองอ่าน Painting with Code จาก Airbnb แล้วรู้สึกว่าสนใจมาก น่าสนุกดี และน่าจะช่วยทำอะไรหลายๆอย่าง ที่เคยอยากได้บน Sketch แต่ยังหาวิธีการทำเพื่อเอาไปใช้ต่อดีๆไม่เจอ ลองนึกดูก็จะมี ..
บางครั้งอยากได้เมนูที่เรียงกัน มีระยะห่างระหว่างเมนูเท่าๆกัน ชื่อเมนูสั้นยาวต่างกัน พยายามลองทำใน symbol เพื่อเอาไป overrides ใช้ในส่วนอื่นๆ ได้ด้วย เท่าที่ลองยังหาวิธีทำไม่ได้ จริงๆ เหมือนจะมีเครื่องมือพวก Auto-Layout แต่ยังไม่เคยลองใช้ดูสักที
หรืออีกแบบคือปรับขนาดตามของที่เปลี่ยนไป บางครั้งเวลาทำงานกับเนื้อหาที่ยังไม่ค่อยนิ่ง พอมีการแก้เนื้อหาให้สั้นลงหรือยาวมากขึ้น ถ้าไปกระทบกับ design ที่วางไว้ ก็ต้องปรับขนาดของชิ้นนั้นๆ และก็ต้องเลื่อนชิ้นอื่นๆที่กระทบอีกด้วย
ถึงเวลาที่จะมาทดสอบสิ่งที่คิดกับความเป็นจริงว่าจะเป็นยังไง แตกต่างกันมากน้อยแค่ไหน ของขาดไม่ได้ก็คือ Sketch และ Editor สักตัว(ตอนนี้ใช้ Visual Studio Code) และก็ Terminal ที่มีติดเครื่องอยู่แล้ว
ก่อนอื่นก็ต้องเริ่มจากลง react-sketchapp ก่อน (วิธีติดตั้งและใช้งาน) ส่วนผมให้พี่ๆ Engineer ช่วยครับ (ถ้าทำเองน่าจะยาว ฮ่าๆ) พร้อมกับนั่งฟังพื้นฐานของ React ว่ามีอะไรบ้าง แต่ละส่วนนี้คืออะไรทำอะไร และหลังจากลงเสร็จก็ลองเขียนด้วยกันอยู่สักพักใหญ่ๆ เข้าใจบ้าง มึนบ้าง ผสมปนเปกันไป ส่วนตัวพอมีความรู้พื้นฐานของ html กับ css อยู่บ้าง ช่วยได้นิดหน่อย
หลังจากผ่านการเรียนรู้ tag ที่ไม่เคยรู้จักมาก่อนไม่ว่าจะเป็น <View> , <Text> และการเขียน Style ที่คล้ายๆกับ css ก็ลองลุยดูเลย ผมเริ่มต้นจากไฟล์นี้
จากนั้นก็รัน npm run render (ในรูปใช้ yarn run render) พอรันออกมาแล้วจะได้ผลลัพท์เป็น Artboard ที่พร้อมให้ลุยแล้ว!
อันนี้เป็น Screen record ตอนที่ลองทำ Element ที่เปลี่ยนแปลงตามเนื้อหาดู แอบพิมพ์ผิดไปเยอะเหมือนกัน แต่พอทำเสร็จแล้วความรู้สึกที่ต่างคือ ความพร้อมสำหรับการแก้เนื้อหา ที่ทำได้ง่ายมากๆ
จริงๆแล้วเราสามารถใส่ชื่อให้กับ Tag ต่างๆได้ด้วย โดยจะใช้เป็น <Text name="title"> เป็นการตั้งชื่อของที่ถูก Render ออกมา แต่ที่ลองทำไม่ได้ใส่เข้าไป ถ้าใส่ไปก็จะมาแสดงผลใน Sketch ด้วย
สิ่งที่คิด
- ใช้เวลามากกว่าทำจาก Sketch อย่างเดียว ถ้าลองทำบ่อยๆ น่าจะช่วยลดเวลาลงได้อีก
- ต้องปรับเปลี่ยนกระบวนการคิดการวางของ เพิ่มความสำคัญของการ Grouping มากขึ้น รวมถึงการตั้งชื่อ Group ต่างๆ
- ยังไม่รู้ว่าถ้าเอามาใช้ในการทำงานแบบเต็มที่ จะมีข้อจำกัดมากน้อยแค่ไหน จะอึดอัดกว่าทำใน Sketch รึเปล่า แต่ก็เป็นอีกเรื่องที่น่าสนใจมากๆ
