วิธีทำ Auto Layout ของ Figma

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

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

Aoranuch Phupaloy
PHP Hero Member
PHP Hero Member
โพสต์: 166
ลงทะเบียนเมื่อ: 07/12/2020 9:33 am

วิธีทำ Auto Layout ของ Figma

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

วิธีทำ Auto Layout ของ Figma มีดังนี้
Auto1.png
Auto1.png (68.97 KiB) Viewed 1764 times
- ทำการเลือกหน้าทั้งหมด หรือเลือกหน้าที่เราต้องการก็ได้
Auto2.png
- เมื่อทำการเลือกแล้ว แถบข้างซ้ายมือจะขึ้นคำว่า Auto Layout จะเป็นแถบเมนูที่เพิ่มขึ้นมาใหม่
แต่ถ้าเราเลือกแค่ตัวเดียวมันจะไม่มีเมนูนี้ขึ้นมาให้
Auto3.png
Auto3.png (45.42 KiB) Viewed 1764 times
- คลิกที่ปุ่มบวกของ Auto Layout

เลือกแบบ Auto Layout จะมี 2 แบบ
Auto4.png
Auto4.png (40.01 KiB) Viewed 1764 times
- แนวนอน
- แนวตั้ง
Hulg contents
Auto5.png
Auto5.png (41.28 KiB) Viewed 1764 times
มี 4 แบบ
Auto6.png
Auto6.png (6.29 KiB) Viewed 1762 times
- Fixed Width
- Hug contents
Auto8.png
Auto8.png (6.24 KiB) Viewed 1762 times
- Fixed height
- Hug contents

ในการใช้ Auto Layout จะช่วยปรับในเรื่องของLayout ให้มีขนาดไม่ล้นกรอบ เช่น สามารถดึงตรงบางปุ่มให้สูงกว่าหรือต่ำกว่าอีกปุ่มได้โดยไม่เกินขนาดนั่นเอง

แปลง Figma เป็น HTML CSS

https://youtu.be/WBgyZ0pEJxA
แก้ไขล่าสุดโดย Aoranuch Phupaloy เมื่อ 22/12/2020 10:15 am, แก้ไขไปแล้ว 1 ครั้ง.
Duanghathai Termtem
PHP Super Hero Member
PHP Super Hero Member
โพสต์: 849
ลงทะเบียนเมื่อ: 30/11/2020 10:24 am

Re: วิธีทำ Auto Layout ของ Figma

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

แก้ไขรูปภาพ ขนาดไม่เกิน 800
ขาดส่วนสรุปและแนบลิ้งค์ในส่วนสรุป
Aoranuch Phupaloy
PHP Hero Member
PHP Hero Member
โพสต์: 166
ลงทะเบียนเมื่อ: 07/12/2020 9:33 am

Re: วิธีทำ Auto Layout ของ Figma

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

Auto Layout เป็นการจัดวางหน้าจอในโปรแกรมของเราแบบคำนวนตำแหน่งอัตโนมัติ โดยจะอ้างอิงจากขอบเขต หรือ Constraint ที่เรากำหนดไว้ Auto Layout จะช่วยรองรับการเปลี่ยนแปลงต่างๆในหน้าจอของเราไม่ว่าจะเป็นการที่จะทำแอปให้รองรับทั้งแนวตั้งและแนวนอน หรือการทำให้รองรับหน้าจอต้างๆและวิธีทำ Auto Layout ของ Figma มีดังนี้
สร้างหน้าวัตถุ
สร้างหน้าวัตถุ
Auto1.png (68.97 KiB) Viewed 1717 times
- ทำการเลือกหน้าทั้งหมด หรือเลือกหน้าที่เราต้องการก็ได้
รูปแบบของ Hulg contents
รูปแบบของ Hulg contents
Auto2.png (33.08 KiB) Viewed 1717 times
- เมื่อทำการเลือกแล้ว แถบข้างซ้ายมือจะขึ้นคำว่า Auto Layout จะเป็นแถบเมนูที่เพิ่มขึ้นมาใหม่
แต่ถ้าเราเลือกแค่ตัวเดียวมันจะไม่มีเมนูนี้ขึ้นมาให้
กำหนดค่า
กำหนดค่า
Auto3.png (45.42 KiB) Viewed 1717 times
- คลิกที่ปุ่มบวกของ Auto Layout
เลือกแบบ Auto Layout จะมี 2 แบบ
เพิ่ม Auto Layout
เพิ่ม Auto Layout
Auto4.png (40.01 KiB) Viewed 1717 times
- แนวนอน
- แนวตั้ง
Hulg contents
รูปแบบของ auto Layout
รูปแบบของ auto Layout
Auto5.png (41.28 KiB) Viewed 1717 times
มี 4 แบบ
Auto6.png
- Fixed Width
- Hug contents
Auto8.png
- Fixed height
- Hug contents

ในการใช้ Auto Layout ของ Figma จะช่วยปรับในเรื่องของ Layout ให้มีขนาดไม่ล้นกรอบ เช่น สามารถดึงตรงบางปุ่มให้สูงกว่าหรือต่ำกว่าอีกปุ่มได้โดยไม่เกินขนาด และไปแสดงผลในรูปแบบ เว็บแอป หรือ โมบายแอป ก็ได้
Duanghathai Termtem
PHP Super Hero Member
PHP Super Hero Member
โพสต์: 849
ลงทะเบียนเมื่อ: 30/11/2020 10:24 am

Re: วิธีทำ Auto Layout ของ Figma

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

ชื่อบทความไม่สื่อถึงประโยชน์
เพิ่มส่วนเกริ่นและเชื่อมลิงค์
สัญลักษณ์ในภาพต้องใช้สีเขียว
Aoranuch Phupaloy
PHP Hero Member
PHP Hero Member
โพสต์: 166
ลงทะเบียนเมื่อ: 07/12/2020 9:33 am

Re: วิธีทำ Auto Layout ให้มีขนาดไม่ล้นกรอบ ของโปรแกรม Figma

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

วิธีทำ Auto Layout ให้มีขนาดไม่ล้นกรอบ ของโปรแกรม Figma
Auto Layout เป็นการจัดวางหน้าจอในโปรแกรมของเราแบบคำนวนตำแหน่งอัตโนมัติ การวาด wireframe โดยจะอ้างอิงจากขอบเขต หรือ Constraint ที่เรากำหนดไว้ Auto Layout จะช่วยรองรับการเปลี่ยนแปลงต่างๆในหน้าจอของเราไม่ว่าจะเป็นการที่จะทำแอปให้รองรับทั้งแนวตั้งและแนวนอน หรือการทำให้รองรับหน้าจอตjางๆและวิธีทำ Auto Layout ของ Figma มีดังนี้
สร้างหน้าวัตถุ
สร้างหน้าวัตถุ
Auto1.png (68.97 KiB) Viewed 1697 times
- ทำการเลือกหน้าทั้งหมด หรือเลือกหน้าที่เราต้องการก็ได้
รูปแบบของ Hulg contents
รูปแบบของ Hulg contents
Auto2.png (33.88 KiB) Viewed 1697 times
- เมื่อทำการเลือกแล้ว แถบข้างซ้ายมือจะขึ้นคำว่า Auto Layout จะเป็นแถบเมนูที่เพิ่มขึ้นมาใหม่
แต่ถ้าเราเลือกแค่ตัวเดียวมันจะไม่มีเมนูนี้ขึ้นมาให้
กำหนดค่า
กำหนดค่า
Auto3.png (45.57 KiB) Viewed 1697 times
- คลิกที่ปุ่มบวกของ Auto Layout
เลือกแบบ Auto Layout จะมี 2 แบบ
เพิ่ม Auto Layout
เพิ่ม Auto Layout
Auto4.png (40.59 KiB) Viewed 1697 times
- แนวนอน
- แนวตั้ง
Hulg contents
รูปแบบของ Auto Layout
รูปแบบของ Auto Layout
Auto5.png (41.53 KiB) Viewed 1697 times
มี 4 แบบ
รูปแบบ Fixed width
รูปแบบ Fixed width
Auto6.png (6.29 KiB) Viewed 1697 times
- Fixed Width
- Hug contents
รูปแบบ Hug contents
รูปแบบ Hug contents
Auto8.png (6.24 KiB) Viewed 1697 times
- Fixed height
- Hug contents


การใช้ Auto Layout ของ Figma จะช่วยปรับในเรื่องของ Layout UI Design ให้มีขนาดไม่ล้นกรอบ เช่น สามารถดึงตรงบางปุ่มให้สูงกว่าหรือต่ำกว่าอีกปุ่มได้โดยไม่เกินขนาด และไปแสดงผลในรูปแบบ เว็บแอป หรือ โมบายแอป ก็ได้
Aoranuch Phupaloy
PHP Hero Member
PHP Hero Member
โพสต์: 166
ลงทะเบียนเมื่อ: 07/12/2020 9:33 am

Re: วิธีทำ Auto Layout ของ Figma

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

Duanghathai Termtem เขียน: 23/12/2020 11:48 am ชื่อบทความไม่สื่อถึงประโยชน์
เพิ่มส่วนเกริ่นและเชื่อมลิงค์
สัญลักษณ์ในภาพต้องใช้สีเขียว
แก้ไขแล้วค่ะ
ตอบกลับโพส
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

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

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