Layout คือการจัดวางต่างๆ การกำหนดโครงร่างหรือโครงสร้างของหน้าเว็บเพจ เนื่องจากว่าทุกเว็บเพจที่ดีต้องมีโครงร่างหรือโครงสร้างต่าง ๆ
Auto Layout คือหนึ่งใน feature สำคัญของ Figma ที่จะช่วยให้ Designer สามารถออกแบบ UI ได้สะดวกและรวดเร็ว พร้อมรองรับการปรับเปลี่ยน UI ให้ เปลี่ยนเเปลงตามขนาดของ Device โดยผมจะอธิบายการใช้งาน Auto Layout นะครับ
ผมจะสร้าง ตัว Object สี่เหลี่ยมขึ้นมาใน Frame ตามรูปนะครับ
ให้ลากคลุม Object ใน Frame โดยต้องมากกว่า 1 Object ขึ้นไป จะปรากฎเเถบเมนู Auto Layout ดังรูป
โดยผมจะลากคลุม Object ทั้งหมด(ลากครอบ Frame) เเละใช้ คลิกที่ปุ่ม + ในเมนู Auto Layout โดยผมจะเพิ่ม Object ตามรูปนะครับ
โดยจะมีฟังก์ชั่นให้เลือกใช้ดังนี้
1.Vertical direction คือการปรับ Auto Layout ของเราให้เป็นเเนวตั้ง
2.Horizontal direction คือการปรับ Auto Layout ของเราให้เป็นเเนวนอน
3.Spacing between items คือการกำหนดระยะห่างระหว่าง Object ด้วยกันเอง
4.Padding around items คือระยะห่างระหว่าง Object เเละตัว Frame
(จะอธิบายสำหรับคนที่ยังไม่เข้าใจนะครับ Object สีเหลี่ยมข้างในทั้งหมด 4 อันจะเสมือนถูกนับว่าเป็น Object เดียวครับ ซึ่ง Spacing between items จะเป็นการปรับระยะห่างของตัว Object สี่เหลี่ยม4อันที่อยู่ข้างใน ส่วน Padding around items จะเป็นการปรับระยะห่างระหว่าง Object สี่เหลี่ยมสี่อันที่เหมือนว่าเป็น Object อันเดียว กับตัว กรอบด้านนอกครับ)
5.Alignment and padding
ผมจะอธิบายคำสั่งนี้โดยการปรับขนาด ตัว Object สี่เหลี่ยมสีเเดง ดังรูป
โดยคำสั่งนี้จะเป็นการกำหนด Object ที่เหลือให้อ้างอิงกับขนาดของ Object ขนาดใหญ่ที่สุดที่ถูกเปลี่ยนครับ ดังรูป
ใน Figma Auto Layout นั้นมีประโยชน์ในการจัดการ Layout ของเราครับช่วยให้การจัดการ UX/UI มีประสิทธิภาพ ผมจะยกตัวอย่างการใช้งานเช่น ปรับ Layout ปุ่มหลายๆปุ่มที่ติดกันให้มีระเบียบ จัดตัวอักษรให้เป็นเเนวตั้งหรือเเนวนอน จะเห็นได้ว่าสามารถประยุกต์ใช้ได้หลากหลายมากเลยครับ
อ้างอิง
https://em-design.medium.com/figma-learn-auto-layout-7d50b5b42218
https://webdesign.tutsplus.com/tutorials/figma-auto-layouts-components-and-dynamic-content--cms-35961
https://whoisryosuke.com/blog/2020/building-responsive-figma-components/
ปรับเปลี่ยน Layout ด้วยฟังก์ชั่น Auto Layout ใน Figma
Moderator: mindphp, ผู้ดูแลกระดาน
-
- PHP Hero Member
- โพสต์: 152
- ลงทะเบียนเมื่อ: 03/05/2021 10:18 am
-
- Similar Topics
- ตอบกลับ
- แสดง
- โพสต์ล่าสุด
-
-
โพสต์ใหม่ วิธีทำ Auto Layout ของ Figma
โดย Aoranuch Phupaloy » 12/12/2020 11:06 pm » ใน Graphic design - 5 ตอบกลับ
- 1766 แสดง
-
โพสต์ล่าสุด โดย Aoranuch Phupaloy
24/12/2020 6:11 pm
-
-
- 1 ตอบกลับ
- 1323 แสดง
-
โพสต์ล่าสุด โดย pond
03/09/2016 4:18 pm
ผู้ใช้งานขณะนี้
สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 65