Sketch Beta 44 มีอะไรใหม่
บทความนี้จะมีรีวิวให้อ่านกันว่า Sketch Beta 44 มีอะไรใหม่ ที่แน่ๆมีบัคแน่นอน จะบ้าหราาาา 😆 (มันก็ต้องมีสิมันเป็น Beta)
ก่อนอื่นเลยเข้ามาหน้าตาก็ยังไม่มีอะไรเปลี่ยนแปลง สิ่งที่อัพเดทเข้ามาส่วนมากจะเป็นเรื่องระบบ Auto Layout ที่ Sketch เพิ่มฟังชั่นเข้ามา ซึ่งหลายๆคนที่กำลังใช้ Anima Auto Layout อยู่อาจจะสงสัยว่าทำไมพึ่งทำ เขาทำไปถึงไหนกันแล้ว สำหรับคนที่ยังไม่รู้จักว่า Plugin Anima คืออะไร สามารถเข้าไปดูรายละเอียดได้จาก ลิงค์นี้เลยครับ
https://www.animaapp.com โดยที่เจ้า Plugin Anima app เนี้ย ทีมงานพัฒนากันเร็วมาก เหมือนไม่หลับไม่นอนนั่งพัฒนา Plugin กันทั้งวันทั้งคืน😂 ซึ่งวันนี้คือวันที่ 15/05/60 Plugin ตัวนี้มีความสามารถในการทำ Auto Layout, Gen Responsive website, จำลอง Design ขึ้นเว็บ เสมือนเว็บจริง😱,ไป Mirror ในจอ Mobile ด้วยก็ยังได้ ส่วนตัวผมเคยลองแล้วครับ มันมีข้อเสียใหญ่ๆอยู่สองข้อคือ
- หากเครื่องที่เราส่งไฟล์ต่อไปให้ไม่มี Plugin แบบเราก็เน่าครับ เขาไม่สามารถแก้ไขอะไรต่อจากงานเราได้ หากเขาต้องโหลดมาใช้ เขาก็ต้องเสียเวลาเรียนรู้ Plugin ตัวนี้ ซึ่ง Anima ก็ถือว่ามี Learning curve พอประมาณครับ
- เรื่องที่สองคือ ไอ้ Plugin ตัวนี้ มันกินทรัพยากรเครื่องมากกกกกกกก ก ไก่ล้านตัว มันอาจจะมีปัญหากับเครื่องที่เก่า หรือ สเปกต่ำ ได้ครับ ถือว่าค้างไปเลยก็มี งานการไม่ได้ทำ กด 1 ที โหลด 1 นาที
เพราะฉะนั้นโดยส่วนตัวผมแล้วเนี้ย ผมจะใช้ Plugin ที่มาช่วยเหลือการทำงานย่อยๆซะเยอะ แต่กับการใช้ทำงานที่ต้องการทำบนหลาย Platform หลายไซต์หลายขนาด ผมจะเน้นใช้ของเดิมที่โปรแกรม Sketch มีให้ครับ เพราะมันจะทำให้คนที่ทำงานต่อเรา เขาทำงานต่อได้ง่ายครับ ยกตัวอย่าง Resource ที่ทำมาดี และใช้ ฟังชั่น Auto layout ของ Sketch ได้ Perfect มากคือ Apple UI Design Resources ทำมาได้ดีมากสามารถโหลดไปศึกษาได้ครับ
มาเข้าเรื่องกันดีกว่าเมื่อเราเลือกที่ Artboard สิ่งที่แปลกตาที่เปลี่ยนไปคือ Panel ด้านขวามือ จะมีให้เราเลือกขนาด Artboard ของ Platform ต่างๆ
จากเดิมที่ให้เลือกเป็น Dropdown แบ่งเป็น Platform บอกแค่ชื่อของ Device และขนาดของ Artboard ก็ปรัปใหม่เป็น เลือก Platform จากหัวข้อ Dropdown ด้านบน และมีรูป Icon ตัวอย่าง พร้อมแบ่งประเภทของ Device และมีชื่อประกอบด้วยขนาดของ Size จอ และมุมขวาบนยังมีปุ่มกดเปลี่ยน แนวตั้งแนวนอนของ Artboard อีกด้วย อันนี้สะดวกดี ตอนแรกหลายคนคงต้องมานั่งกรอกเลขสลับค่า ความสูงความกว้าง ตอนนี้ไม่ต้องแล้ว 😎
เวลากดแนวนอน แล้ว Icon เปลี่ยนเป็นแนวนอนด้วยนะ น่ารักจุงเบย 😳
เมื่อเราสร้าง Artboard เสร็จแล้ว เมื่อเรากดเลือก Artboard Panel ทางด้านขวามือจะแสดงชื่อ Artboard ที่เราเลือก เช่นตอนนี้ผมเลือก Iphone 7 ถ้าเราไปเปลี่ยนขนาด Artboard มันก็จะกลายเป็น Custom แทน ซึ่งเรากด Dropdown ข้างๆเพื่อเปลี่ยน Size ทีหลังได้ครับ และของเล่นใหม่ของเราคือ Check Box “Adjust Content on Resize” ขึ้นมา ไอ้ปุ่มนี้หน้าที่ของมันคือ ถ้าผมติ๊กใช้งาน เมื่อผมทำการขยับ Artboard Object ที่อยู่ข้างในจะขยับตามขนาด Artboard ไปด้วยครับ ตามตัวอย่างข้างล่าง
แล้วไอ้คำสั่งนี้มันดียังไง? มันดีตรงที่เราสามารถปรับขนาด Artboard เพื่อทำงานรองรับ Auto Layout ในหลายๆ Device หรือเว็บไซต์ Responsive ได้ครับตามตัวอย่างที่ผมจะโชว์ข้างล่างนี้เลย 1 คลิก ชีวิตเปลี่ยน
แต่เดี๋ยวก่อน!! การที่เราจะทำแบบนี้ได้นั้น มันจะต้องไปทำการตั้งค่า Resizing ของ Object ใน Artboard นั้นก่อนครับ มาดูกันต่อว่าหน้าตาเปลี่ยนไปยังไง และใช้งานอย่างไร
การ Resizing แบบเก่า จะขึ้นมาให้เราใช้งานก็ต่อเมื่อเราทำการ Group Object ไว้ในโฟลเดอร์ ถึงจะขึ้นมาให้ใช้งาน และต้องกด Dropdown เพื่อเลือกว่าจะใช้ฟังชั่นไหน Stretch, Pin to corner, Resize Object, Float in place โดยทั้งสี่แบบนี้จะไม่ขออธิบายนะครับ เดี๋ยวจะไปขออธิบายของใหม่กันเลยว่าทำงานอย่างไร
ในด้านของเวอร์ชั่นใหม่ Sketch 44 เมื่อเรากดเลือก Object อันใดอันหนึ่งใน Artboard เราจะเจอกับ ฟังชั่น Resizing เลยทันที เพราะตอนนี้ ตัว Artboard นั้นทำหน้าที่เสมือนโฟลเดอร์ในเวอร์ชั่นเก่า เราไม่ต้องทำการ Group ใดๆทั้งสิ้น
ต่อมาเราจะมาอธิบายหลักการทำงานของ Resizing ในเวอร์ชั่นใหม่กันว่ามันทำงานอย่างไร
- Resizing เป็นการเลือกกำหนดจุด (Pin) เหมือนเรากดปักหมุดไว้ หากเรากดเลือก Icon ├ จะกลายเป็นสีฟ้า และ Object ที่เราเลือก Pin ด้านซ้ายไว้จะไม่สามารถขยับในด้านที่เรา Pin ไว้ ให้จำง่ายๆว่า Pin = Lock ไว้ ผลที่ได้จะได้ตามตัวอย่างด้านล่าง
จะสังเกตได้ว่า มุมด้านซ้ายที่เรา Pin ไว้ จะอยู่ตรงจุดเดิม แม้ว่าเราจะขยับขนาดของ Artboard ก็ตาม
2. Fix Width จะเป็นการ Lock ความกว้างเอาไว้ไม่ให้เปลี่ยนแปลง ดูได้จากตัวอย่างข้างล่าง
เมื่อเรากด Fix Width ไว้ แม้ว่าเราจะทำการขยับขนาดของ Artboard ความกว้างของ Object ก็จะไม่เปลี่ยนแปลง
3. Fix Height ก็เช่นกันทำหน้าที่คล้ายๆ Fix Width ที่จะทำการล็อก ความสูงเอาไว้ ตามตัวอย่างข้างล่าง
แม้ว่าเราจะทำการขยับขนาดความสูงของ Artboard Object ที่เราทำงาน Fix Height เอาไว้ ก็จะไม่เปลี่ยนแปลงความสูง แต่ในตัวอย่างที่ผมนำเสนอ ผมไม่ได้ล็อก Fix Width เอาไว้ ทำให้เมื่อผมขยับขนาด Artboard แนวนอน ทำให้ Object ที่ผมไม่ได้ล็อกแนวนอนไว้ขยายตามขนาด Artboard ไปด้วย
แล้วไอ้ทั้งสองอย่างนี้มันจะทำงานอย่างไร และมีประโยชน์อย่างไร เมื่อนำไปใช้งาน
ผมได้อธิบายไปต้นบทความแล้วว่ามันจะทำให้เรา ทำ Auto layout ได้ตามขนาด Size Device ต่างๆตามที่เราต้องการ มันจะทำให้เราทำงานสะดวกมากขึ้น ตามตัวอย่างข้างล่าง
จากตัวอย่างข้างบนที่ทำ ยังมีอีกเกร็ดเล็กเกร็ดน้อยที่ผมยังไม่ได้อธิบายอีกมากในการทำ Auto layout ของโปรแกรม Sketch อันนี้ต้องไปลองเล่นกันดูนะครับ ยิ่งฝึกยิ่งมากประสบการณ์ หรือไม่แน่ผมอาจจะมาเขียนบทความสอนวิธีการตั้งค่า Resizing Layer ในครั้งต่อไปว่าจะทำอย่างไรให้มันขยายขนาดตามที่เราต้องการ
สุดท้ายนี้หวังว่าเพื่อนๆจะได้รับประโยชน์จากการอ่านบทความนี้ ขอบคุณที่ติดตามและเข้ามาอ่าน ขอบคุณครับ🙏🏻 😚❤️
