การกำหนดตำเเหน่งของวัตถุด้วย Constraints ใน Figma

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

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

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

การกำหนดตำเเหน่งของวัตถุด้วย Constraints ใน Figma

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

Constraints ใน Figma คือการกำหนดตำเเหน่งให้กับวัตถุที่อยู่ใน frame ซึ่งมีความสำคัญมากในการออกเเบบ prototype เป็นอย่างมาก ถ้าเรากำหนดค่า Constraints ไม่ถูกต้อง อาจทำให้ตัว Prototype ของเรามีการเเสดงผลที่ไม่ถูกต้องอาจมีผลกระทบไปถึงการจัด layout ของหน้าเว็ปไซต์ได้
เรามาทำความรู้จักกับตัว Constraints กันครับ
1.เริ่มต้นสร้าง Frame เเละ Object
โดยผมจะสร้าง frame ขึ้นมา เเละสร้างสี่เหลี่ยมตามรูปครับ
สร้าง frame เพื่อทดลองใช้ Constraints
สร้าง frame เพื่อทดลองใช้ Constraints
bandicam 2021-05-25 17-27-59-545.jpg (38.3 KiB) Viewed 965 times
จะเห็นได้ว่าด้านซ้ายเเละด้านบนของวัตถุจะมีเส้นประ นั่นก็คือ Constraints นั่นเอง
2.คุณสมบัติของ Constraint
การตั้งค่า Constraints
การตั้งค่า Constraints
Untitled.jpg (27.95 KiB) Viewed 965 times
Constraints จะมีเเกน2เเกน ค่าตั้งต้นของตัว Constraints ก็คือ ซ้ายเเละบนเราสามารถปรับเปลี่ยนได้ครับ

เราจะมาดูการทำงานของมันกันนะครับโดยผมจะทำการปรับขนาดของตัว frame ด้านที่ตัว object สี่เหลี่ยมของเรามีการอ้างอิงนะครับ
ทดสอบการใช้ Constraints
ทดสอบการใช้ Constraints
bandicam 2021-05-25 17-40-16-488.jpg (17.32 KiB) Viewed 965 times
จะเห็นได้ว่าผมทำการปรับขนาดของตัว frame ให้เล็กลง เเต่ว่าตัว object สี่เหลี่ยมของผมจะเว้นระยะห่างระหว่างด้านบนเเละด้านซ้ายกับตัว frame เท่าเดิมอยู่ดีครับ
โดยผมจะเปรียบเทียบให้เห็นอย่างชัดๆของระยะห่าง ก่อน เเละ หลัง การเปลี่ยนขนาดของ frame นะครับ
ก่อนปรับขนาด frame ครับ
คุณสมบัติของ Constraints
คุณสมบัติของ Constraints
bandicam 2021-05-25 17-44-24-527.jpg (12.3 KiB) Viewed 965 times
จะเห็นว่า ค่า top เเละ left ของ object สี่เหลี่ยมของผมจะอยู่ที่ 413px เเละ 537px ตามลำดับนะครับ
เเละเมื่อผมเปลี่ยนขนาดของตัว frame เเล้ว
คุณสมบัติของ Constraints
คุณสมบัติของ Constraints
bandicam 2021-05-25 17-44-42-515.jpg (15.59 KiB) Viewed 965 times
จะเห็นว่า ค่า top เเละ left ของ object สี่เหลี่ยมของผมจะอยู่ที่ 413px เเละ 537px เหมือนเดิมไม่มีการเปลี่ยนเเปลงนะครับผม
3.การกำหนดการตั้งค่าของ Constraint
การใช้ Constaints จะสามารถตั้งค่าได้หลายรูปแบบดังนี้ครับ
รูปแบบต่างๆของ Constaints
รูปแบบต่างๆของ Constaints
bandicam 2021-05-25 17-59-05-403.jpg (10.91 KiB) Viewed 965 times
โดยจะมีการกำหนดในส่วนของเเกน 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
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

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

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