Constraints ใน Figma คือการกำหนดตำเเหน่งให้กับวัตถุที่อยู่ใน frame ซึ่งมีความสำคัญมากในการออกเเบบ prototype เป็นอย่างมาก ถ้าเรากำหนดค่า Constraints ไม่ถูกต้อง อาจทำให้ตัว Prototype ของเรามีการเเสดงผลที่ไม่ถูกต้องอาจมีผลกระทบไปถึงการจัด layout ของหน้าเว็ปไซต์ได้
เรามาทำความรู้จักกับตัว Constraints กันครับ
1.เริ่มต้นสร้าง Frame เเละ Object
โดยผมจะสร้าง frame ขึ้นมา เเละสร้างสี่เหลี่ยมตามรูปครับ
จะเห็นได้ว่าด้านซ้ายเเละด้านบนของวัตถุจะมีเส้นประ นั่นก็คือ Constraints นั่นเอง
2.คุณสมบัติของ Constraint
Constraints จะมีเเกน2เเกน ค่าตั้งต้นของตัว Constraints ก็คือ ซ้ายเเละบนเราสามารถปรับเปลี่ยนได้ครับ
เราจะมาดูการทำงานของมันกันนะครับโดยผมจะทำการปรับขนาดของตัว frame ด้านที่ตัว object สี่เหลี่ยมของเรามีการอ้างอิงนะครับ
จะเห็นได้ว่าผมทำการปรับขนาดของตัว frame ให้เล็กลง เเต่ว่าตัว object สี่เหลี่ยมของผมจะเว้นระยะห่างระหว่างด้านบนเเละด้านซ้ายกับตัว frame เท่าเดิมอยู่ดีครับ
โดยผมจะเปรียบเทียบให้เห็นอย่างชัดๆของระยะห่าง ก่อน เเละ หลัง การเปลี่ยนขนาดของ frame นะครับ
ก่อนปรับขนาด frame ครับ
จะเห็นว่า ค่า top เเละ left ของ object สี่เหลี่ยมของผมจะอยู่ที่ 413px เเละ 537px ตามลำดับนะครับ
เเละเมื่อผมเปลี่ยนขนาดของตัว frame เเล้ว
จะเห็นว่า ค่า top เเละ left ของ object สี่เหลี่ยมของผมจะอยู่ที่ 413px เเละ 537px เหมือนเดิมไม่มีการเปลี่ยนเเปลงนะครับผม
3.การกำหนดการตั้งค่าของ Constraint
การใช้ Constaints จะสามารถตั้งค่าได้หลายรูปแบบดังนี้ครับ
โดยจะมีการกำหนดในส่วนของเเกน x เเละ เเกน y
Left คือการกำหนดระยะห่างจากทางด้านซ้าย
Right คือการกำหนดระยะห่างจากทางด้านขวา
Left and Right คือการกำหนดระยะห่างจากทางด้านซ้ายเเละขวา
Center คือการกำหนดให้ object อยู่กึ่งกลางตามเเกนที่กำหนดของหน้า Frame
Scale คือการกำหนดระยะห่างของตัว object กับ ตัว Frame ให้มีขนาดเท่าเดิมเวลาย่อหรือขยายตัว Frame
เราจะใช้คุณสมบัติเหล่านี้ในการออกเเบบการทำงานของส่วนต่างๆเวลาที่มีการย่อขยายของตัวหน้าเว็ปไซต์ว่าต้องการให้เเสดงผลเเบบไหน เช่นย่อขนาดของหน้าเว็ปไซต์เเต่ไม่ต้องการให้ปุ่มบางปุ่มหายไป สามารถเลื่อนตามการย่อขยายของหน้าเว็ปไซต์ได้ ขยายเมนูบางส่วนใหญ่มีขนาดใหญ่ขึ้นหรือเล็กลงตามขนาดของหน้าเว็ปไซต์ ซึ่งจะช่วยในการจัด Layout ของ หน้าเว็ปไซต์ไม่ให้การเเสดงผลของ UX/UI ผิดพลาดครับ
อ้างอิง
https://kruthaimooc.com/courses/%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B9%83%E0%B8%8A%E0%B9%89%E0%B9%82%E0%B8%9B%E0%B8%A3%E0%B9%80%E0%B9%80%E0%B8%81%E0%B8%A3%E0%B8%A1-figma-%E0%B9%80%E0%B8%9A%E0%B8%B7%E0%B9%89%E0%B8%AD%E0%B8%87%E0%B8%95/
https://terrynut.medium.com/ep-38-%E0%B9%81%E0%B8%99%E0%B8%B0%E0%B8%99%E0%B8%B3%E0%B9%83%E0%B8%8A%E0%B9%89-figma-%E0%B9%81%E0%B8%9A%E0%B8%9A%E0%B9%82%E0%B8%87%E0%B9%88%E0%B9%86-%E0%B8%89%E0%B8%9A%E0%B8%B1%E0%B8%9A%E0%B8%84%E0%B8%99%E0%B8%87%E0%B8%A1%E0%B9%80%E0%B8%AD%E0%B8%87-1cfe64ded5ff
https://medium.com/@khemcharoenreadyma/%E0%B8%A1%E0%B8%B2%E0%B8%97%E0%B8%B3%E0%B8%84%E0%B8%A7%E0%B8%B2%E0%B8%A1%E0%B8%A3%E0%B8%B9%E0%B9%89%E0%B8%88%E0%B8%B1%E0%B8%81-figma-design-tool-8b3fe97d5b5
การกำหนดตำเเหน่งของวัตถุด้วย Constraints ใน Figma
Moderator: mindphp, ผู้ดูแลกระดาน
-
- PHP Hero Member
- โพสต์: 152
- ลงทะเบียนเมื่อ: 03/05/2021 10:18 am
-
- Similar Topics
- ตอบกลับ
- แสดง
- โพสต์ล่าสุด
-
- 3 ตอบกลับ
- 1361 แสดง
-
โพสต์ล่าสุด โดย Aoranuch Phupaloy
24/12/2020 6:31 pm
-
- 3 ตอบกลับ
- 2106 แสดง
-
โพสต์ล่าสุด โดย Aoranuch Phupaloy
24/12/2020 5:41 pm
-
- 0 ตอบกลับ
- 855 แสดง
-
โพสต์ล่าสุด โดย pataponnew
25/05/2021 10:09 am
-
- 3 ตอบกลับ
- 2903 แสดง
-
โพสต์ล่าสุด โดย Aoranuch Phupaloy
24/12/2020 5:08 pm
ผู้ใช้งานขณะนี้
สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 71