สุดยอดความรู้ Auto Layout ใน Figma ที่ UX/UI Designer ทุกคนต้องมีติดตัว

สวัสดีชาว UX ทุกคน! วันนี้จะพาทุกคนมารู้จักกับ auto layout ที่เป็นสุดยอด feature ที่คนใช้ Figma ต้องรู้จักและต้องใช้มันให้คล่อง เพราะมันมีประโยชน์มากกกกกก… และยังมีเนื้อหา เทคนิค ท่ายากต่างๆ ให้เรียนรู้เต็มไปหมด บทความนี้จะพาทุกคนมารู้จักกับประโยชน์ของมันก่อน แล้วมาดูสรุปจุดสำคัญ รวมทั้งเทคนิคที่ควรรู้ของ auto layout กัน แถมมีเทคนิคลับๆ ที่หลายคนอาจจะไม่รู้มาก่อนด้วยนะ รับรองว่าทุกข้อถูกคัดมาแล้วว่าได้ใช้ในการทำงานจริงครับ

งาน design ครั้งต่อไปของคุณจะต้องเปลี่ยนไป!

ประโยชน์ของ Auto Layout

1. ช่วยจัดระเบียบ layout ได้ในพริบตา จะปรับระยะห่างระหว่าง object จะย้ายตำแหน่ง หรือจะเปลี่ยนทิศทางของ object ก็ทำได้แสนง่ายถ้ามี auto layout

เราสามารถแก้ไข layout ของ card นี้ได้ชิลๆ เลย

2. ช่วยให้ object มีความ responsive มากขึ้น

Auto layout ช่วยให้เห็นว่า component ใน card จะเปลี่ยนไปอย่างไร เมื่อ card โดนยืด หด

3. ช่วยให้งาน design เรามีความละเอียดใกล้เคียงกับ code มากขึ้น เวลา developer มา inspect จะเข้าใจ logic และ behavior ของ object นั้นๆ มากขึ้น และเราเองก็จะได้เข้าใจ logic ของการสร้าง UI ในฝั่ง code ด้วย

ประโยชน์ของ auto layout อาจจะมีอีกหลายอย่าง แต่โดยรวมคือมันช่วยให้การทำ design สะดวกขึ้นสุดๆ และอีกสิ่งที่ได้จากการทำ auto layout บ่อยๆ คือมันช่วยฝึกให้ designer มีวิธีคิดใกล้เคียงกับ developer มากขึ้นด้วย

สรุปสุดยอดความรู้ Auto Layout

7 ข้อเน้นๆ กับการใช้งาน auto layout ที่จะช่วยอัปเลเวลการทำงานของเราได้ 300% !

1. Shift + A : คีย์ลัดที่หลับตาก็ต้องกดได้

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

2. Resizing: การเปลี่ยนขนาด เสริมความ Responsive

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

Resizing จะมี 3 แบบ ได้แก่ 1. Fixed 2. Hug contents 3. Fill container

1. Fixed = ขนาดของ frame จะเป็นค่าคงที่ ไม่เปลี่ยนตามขนาดของสิ่งที่อยู่ข้างใน

ขนาดรูป profile จะเท่าเดิมตลอด

2. Hug contents = ขนาดของ frame จะเปลี่ยนตามขนาดของสิ่งที่อยู่ข้างใน โดยจะนำ padding ของ frame มาคิดด้วย ได้ใช้บ่อยมากเวลาทำปุ่ม

ความกว้างของปุ่มจะเปลี่ยนตามความยาว text ที่อยู่ข้างในปุ่ม

3. Fill container = ขนาดของสิ่งที่อยู่ข้างใน frame จะยืดหรือหดตามขนาดของ frame มีประโยชน์มากกับการทำ responsive design

ความยาวของ content จะยืด หดตามความกว้างของ frame ที่เพิ่มขึ้น ลดลง

สังเกตไหมว่าในหนึ่งหน้าจอที่เอามาโชว์ มีใช้ resizing ครบทั้ง 3 แบบ ดังนั้นเราควรฝึกใช้การ resizing ให้เซียนทุกแบบเลย เพราะมันจะช่วยให้ design ของเราดูสมจริงขึ้นไปอีกขั้น และเวลาไป present จะโชว์ได้ทันทีว่า component ที่ออกแบบมาจะมีหน้าตาเป็นอย่างไร ตามขนาดของ device ที่เปลี่ยนไป

3. Distribution: ระยะห่างไม่ใช่อุปสรรค

Distribution ถือเป็นอีกความสามารถที่ควรรู้ของ auto layout ที่เรากำหนดได้ว่าจะให้สิ่งอยู่ใน frame วางห่างกันยังไงดี เพื่อนๆ สามารถปรับรูปแบบ distribution ได้ตามรูปด้านล่างเลยครับ

Distribution จะมี 2 แบบ: 1. Packed 2. Space between

1. Packed = สิ่งที่อยู่ข้างใน frame จะถูกแพ็คติดกันเป็นกลุ่ม โดยมีระยะห่างระหว่าง object เท่ากับค่าคงที่ที่เรากำหนดให้ ซึ่งจะห่างกันเท่านี้ตลอดไม่ว่า frame จะโดนยืด หดขนาดไหนก็ตาม

2. Space between = สิ่งที่อยู่ข้างใน frame จะถูกวางให้กระจายเต็มพื้นที่ของ frame โดยมีระยะห่างระหว่าง object เท่ากันตลอด และระยะห่างนี้จะเปลี่ยนโดยอัตโนมัติเมื่อ frame โดนยืด หด

เพื่อนๆ ลองดูรูปด้านล่างจะทำให้เข้าใจ distribution 2 แบบนี้แบบสุดๆ เลยล่ะครับ

Card ในรูปจะประกอบด้วยข้อมูล 2 กลุ่ม คือ กลุ่มข้อมูลส่วนตัว(ซ้าย) และกลุ่ม action (ขวา) ภายในแต่ละกลุ่มจะมี distribution แบบ packed โดยที่ content ข้างในกลุ่มจะห่างกัน 8px กับ 16px ตามรูป และระหว่างแต่ละกลุ่มข้อมูลจะมี distribution แบบ space between ที่สองกลุ่มนี้จะถูกกระจายให้เต็มความกว้างของ card โดยมีระยะห่างที่เปลี่ยนโดยอัตโนมัติเมื่อ card โดนยืด หดนั่นเองครับ

4. Absolute Position

โดยปกติแล้วสิ่งที่อยู่ใน auto layout จะเรียงกันได้แค่ในแนวตั้งกับแนวนอน แต่ในชีวิตจริง component ที่เราเห็นกัน มันไม่ได้มี layout ที่เรียบง่ายแบบนั้นตลอดน่ะสิ

Absolute position จะทำให้ object แยกจากการเรียงตัวปกติของ auto layout ได้ ทีนี้เราจะสามารถขยับ object ได้อย่างอิสระแบบในตัวอย่างด้านล่างแล้วครับ

จากเดิมที่ badge “New” เรียงต่อกับ content ในแนวนอน แต่พอกดปุ่ม “Absolute position” ทางขวาบน จะทำให้มันแยกมา เราเลยลากมันไว้ที่มุมขวาบนของ card ได้

ที่สำคัญคือเราต้องกำหนด constraint ที่ถูกต้องให้กับ object ที่ทำเป็น absolute position ด้วยนะ ต้องดูตรงนี้ให้ดีๆ ไม่งั้น auto layout ของเราจะทำงานผิดไปเลย ตัวอย่างนี้เรากำหนด constraint ให้ badge “New” เป็น top-right เลยทำให้เห็นว่าถึง content จะยาวขึ้นจนทำให้ card ยืดออก แต่ badge ก็ยังยึดอยู่มุมขวาบนตลอด

เดี๋ยวมาดูคลิปสอนทำ component อีก 2 ตัวอย่าง จะได้เข้าใจ absolute position กับการใช้ constraint มากขึ้นครับ

อยากให้ทุกคนค่อยๆ ดูคลิปหลายๆ รอบ และฝึกทำบ่อยๆ จนเข้าใจการทำงานของ absolute position โดยหัวใจสำคัญของมันมีอยู่ 2 ข้อ

1. เลือก layer ที่จะทำเป็น absolute position ให้ถูก
2. เข้าใจชนิดของ constraint และกำหนดมันให้ถูก

5. ทำ Frame หลักให้เป็น Auto Layout

ทำ auto layout ให้ component กันจนสนุกมือแล้วก็อย่าลืมมาทำให้ frame หลักกันด้วยนะ content ใน frame หลักหรือในหน้าจอเรามักจะถูกปรับ ถูกเอาเข้า เอาออกอยู่บ่อยๆ ทำให้ปกติเราต้องขยับหน้าจอตาม content แทบจะตลอด แต่ด้วยประโยชน์ของ auto layout ที่ช่วยจัดระเบียบ layout ได้ เราเลยไม่ต้องเหนื่อยแล้ว

ตอนที่เราเพิ่มหรือลด content ข้างใน หรือมีการอัปเดต component แล้วทำให้ขนาด component เปลี่ยนไป frame หลักที่ทำเป็น auto layout แล้ว จะขยับตาม content ข้างในเองเลย เราไม่ต้องเสียเวลามานั่งปรับตาม

BONUS — เทคนิคลับสุดยอด

ต่อไปจะเป็นเทคนิคลับที่ advanced กว่าข้อก่อนๆ เอาไว้เพิ่มความ flexible ให้ component แบบที่หลายคนคาดไม่ถึง

6. Slider ปรับได้ จากการใช้ Zero-frame

ปรับค่าบน Slider ได้เลยจากระยะห่างใน auto layout

น้อวววว สุดยอดไปเลยใช่ไหมครับ การที่เราปรับ slider จากระยะห่างใน auto layout ได้เลย ทำให้ไม่ต้องคอย detach component ของ slider ตอนอยากใช้มันโชว์เวลาโดนเลื่อนไปที่หลายๆ ค่า

มาดูวิธีทำกันดีกว่าครับ เริ่มจากมาดู layer ที่ประกอบกันเป็นเจ้า slider กันก่อน

ความลับที่ทำให้ slider ปรับได้ อยู่ตรง layer “fill ]׀[” ที่เป็น auto layout ที่ข้างในมี layer ของ zero-frame อยู่ ซึ่งก็คือ layer “left” กับ layer “handle”

Zero-frame คือ frame ที่มีความกว้าง และความสูง = 0 px

วิธีสร้าง zero-frame ก็ไม่ยากเลยครับ

1. สร้าง frame ขึ้นมาปกติ
2. พิมพ์ 0.001 ตรงช่องความกว้าง กับความสูง ก็จะได้ frame ขนาด 0 px ครับ

พอทั้งสอง layer เป็น zero-frame เราเลยมอง layer เหมือนเป็นจุดๆ หนึ่งได้ เพราะมันไม่มีความกว้าง และความสูง ดังนั้น layer “left” เลยเหมือนจุดซ้ายสุดของ slider และ layer “handle” ก็เหมือนจุดศูนย์กลางของ handle กลมๆ บน slider ทำให้ระยะระหว่าง “left” กับ “handle” คือความยาวแท่ง Fill สีม่วงของ slider ที่ยืด หดได้ด้วยการปรับระยะห่างใน auto layout ครับ

7. Min-width Button

เอ๊ะ ตอนแรกเหมือนความกว้างปุ่มมันจะ fixed ไว้ แต่พอข้อความในปุ่มยาวเลยจุดๆ หนึ่งแล้วทำไมปุ่มมันถึงยืดตามได้ล่ะ

ปุ่มทั่วไปที่ทำเป็น hug contents จะปรับขนาดตามข้อความข้างใน ถ้าข้อความในปุ่มมันสั้น ปุ่มก็จะสั้นตามไปด้วย แต่ๆๆ…ถ้าเราไม่อยากให้ปุ่มมันสั้นลงไปกว่าค่าๆ หนึ่ง อยากให้ปุ่มมีความกว้างขั้นต่ำ (min-width) แบบในตัวอย่างล่ะ ก็ถึงเวลาของเทคนิคข้อนี้แล้วครับ

ปุ่ม min-width VS. ปุ่มทั่วไป

ทริคคือเราจะสร้าง frame พิเศษขึ้นมา ซึ่งจะมีความกว้าง = min-width ที่เราต้องการและความสูง = 0 px แล้วยัดเจ้า frame นี้ใส่ใน auto layout ของปุ่มทั่วๆ ไป มาลองดูคลิปกัน

วิธีทำ min-width button

ในตัวอย่างนี้ผมตั้งความกว้างของ layer “min-width” = 96px แสดงว่าปุ่มนี้จะมี min-width = 96px แล้วถ้าข้อความยาวกว่า 96px ปุ่มก็ยืดตามความยาวข้อความได้เองเลยครับ เหมือนใส่เงื่อนไขให้ component ได้เลยใช่ไหมล่ะ

หวังว่าชาว UX/UI designer จะสามารถนำความรู้ทั้ง 7 ข้อนี้ไปปรับใช้กับตัวเอง
ให้ได้งานที่เจ๋งขึ้น และทำงานได้สะดวกรวดเร็วขึ้น แล้วก็อย่าลืมฝึกด้วยตัวเองกันเยอะๆ นะ ลองสร้างโจทย์ขึ้นมาเอง เลือก component ในแอปฯมา แล้วฝึกทำ auto layout จาก component นั้นเลยครับ ขอให้สนุกนะครับ 😎

เพื่อนๆ สามารถอ่านวิธีใช้งาน auto layout อื่นๆ เพิ่มเติมได้จากเว็บไซต์ของ Figma โดยตรงเลยครับ

Explore auto layout properties