การวาง Object ใน Figma ให้ถูกต้องและทำงานอย่างเป็นมืออาชีพ ไม่ควรใช้การลากวางด้วยมือ (Manual) แต่ควรใช้โครงสร้างระบบเข้ามาช่วยครับ นี่คือลำดับการวาง Object ที่ถูกต้องเพื่อให้ดีไซน์ยืดหยุ่นและเส้นตรงกันเป๊ะครับ
ใช้ Auto Layout เสมอ (หัวใจหลัก)
แทนที่จะขยับค่า X หรือ Y เอง ให้ใช้ Auto Layout (Shift + A) เพื่อควบคุมตำแหน่งวัตถุครับ
- หุ้ม Cell: นำข้อความ “Action” หรือ “Username” ใส่ใน Frame แล้วกด
Shift + Aเพื่อสร้าง Cell - หุ้ม Row: นำ Cell ทั้งหมดมาเลือกพร้อมกันแล้วกด
Shift + Aเพื่อสร้างแถว (Row) - หุ้ม Table: นำ Header และ Row ทุกอันมาเลือกพร้อมกันแล้วกด
Shift + Aอีกครั้งเพื่อให้เป็นตารางชุดเดียวกัน
การตั้งค่า Resizing (เพื่อให้เส้นตรงกัน)
เพื่อให้เส้นแนวตั้งของ “Action” ใน Header และ Row ตรงกันพอดี
- Width (W): ตั้งค่าความกว้างของ Cell ที่ตรงกันให้เท่ากัน เช่น Cell “Action” ของทุกแถวควรตั้งเป็น Fixed Width ที่ตัวเลขเดียวกัน
- Fill Container: หากต้องการให้ตารางขยายเต็มพื้นที่ ให้ตั้งค่า Cell เป็น Fill container เพื่อให้ Figma หารเฉลี่ยความกว้างให้โดยอัตโนมัติ
การจัดการระยะห่างและลำดับ (Gap & Stacking)
เพื่อแก้ปัญหาที่เรื่อง “Object ทับเส้น”
- Gap = 0: ใน Auto Layout ของตาราง ให้ตั้งค่า Gap เป็น 0 เพื่อให้แต่ละแถววางชิดกันพอดี
- Canvas Stacking: ในเมนู Advanced (จุดสามจุด) ของ Auto Layout ให้เลือก First on top เพื่อให้แถวบนแสดงเส้นขอบทับแถวล่างเสมอ เส้นขอบจะได้ไม่หายครับ
การใช้ Stroke (Border) ที่ถูกต้อง
- Inside Stroke: ควรตั้งค่า Stroke เป็น Inside เสมอ เพื่อให้เส้นขอบไม่ไปเพิ่มขนาดของ Object หรือไปทับกับ Frame ข้างๆ
- Individual Strokes: หากทำตาราง ไม่จำเป็นต้องใส่เส้นขอบรอบด้าน (All) ให้เลือกใส่เฉพาะ Bottom หรือ Right เพื่อลดความหนาของเส้นที่ซ้อนกันครับ
ตรวจสอบพิกัดเริ่มต้น
ตรวจเช็กให้ค่า X และ Y ของ Frame หลักเป็นตัวเลขจำนวนเต็ม (เช่น X: 0 ไม่ใช่ X: 0.5) เพื่อไม่ให้เส้นดูเบลอหรือคลาดเคลื่อน
อ่านเพิ่มเติม