จับทุกอย่างเข้า Auto layout ซะ !
หนึ่งใน Feature ของ Figma ที่ออกมาแล้วเรารู้สึกว่าอยากจะให้รางวัลโนเบลสาขาสันติภาพกับคนที่คิด Feature นี้ คือ Auto layout ทุกครั้งที่มีคนมาปรึกษาเราเรื่องการทำ UI เรามักจะได้ยินคำพูดประมาณว่า “ทำไมเวลาเราขยับของในหน้า UI ถึงดูเร็วและง่ายไม่เหมือนกับที่เค้าทำ” หลังจากคุยกันเราพบว่า หลาย ๆ คนไม่ค่อยได้ใช้สิ่งที่เรียกว่า Auto layout เท่าไหร่ ในขณะเดียวกันเวลามีคนมาถามเรื่องการใช้ Figma คำแนะนำแรกของเรามักจะเป็น “จับทุกอย่างเข้า Auto layout ซะ!” วันนี้เราเลยอยากจะมาแชร์การใช้ Auto layout ของเราเผื่อจะเป็นแนวทางในการออกแบบให้เร็วยิ่งขึ้น
บทความนี้มีใส่ภาพ Gif เยอะ อาจจะใช้เวลาโหลดภาพประกอบนานนิดนึงค่า ต้องขอโทษด้วยนะคะ
ปัญหาที่พบในการ Group
ในช่วงแรก ๆ ที่เราใช้ Figma เรามักจะ Group ของที่เกี่ยวข้องมาอยู่ด้วยกัน การ Group ที่ว่าคือการกด Command + G (CTRL+G ใน Window)ในตอนนั้นเราก็คิดว่ามันง่ายดีนะ แต่ปัญหาที่เราพบมักจะเป็น
- ขยับของทั้งก้อนแล้วสัดส่วนผิดเพี้ยน
2. ขยับของแต่ละที ต้องคลิกแล้วคลิกอีก กว่าจะไปถึง Layer ที่ต้องการ
3. ต้องคอยมากังวลและเช็ก Space ระหว่าง Layer รวมถึงการวัดขอบซ้ายขวา (Padding) ให้เท่ากัน
4. เพิ่ม/แก้ไข Text ใน Groupแล้วกระทบ Element อื่นที่วางใกล้กัน
ปัญหาเหล่านี้เราเจอมาตลอดในช่วงแรกที่ใช้ Figma เพราะเราก็ Group ของแบบนี้ และรู้สึก Pain มาก ๆ ยิ่งเวลาที่เป็นของที่ซ้ำ ๆ กันหรือต้องทำหลาย ๆ ครั้ง มันทำให้เราเหนื่อยและใช้เวลาในการออกแบบแต่ละหน้าค่อนข้างนาน จนกระทั่งวันนึงที่เราได้คุยกับ Senior UX Designer ที่เราทำงานด้วย และเค้าได้เบิกเนตรเราด้วยประโยคที่ว่า “ทำไมพี่ไม่เอาทุกอย่างเข้า Auto layout ไปเลยละ” เราเลยลองหัดทำตั้งแต่นั้นเป็นต้นมา และพบว่า “มันประหยัดเวลาในการดีไซน์ได้เยอะเลย ชั้นมัวแต่ไปทำอะไรอยู่!!!”
Auto layout คืออะไร
Auto layout is a property you can add to frames and components. It lets you create designs that grow to fill or shrink to fit, and reflow as their contents change. This is great when you need to add new layers, accommodate longer text strings, or maintain alignment as your designs evolve. — Figma
นิยามสำหรับเรา Auto layout คือการจับของที่เราต้องการ Group รวมกันโดยที่เราสามารถกำหนดระยะห่างได้เองและเมื่อมีการปรับขนาดของพื้นที่ของ Frame ของที่อยู่ข้างในก็จะรักษาความห่างอย่างเท่า ๆ กันตามการตั้งค่าของเรา เช่นถ้าเรามีของ 3 ชิ้นวางเรียงกันอยู่และในตอนแรกมันมีระยะห่างของแต่ละอันไม่เท่ากันซึ่ง…
….ถ้าเรา Group แบบปกติ มันจะ Group แบบรักษาระยะห่างเดิมที่ของแต่ละชิ้นมี ซึ่งเวลาที่เราจะขยับของหรือสลับตำแหน่งใน Group เราจะต้อง “Manual มือ” ก็คือขยับเอง คิดเองว่าจะห่างเท่าไหร่ ซึ่งอาจจะทำให้เราต้องใช้เวลาในการจัดไปจัดมาเพื่อให้ระยะเท่ากัน
….แต่ถ้าเราใช้ Auto layout มันจะเป็นการ Group แบบคำนวณระยะห่างที่เท่ากัน ซึ่งข้อดีของการทำ Auto layout คือเราสามารถสลับของแต่ละชิ้นได้โดยที่ระยะห่างของแต่ละชิ้นยังคงถูกคำนวณให้เท่ากันเหมือนเดิม เพราะฉะนั้นไม่ว่าของจะสลับกันแค่ไหน ระยะห่างจะเท่าเดิมเสมอ
กด Shift + A เพื่อทำให้ของที่เราต้องการ Group เป็น Auto layout
ควรใช้ Auto layout ยังไงดี
สำหรับเรา เราจะเอาทุกอย่างเข้า Auto layout ทั้งหมด เพราะมันเป็นการจัดระเบียบของที่เรามีแยกประเภทตาม Frame ซึ่งเราต้องวางแผนเองว่าอยากให้ของหรือข้อมูลชิ้นไหนอยู่ด้วยกัน คำว่าทุกอย่างก็คือทุกอย่างจริง ๆ เช่นถ้าเราต้องทำลิสต์ของหน้าสถานะส่งของ ตัวรายการต่าง ๆ ในหน้า UI เราก็จับเข้า Auto layout ทั้งหมด
ข้อดีของการทำแบบนี้คือ เมื่อเราเอาไปเข้าหน้า UI จริง มันจะทำเหมือนที่ชื่อมันบอกก็คือ “Auto layout” ไปกับพื้นที่ของ Artboard ของเรา ทำให้เราไม่ต้องมาขยับอะไรเองอีก ถ้าเราเซ็ตค่าทุกอย่างตอนทำ Auto layout ไม่ต้องกังวลเรื่องสัดส่วนบิดเบี้ยว ทำงานได้อย่างสบายใจ
เราลองมาดูเทียบกัน
ถ้าเราสร้างปุ่มแบบ Group VS Auto layout
ถ้าเราจะสลับตำแหน่ง Icon กับ Label text แล้วระยะห่างระหว่างกันต้องเท่าเดิมแบบ Group VS Auto layout
ถ้าเราจะเปลี่ยนชื่อปุ่มแบบ Group VS Auto layout
ถ้าเรามี Text และ Button อยู่ด้วยกันแล้วเราอยากให้ปุ่มไปชิดด้านขวา โดยที่ระยะ Padding เท่ากับฝั่งซ้าย และขนาดของปุ่มต้องเท่าเดิม (Padding = 16)
ถ้าเรามี Text และ Button อยู่ด้วยกันแล้วเราอยากให้ปุ่มมันกว้างเต็ม Area โดยที่ระยะ Padding ซ้ายขวาเท่ากัน (Padding = 16)
แล้วถ้าเรายืดหดทั้งหมดแล้วอยากให้ปุ่มยืดหดตามโดยที่ไม่เสียระยะห่างจาก Text ฝั่งซ้าย (Space between items = 16)
ลองทำเป็นแบบ Product card ทั้งแบบ Group กับ Auto layout
ลองเพิ่ม Text เข้าไปใน Product Card แบบ Group กับ Auto layout
ถ้าเอา Product card ที่ทำ Auto layout มาใส่ใน Mobile frame
นี่คือการทำตารางแบบที่ใช้ Auto layout
**ขอบคุณคุณหลงสำหรับอีก 1 ตัวอย่างนะคะ
ถ้าเราใช้ Auto layout เป็นและคล่อง จะช่วยลดเวลาออกแบบ การกลับมาแก้ และการอัปเดตดีไซน์ แล้วเราก็ไม่ต้องกังวลว่าระยะและขอบต่าง ๆ จะเท่ากันมั้ยเพราะมันช่วยคำนวณตามที่เรากำหนดไว้แล้ว
Auto layout ทำอะไรได้บ้าง
- Direction: กำหนดการเรียงของใน Frame ว่าจะเรียงแนวนอนหรือแนวตั้ง
- Space between items: กำหนดระยะห่างระหว่างของใน Frame
- Padding: อันแรกจะเป็นขอบซ้ายขวา อันที่สองเป็นขอบบนล่าง โดยที่จะกำหนดซ้ายขวาในตัวเลขที่เท่ากัน ซึ่งเราสามารถ Custom ได้โดยใช้ , (comma) เพื่อกำหนดให้ขอบมี Padding ที่ไม่เท่ากันได้ หรือเลือกไอคอนอันขวาสุดที่จะช่วยกำหนดขอบบนล่างซ้ายขวาด้วยตัวเอง
- Alignment: กำหนดว่าของใน Frame จะเรียงชิดแบบไหน (ชิดบน, ชิดกลาง, ชิดล่าง, ชิดซ้าย, ชิดขวา)
- Space mode: จะมีตัวเลือกอยู่ 2 แบบคือ
A) Packed: เหมาะสำหรับการมัดรวมของใน Frame ตามระยะห่างที่เราตั้งไว้ซึ่งจะสอดคล้องกับ Alignment เช่นถ้าของใน Frame เรากำหนดให้มัน Align left เวลาที่เรายืดกล่อง Frame ไปทางด้านขวา กล่อง Frame จะยืดออกไป แต่ของข้างในจะถูก Packed ตามระยะห่างที่เรากำหนด
B) Space between: มันจะคำนวนระยะห่างอัตโนมัติ (Auto spacing) ระหว่าง Item ใน Frame เช่น ถ้าเรามีของ 2 ชิ้นใน Auto layout นี้ ของทางซ้ายจะถูกยึดไว้ขอบซ้าย และของทางขวาจะถูกยึดกับขอบขวา และ Space between items จะเป็นแบบ Auto เพราะฉะนั้นเมื่อเรายืดหดกล่อง Frame ของข้างในจะถูกยึดตามตำแหน่งแต่ Space between items จะไม่ได้ขึ้นเป็นตัวเลขแต่ Auto
6. Strokes: มีให้เลือกระหว่าง Excluded from layout และ Included in layout
7. Canvas stacking: เลือกได้ระหว่าง First on top และ Last on top
8. Align text baseline: ซึ่งเราจะเลือกให้มัน Align หรือไม่ก็ได้
จริง ๆ มันยังมีส่วนอื่นอีก เช่น Absolute position หรือการกำหนดว่าของข้างในของเราจะเป็นแบบ Fixed width, Filled containter หรือ Hug contents แต่เราคิดว่าสามารถหาอ่านวิธีการใช้หรือศึกษาการตั้งค่าเพิ่มเติมได้ตาม Blog ต่าง ๆ หรือ Youtube ของ Figma ที่จะมีการสอนใช้ Auto layout อยู่แล้ว
อ่านจาก Blog นี้เพิ่มเติมได้เลย: https://uxplanet.org/auto-layout-in-figma-everything-you-need-to-know-9acb11e1031c
เราหวังว่าบทความนี้จะมีประโยชน์และช่วยทุกคนให้เข้าใจ Auto layout มากขึ้นนะคะ ถ้าใครมีข้อสงสัยหรืออยากพูดคุยเพิ่มเติม สามารถคอมเม้นต์หรือตามไปที่ Twitter @meawzilaz