วิธีทำ Auto Layout ของ Figma มีดังนี้
- ทำการเลือกหน้าทั้งหมด หรือเลือกหน้าที่เราต้องการก็ได้
- เมื่อทำการเลือกแล้ว แถบข้างซ้ายมือจะขึ้นคำว่า Auto Layout จะเป็นแถบเมนูที่เพิ่มขึ้นมาใหม่
แต่ถ้าเราเลือกแค่ตัวเดียวมันจะไม่มีเมนูนี้ขึ้นมาให้
- คลิกที่ปุ่มบวกของ Auto Layout
เลือกแบบ Auto Layout จะมี 2 แบบ
- แนวนอน
- แนวตั้ง
Hulg contents
มี 4 แบบ
- Fixed Width
- Hug contents
- Fixed height
- Hug contents
ในการใช้ Auto Layout จะช่วยปรับในเรื่องของLayout ให้มีขนาดไม่ล้นกรอบ เช่น สามารถดึงตรงบางปุ่มให้สูงกว่าหรือต่ำกว่าอีกปุ่มได้โดยไม่เกินขนาดนั่นเอง
แปลง Figma เป็น HTML CSS
https://youtu.be/WBgyZ0pEJxA
วิธีทำ Auto Layout ของ Figma
Moderator: mindphp, ผู้ดูแลกระดาน
-
- PHP Hero Member
- โพสต์: 166
- ลงทะเบียนเมื่อ: 07/12/2020 9:33 am
วิธีทำ Auto Layout ของ Figma
แก้ไขล่าสุดโดย Aoranuch Phupaloy เมื่อ 22/12/2020 10:15 am, แก้ไขไปแล้ว 1 ครั้ง.
-
- PHP Super Hero Member
- โพสต์: 849
- ลงทะเบียนเมื่อ: 30/11/2020 10:24 am
Re: วิธีทำ Auto Layout ของ Figma
แก้ไขรูปภาพ ขนาดไม่เกิน 800
ขาดส่วนสรุปและแนบลิ้งค์ในส่วนสรุป
ขาดส่วนสรุปและแนบลิ้งค์ในส่วนสรุป
-
- PHP Hero Member
- โพสต์: 166
- ลงทะเบียนเมื่อ: 07/12/2020 9:33 am
Re: วิธีทำ Auto Layout ของ Figma
Auto Layout เป็นการจัดวางหน้าจอในโปรแกรมของเราแบบคำนวนตำแหน่งอัตโนมัติ โดยจะอ้างอิงจากขอบเขต หรือ Constraint ที่เรากำหนดไว้ Auto Layout จะช่วยรองรับการเปลี่ยนแปลงต่างๆในหน้าจอของเราไม่ว่าจะเป็นการที่จะทำแอปให้รองรับทั้งแนวตั้งและแนวนอน หรือการทำให้รองรับหน้าจอต้างๆและวิธีทำ Auto Layout ของ Figma มีดังนี้
- ทำการเลือกหน้าทั้งหมด หรือเลือกหน้าที่เราต้องการก็ได้
- เมื่อทำการเลือกแล้ว แถบข้างซ้ายมือจะขึ้นคำว่า Auto Layout จะเป็นแถบเมนูที่เพิ่มขึ้นมาใหม่
แต่ถ้าเราเลือกแค่ตัวเดียวมันจะไม่มีเมนูนี้ขึ้นมาให้ - คลิกที่ปุ่มบวกของ Auto Layout
เลือกแบบ Auto Layout จะมี 2 แบบ - แนวนอน
- แนวตั้ง
Hulg contents มี 4 แบบ
Auto6.png
- Fixed Width
- Hug contents
Auto8.png
- Fixed height
- Hug contents
ในการใช้ Auto Layout ของ Figma จะช่วยปรับในเรื่องของ Layout ให้มีขนาดไม่ล้นกรอบ เช่น สามารถดึงตรงบางปุ่มให้สูงกว่าหรือต่ำกว่าอีกปุ่มได้โดยไม่เกินขนาด และไปแสดงผลในรูปแบบ เว็บแอป หรือ โมบายแอป ก็ได้
แต่ถ้าเราเลือกแค่ตัวเดียวมันจะไม่มีเมนูนี้ขึ้นมาให้ - คลิกที่ปุ่มบวกของ Auto Layout
เลือกแบบ Auto Layout จะมี 2 แบบ - แนวนอน
- แนวตั้ง
Hulg contents มี 4 แบบ
Auto6.png
- Fixed Width
- Hug contents
Auto8.png
- Fixed height
- Hug contents
ในการใช้ Auto Layout ของ Figma จะช่วยปรับในเรื่องของ Layout ให้มีขนาดไม่ล้นกรอบ เช่น สามารถดึงตรงบางปุ่มให้สูงกว่าหรือต่ำกว่าอีกปุ่มได้โดยไม่เกินขนาด และไปแสดงผลในรูปแบบ เว็บแอป หรือ โมบายแอป ก็ได้
-
- PHP Super Hero Member
- โพสต์: 849
- ลงทะเบียนเมื่อ: 30/11/2020 10:24 am
Re: วิธีทำ Auto Layout ของ Figma
ชื่อบทความไม่สื่อถึงประโยชน์
เพิ่มส่วนเกริ่นและเชื่อมลิงค์
สัญลักษณ์ในภาพต้องใช้สีเขียว
เพิ่มส่วนเกริ่นและเชื่อมลิงค์
สัญลักษณ์ในภาพต้องใช้สีเขียว
-
- PHP Hero Member
- โพสต์: 166
- ลงทะเบียนเมื่อ: 07/12/2020 9:33 am
Re: วิธีทำ Auto Layout ให้มีขนาดไม่ล้นกรอบ ของโปรแกรม Figma
วิธีทำ Auto Layout ให้มีขนาดไม่ล้นกรอบ ของโปรแกรม Figma
Auto Layout เป็นการจัดวางหน้าจอในโปรแกรมของเราแบบคำนวนตำแหน่งอัตโนมัติ การวาด wireframe โดยจะอ้างอิงจากขอบเขต หรือ Constraint ที่เรากำหนดไว้ Auto Layout จะช่วยรองรับการเปลี่ยนแปลงต่างๆในหน้าจอของเราไม่ว่าจะเป็นการที่จะทำแอปให้รองรับทั้งแนวตั้งและแนวนอน หรือการทำให้รองรับหน้าจอตjางๆและวิธีทำ Auto Layout ของ Figma มีดังนี้ - ทำการเลือกหน้าทั้งหมด หรือเลือกหน้าที่เราต้องการก็ได้ - เมื่อทำการเลือกแล้ว แถบข้างซ้ายมือจะขึ้นคำว่า Auto Layout จะเป็นแถบเมนูที่เพิ่มขึ้นมาใหม่
แต่ถ้าเราเลือกแค่ตัวเดียวมันจะไม่มีเมนูนี้ขึ้นมาให้ - คลิกที่ปุ่มบวกของ Auto Layout
เลือกแบบ Auto Layout จะมี 2 แบบ - แนวนอน
- แนวตั้ง
Hulg contents มี 4 แบบ - Fixed Width
- Hug contents - Fixed height
- Hug contents
การใช้ Auto Layout ของ Figma จะช่วยปรับในเรื่องของ Layout UI Design ให้มีขนาดไม่ล้นกรอบ เช่น สามารถดึงตรงบางปุ่มให้สูงกว่าหรือต่ำกว่าอีกปุ่มได้โดยไม่เกินขนาด และไปแสดงผลในรูปแบบ เว็บแอป หรือ โมบายแอป ก็ได้
Auto Layout เป็นการจัดวางหน้าจอในโปรแกรมของเราแบบคำนวนตำแหน่งอัตโนมัติ การวาด wireframe โดยจะอ้างอิงจากขอบเขต หรือ Constraint ที่เรากำหนดไว้ Auto Layout จะช่วยรองรับการเปลี่ยนแปลงต่างๆในหน้าจอของเราไม่ว่าจะเป็นการที่จะทำแอปให้รองรับทั้งแนวตั้งและแนวนอน หรือการทำให้รองรับหน้าจอตjางๆและวิธีทำ Auto Layout ของ Figma มีดังนี้ - ทำการเลือกหน้าทั้งหมด หรือเลือกหน้าที่เราต้องการก็ได้ - เมื่อทำการเลือกแล้ว แถบข้างซ้ายมือจะขึ้นคำว่า Auto Layout จะเป็นแถบเมนูที่เพิ่มขึ้นมาใหม่
แต่ถ้าเราเลือกแค่ตัวเดียวมันจะไม่มีเมนูนี้ขึ้นมาให้ - คลิกที่ปุ่มบวกของ Auto Layout
เลือกแบบ Auto Layout จะมี 2 แบบ - แนวนอน
- แนวตั้ง
Hulg contents มี 4 แบบ - Fixed Width
- Hug contents - Fixed height
- Hug contents
การใช้ Auto Layout ของ Figma จะช่วยปรับในเรื่องของ Layout UI Design ให้มีขนาดไม่ล้นกรอบ เช่น สามารถดึงตรงบางปุ่มให้สูงกว่าหรือต่ำกว่าอีกปุ่มได้โดยไม่เกินขนาด และไปแสดงผลในรูปแบบ เว็บแอป หรือ โมบายแอป ก็ได้
-
- PHP Hero Member
- โพสต์: 166
- ลงทะเบียนเมื่อ: 07/12/2020 9:33 am
Re: วิธีทำ Auto Layout ของ Figma
แก้ไขแล้วค่ะDuanghathai Termtem เขียน: ↑23/12/2020 11:48 am ชื่อบทความไม่สื่อถึงประโยชน์
เพิ่มส่วนเกริ่นและเชื่อมลิงค์
สัญลักษณ์ในภาพต้องใช้สีเขียว
-
- Similar Topics
- ตอบกลับ
- แสดง
- โพสต์ล่าสุด
-
-
โพสต์ใหม่ ปรับเปลี่ยน Layout ด้วยฟังก์ชั่น Auto Layout ใน Figma
โดย pataponnew » 27/05/2021 11:12 am » ใน Graphic design - 0 ตอบกลับ
- 2380 แสดง
-
โพสต์ล่าสุด โดย pataponnew
27/05/2021 11:12 am
-
ผู้ใช้งานขณะนี้
สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 59