วิธีทำ Constraints Figma

[Aoranuch Phupaloy]

วิธีทำ Constraints Figma
Constraints คือข้อบังคับหรือเงื่อนไขการอนุญาตให้เก็บเฉพาะข้อมูลที่เหมาะสมลงในฐานข้อมูลเพื่อให้การการเลือกข้อมูลจากฐานข้อมูลเป็นไปอย่างถูกต้อง การทำ Constraints จะใช้ในการกำหนด Key ใน SQL
วิธีทำ Constraints Figma หรือ การกำหนดตำแหน่งให้กับวัตถุที่อยู่ภายให้เฟรมของเรา

สร้างวัตถุและกำหนดค่า

con1.JPG (65.67 KiB) Viewed 1357 times

ตอนที่เราสร้างวัตถุขึ้นมา จะเห็นเส้นปะที่อยู่ด้านล่างและด้านบน ส่วนนี้แหละคือ Constraints

กำหนดค่า Constraints

con2.png (53.51 KiB) Viewed 1357 times

ตรงแถบขาวมือของ Constraints จะมี 2 แกน คือ
- Left
- Top

ทดลองเลื่อนเฟรม

con3.png (27.85 KiB) Viewed 1357 times

เมื่อเราทำการเลือกรูปแบบ แล้วลองเลื่อนเฟรม จะเห็นได้ว่าปุ่มที่เราสร้างขึ้นจะมูฟไปด้วย

การทำ Constraints หรือ การกำหนดตำแหน่ง จะมีความสำคัญอย่างมากในการทำ Responsive เว็บไซต์ การกำหนดค่าไม่ถูกต้องอาจจะทำให้โปรโตไทป์ที่เราสร้างเพี้ยนไปได้ หรือแสดงผลไม่ถูกต้อง และควรกำหนดค่า Variant Figma ให้ถูกต้องด้วย

[Duanghathai Termtem]

ชื่อบทความไม่สื่อถึงประโยชน์
บทความควรมีตัวอักษรมากกว่า 1200 ตัวอักษร
เช็คใน Google sheet โดยใส่สูตร =len(ช่องที่วางข้อความ)
สีของสัญลักษณ์์ในภาพ

[Aoranuch Phupaloy]

วิธีกำหนดค่า Constraints ไม่ให้แสดงผลผิดเพี้ยน ของโปรแกรม Figma
Constraints คือข้อบังคับหรือเงื่อนไขการอนุญาตให้เก็บเฉพาะข้อมูลที่เหมาะสมลงในฐานข้อมูลเพื่อให้การการเลือกข้อมูลจากฐานข้อมูลเป็นไปอย่างถูกต้อง การทำ Constraints จะใช้ในการกำหนด Key ใน SQL Design Systems ของ Figma จะรวมไว้ใน “Assets” tab ทางซ้ายมือของโปรแกรม ที่สะดวกในการใช้งานมาก อยากจะใช้ icons, backgrounds, images, avatars, fonts, buttons หรือ component ไหนที่สร้างไว้ ก็แค่ลากมาใส่ใน frame งานแก้ไม่ต้องแก้ทีละส่วน เมื่อสร้าง component ไว้แล้ว อยากจะแก้ไขก็ทำได้ไม่ยาก เพียงเปลี่ยนที่เดียว ที่อื่นที่ใช้ instance อันนั้นก็จะเปลี่ยนตามทั้งหมด
วิธีทำ Constraints Figma หรือ การกำหนดตำแหน่งให้กับวัตถุที่อยู่ภายให้เฟรมของเรา

สร้างวัตถุและกำหนดค่า

con1.JPG (65.67 KiB) Viewed 1300 times

ตอนที่เราสร้างวัตถุขึ้นมา จะเห็นเส้นปะที่อยู่ด้านล่างและด้านบน ส่วนนี้แหละคือ Constraints

กำหนดค่า Constraints

con2.png (55.21 KiB) Viewed 1300 times

ตรงแถบขาวมือของ Constraints จะมี 2 แกน คือ
- Left
- Top

ทดลองเลื่อนเฟรม

con3.png (27.85 KiB) Viewed 1300 times

เมื่อเราทำการเลือกรูปแบบ แล้วลองเลื่อนเฟรม จะเห็นได้ว่าปุ่มที่เราสร้างขึ้นจะมูฟไปด้วย

การทำ Constraints หรือ การกำหนดตำแหน่ง จะมีความสำคัญอย่างมากในการทำ Responsive เว็บไซต์ การกำหนดค่าไม่ถูกต้องอาจจะทำให้โปรโตไทป์ที่เราสร้างเพี้ยนไปได้ หรือแสดงผลไม่ถูกต้อง และควรกำหนดค่า Variant Figma ให้ถูกต้องด้วย

[Aoranuch Phupaloy]

ชื่อบทความไม่สื่อถึงประโยชน์
บทความควรมีตัวอักษรมากกว่า 1200 ตัวอักษร
เช็คใน Google sheet โดยใส่สูตร =len(ช่องที่วางข้อความ)
สีของสัญลักษณ์์ในภาพ

แก้ไขแล้วค่ะ