ปรับเปลี่ยน Layout ด้วยฟังก์ชั่น Auto Layout ใน Figma

Graphic design ความรู้สำหรับ การออกแบบ ออกแบบเว็บ Phothoshop ตัดต่อวีดีโอ

Moderator: mindphp, ผู้ดูแลกระดาน

pataponnew
PHP Hero Member
PHP Hero Member
โพสต์: 152
ลงทะเบียนเมื่อ: 03/05/2021 10:18 am

ปรับเปลี่ยน Layout ด้วยฟังก์ชั่น Auto Layout ใน Figma

โพสต์ที่ยังไม่ได้อ่าน โดย pataponnew »

Layout คือการจัดวางต่างๆ การกำหนดโครงร่างหรือโครงสร้างของหน้าเว็บเพจ เนื่องจากว่าทุกเว็บเพจที่ดีต้องมีโครงร่างหรือโครงสร้างต่าง ๆ
Auto Layout คือหนึ่งใน feature สำคัญของ Figma ที่จะช่วยให้ Designer สามารถออกแบบ UI ได้สะดวกและรวดเร็ว พร้อมรองรับการปรับเปลี่ยน UI ให้ เปลี่ยนเเปลงตามขนาดของ Device โดยผมจะอธิบายการใช้งาน Auto Layout นะครับ
ผมจะสร้าง ตัว Object สี่เหลี่ยมขึ้นมาใน Frame ตามรูปนะครับ
Object สี่เหลี่ยม ที่จะใช้ทดสอบการใช้ Auto Layout
Object สี่เหลี่ยม ที่จะใช้ทดสอบการใช้ Auto Layout
bandicam 2021-05-27 10-15-26-414.jpg (21.08 KiB) Viewed 2378 times
ให้ลากคลุม Object ใน Frame โดยต้องมากกว่า 1 Object ขึ้นไป จะปรากฎเเถบเมนู Auto Layout ดังรูป
เรียกใช้เมนู Auto Layout
เรียกใช้เมนู Auto Layout
bandicam 2021-05-27 10-18-48-867.jpg (37.1 KiB) Viewed 2378 times
โดยผมจะลากคลุม Object ทั้งหมด(ลากครอบ Frame) เเละใช้ คลิกที่ปุ่ม + ในเมนู Auto Layout โดยผมจะเพิ่ม Object ตามรูปนะครับ
เพิ่ม Object ในเมนู Auto Layout
เพิ่ม Object ในเมนู Auto Layout
bandicam 2021-05-27 10-38-14-610.jpg (24.33 KiB) Viewed 2378 times
โดยจะมีฟังก์ชั่นให้เลือกใช้ดังนี้
ฟังก์ชั่นต่างๆของ Auto Layout
ฟังก์ชั่นต่างๆของ Auto Layout
bandicam 2021-05-27 10-40-47-149.jpg (4.81 KiB) Viewed 2378 times
1.Vertical direction คือการปรับ Auto Layout ของเราให้เป็นเเนวตั้ง
Vertical direction
Vertical direction
bandicam 2021-05-27 10-53-52-225.jpg (23.25 KiB) Viewed 2378 times
2.Horizontal direction คือการปรับ Auto Layout ของเราให้เป็นเเนวนอน
Horizontal direction
Horizontal direction
bandicam 2021-05-27 10-54-18-368.jpg (14.68 KiB) Viewed 2378 times
3.Spacing between items คือการกำหนดระยะห่างระหว่าง Object ด้วยกันเอง
Spacing between items
Spacing between items
bandicam 2021-05-27 10-56-27-846.jpg (30.72 KiB) Viewed 2378 times
4.Padding around items คือระยะห่างระหว่าง Object เเละตัว Frame
Padding around items
Padding around items
bandicam 2021-05-27 10-57-36-831.jpg (23.94 KiB) Viewed 2378 times
(จะอธิบายสำหรับคนที่ยังไม่เข้าใจนะครับ Object สีเหลี่ยมข้างในทั้งหมด 4 อันจะเสมือนถูกนับว่าเป็น Object เดียวครับ ซึ่ง Spacing between items จะเป็นการปรับระยะห่างของตัว Object สี่เหลี่ยม4อันที่อยู่ข้างใน ส่วน Padding around items จะเป็นการปรับระยะห่างระหว่าง Object สี่เหลี่ยมสี่อันที่เหมือนว่าเป็น Object อันเดียว กับตัว กรอบด้านนอกครับ)
5.Alignment and padding
ผมจะอธิบายคำสั่งนี้โดยการปรับขนาด ตัว Object สี่เหลี่ยมสีเเดง ดังรูป
Alignment and padding
Alignment and padding
bandicam 2021-05-27 11-04-04-249.jpg (45.94 KiB) Viewed 2378 times
โดยคำสั่งนี้จะเป็นการกำหนด Object ที่เหลือให้อ้างอิงกับขนาดของ Object ขนาดใหญ่ที่สุดที่ถูกเปลี่ยนครับ ดังรูป
Alignment and padding
Alignment and padding
ใน 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/
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 62