จับทุกอย่างเข้า 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)ในตอนนั้นเราก็คิดว่ามันง่ายดีนะ แต่ปัญหาที่เราพบมักจะเป็น

1. ขยับของทั้งก้อนแล้วสัดส่วนผิดเพี้ยน

2. ขยับของแต่ละที ต้องคลิกแล้วคลิกอีก กว่าจะไปถึง Layer ที่ต้องการ

ถ้าต้องการเปลี่ยนตำแหน่งของแต่ละ Layer ต้องคลิกแล้วคลิกอีกกว่าจะขยับไปในตำแหน่งที่ต้องการ

3. ต้องคอยมากังวลและเช็ก Space ระหว่าง Layer รวมถึงการวัดขอบซ้ายขวา (Padding) ให้เท่ากัน

ต้องขยับหลาย ๆ ครั้ง เพื่อให้ 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 ทั้งหมด

สังเกต Layers ด้านซ้ายมือจะเห็นว่าเราเอาเข้า Frame ของ Auto layout ทั้งหมด ไม่ใช้การ Group แบบปกติ เวลายืดหดกล่อง ข้อมูลข้างในก็ตามมาทั้งหมด โดยที่สัดส่วนของด้านในไม่ผิดเพี้ยนตาม

ข้อดีของการทำแบบนี้คือ เมื่อเราเอาไปเข้าหน้า UI จริง มันจะทำเหมือนที่ชื่อมันบอกก็คือ “Auto layout” ไปกับพื้นที่ของ Artboard ของเรา ทำให้เราไม่ต้องมาขยับอะไรเองอีก ถ้าเราเซ็ตค่าทุกอย่างตอนทำ Auto layout ไม่ต้องกังวลเรื่องสัดส่วนบิดเบี้ยว ทำงานได้อย่างสบายใจ

เราลองมาดูเทียบกัน

ถ้าเราสร้างปุ่มแบบ Group VS Auto layout

ปุ่มแบบ Group เราต้องสร้างสี่เหลี่ยมเพิ่มเข้ามา แต่แบบ Auto layout เราสามารถใส่สีเข้าไปใน Frame ได้เลย

ถ้าเราจะสลับตำแหน่ง Icon กับ Label text แล้วระยะห่างระหว่างกันต้องเท่าเดิมแบบ Group VS Auto layout

การสลับของโดยที่ระยะห่างเท่าเดิมถ้าเป็นแบบ Group มันจะกะระยะได้ยาก แต่ถ้าเป็น Auto layout สามารถสลับได้โดยไม่ต้องกังวลว่าระยะจะเปลี่ยน เพราะมันคำนวณให้อัตโนมัติ สามารถเลือกเลเยอร์นั้นแล้วใช้ลูกศรขยับซ้ายขวาได้เลย

ถ้าเราจะเปลี่ยนชื่อปุ่มแบบ Group VS Auto layout

แบบ Group เราต้องมาเสียเวลาในการขยับกล่องอีก แต่ถ้าเป็น Auto layout เมื่อเราเซ็ตให้ Frame มัน Hug contents จะเห็นว่า Frame มันยืดตาม Content โดยอัตโนมัติ

ถ้าเรามี Text และ Button อยู่ด้วยกันแล้วเราอยากให้ปุ่มไปชิดด้านขวา โดยที่ระยะ Padding เท่ากับฝั่งซ้าย และขนาดของปุ่มต้องเท่าเดิม (Padding = 16)

ถ้าเรามี Text และ Button อยู่ด้วยกันแล้วเราอยากให้ปุ่มมันกว้างเต็ม Area โดยที่ระยะ Padding ซ้ายขวาเท่ากัน (Padding = 16)

แล้วถ้าเรายืดหดทั้งหมดแล้วอยากให้ปุ่มยืดหดตามโดยที่ไม่เสียระยะห่างจาก Text ฝั่งซ้าย (Space between items = 16)

ลองทำเป็นแบบ Product card ทั้งแบบ Group กับ Auto layout

เราลองสลับตำแหน่งของข้างใน และลองขยาย Frame ให้ดูว่าความต่างของการทำแบบ Group และการทำแบบ Auto layout เป็นยังไง

ลองเพิ่ม Text เข้าไปใน Product Card แบบ Group กับ Auto layout

จะเห็นว่า Product card แบบ Group ส่วนที่เป็น Text มันซ้อนกับ Text ฝั่งขวาที่เป็นราคา แต่ถ้าเป็น Auto layout มันจะรัน Text ลงมาและไม่กระทบส่วนที่เป็นราคา

ถ้าเอา Product card ที่ทำ Auto layout มาใส่ใน Mobile frame

Product card ของเราทำเป็น Auto layout ไว้แล้ว เมื่อเอาเข้ามาใส่ในหน้า UI นอกจากเราจะไม่ต้องมา Manual มือแล้ว เราสามารขยับ Product card ได้ด้วยการกดลูกศรขึ้นลง ง่ายมากกกกก

นี่คือการทำตารางแบบที่ใช้ Auto layout

**ขอบคุณคุณหลงสำหรับอีก 1 ตัวอย่างนะคะ

เมื่อตั้งค่า Auto layout ได้ถูกต้อง มันจะ Flexible มากในการย่อขยายตาราง

ถ้าเราใช้ Auto layout เป็นและคล่อง จะช่วยลดเวลาออกแบบ การกลับมาแก้ และการอัปเดตดีไซน์ แล้วเราก็ไม่ต้องกังวลว่าระยะและขอบต่าง ๆ จะเท่ากันมั้ยเพราะมันช่วยคำนวณตามที่เรากำหนดไว้แล้ว

Auto layout ทำอะไรได้บ้าง

1. Direction: กำหนดการเรียงของใน Frame ว่าจะเรียงแนวนอนหรือแนวตั้ง
2. Space between items: กำหนดระยะห่างระหว่างของใน Frame
3. Padding: อันแรกจะเป็นขอบซ้ายขวา อันที่สองเป็นขอบบนล่าง โดยที่จะกำหนดซ้ายขวาในตัวเลขที่เท่ากัน ซึ่งเราสามารถ Custom ได้โดยใช้ , (comma) เพื่อกำหนดให้ขอบมี Padding ที่ไม่เท่ากันได้ หรือเลือกไอคอนอันขวาสุดที่จะช่วยกำหนดขอบบนล่างซ้ายขวาด้วยตัวเอง
4. Alignment: กำหนดว่าของใน Frame จะเรียงชิดแบบไหน (ชิดบน, ชิดกลาง, ชิดล่าง, ชิดซ้าย, ชิดขวา)
5. Space mode: จะมีตัวเลือกอยู่ 2 แบบคือ

เปรียบเทียบระหว่างแบบ Packed และ Space between

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