หากคุณต้องการเพิ่ม Cell (หรือส่วนประกอบภายใน) เข้าไปในแถวของตารางใน Figma โดยเฉพาะเมื่อมีการใช้ Auto Layout อยู่ มีวิธีทำง่าย ๆ ดังนี้ครับ:
วิธีการแทรก Cell ข้างหน้า ( ปุ่มลัด )
- เลือก Cell หรือ Component ที่คุณต้องการนำไปวาง (เช่น ไอคอน หรือช่องว่างอันใหม่) แล้วกด
Cmd + C(Mac) หรือCtrl + C( Windows ) เพื่อคัดลอก - คลิกเลือก Cell แรก ที่อยู่ในแถวนั้น ( ในภาพของคุณคือช่องที่มีไอคอนรูปตา )
- กด
Cmd + V(Mac) หรือCtrl + V( Windows ) เพื่อวาง- โดยปกติ Figma จะวางไว้ ข้างหลัง ตัวที่เราเลือก ให้คุณกด ปุ่มลูกศรซ้าย (←) บนคีย์บอร์ด เพื่อเลื่อนตำแหน่งมันมาไว้ข้างหน้าสุดครับ
วิธีการลากวาง ( Drag and Drop )
หากโครงสร้างเป็น Auto Layout คุณสามารถทำได้ดังนี้
- คลิกค้างที่วัตถุที่ต้องการเพิ่ม
- ลากเข้าไปในแถวตาราง ( Row ) จนเห็น เส้นสีฟ้าแนวตั้ง ปรากฏขึ้นที่ด้านหน้าสุดของช่อง “Action”
- ปล่อยเมาส์เพื่อวางวัตถุลงไป
ตรวจสอบโครงสร้าง Layer
ถ้าทำตามข้างบนแล้วไม่ได้ ให้เช็คที่แถบ Layers ด้านซ้ายมือครับ:
- ดูว่าตัว “Row” นั้นเปิด Auto Layout ไว้หรือไม่ ( สังเกตไอคอน ||= หรือ || )
- ถ้าเป็น Component Instance (ตัวลูกที่เป็นสีม่วงและล็อคไว้) คุณอาจจะเพิ่มเข้าไปตรง ๆ ไม่ได้ ต้องไปเพิ่มที่ Main Component หรือทำการ Detach Instance ก่อน ( แต่แนะนำให้แก้ที่ต้นฉบับจะดีกว่าครับ )
เพิ่ม Layer
หากคุณต้องการเพิ่ม Cell ( หรือส่วนประกอบภายใน ) เข้าไปในแถวของตารางใน Figma โดยเฉพาะเมื่อมีการใช้ Auto Layout อยู่ มีวิธีทำง่าย ๆ ดังนี้ครับ:
1. วิธีการแทรก Cell ข้างหน้า ( ปุ่มลัด )
- เลือก Cell หรือ Component ที่คุณต้องการนำไปวาง ( เช่น ไอคอน หรือช่องว่างอันใหม่ ) แล้วกด
Cmd + C( Mac ) หรือCtrl + C( Windows ) เพื่อคัดลอก - คลิกเลือก Cell แรก ที่อยู่ในแถวนั้น ( ในภาพของคุณคือช่องที่มีไอคอนรูปตา )
- กด
Cmd + V( Mac ) หรือCtrl + V( Windows ) เพื่อวาง- โดยปกติ Figma จะวางไว้ ข้างหลัง ตัวที่เราเลือก ให้คุณกด ปุ่มลูกศรซ้าย (←) บนคีย์บอร์ด เพื่อเลื่อนตำแหน่งมันมาไว้ข้างหน้าสุดครับ
2. วิธีการลากวาง ( Drag and Drop )
หากโครงสร้างเป็น Auto Layout คุณสามารถทำได้ดังนี้:
- คลิกค้างที่วัตถุที่ต้องการเพิ่ม
- ลากเข้าไปในแถวตาราง (Row) จนเห็น เส้นสีฟ้าแนวตั้ง ปรากฏขึ้นที่ด้านหน้าสุดของช่อง “Action”
- ปล่อยเมาส์เพื่อวางวัตถุลงไป
3. ตรวจสอบโครงสร้าง Layer
ถ้าทำตามข้างบนแล้วไม่ได้ ให้เช็คที่แถบ Layers ด้านซ้ายมือครับ:
- ดูว่าตัว “Row” นั้นเปิด Auto Layout ไว้หรือไม่ (สังเกตไอคอน ||= หรือ ||)
- ถ้าเป็น Component Instance (ตัวลูกที่เป็นสีม่วงและล็อคไว้) คุณอาจจะเพิ่มเข้าไปตรง ๆ ไม่ได้ ต้องไปเพิ่มที่ Main Component หรือทำการ Detach Instance ก่อน (แต่แนะนำให้แก้ที่ต้นฉบับจะดีกว่าครับ)
ทริคเพิ่มเติม: การปรับระยะห่าง ( Padding / Gap )
เมื่อเพิ่ม Cell เข้าไปแล้ว ถ้าช่องไฟดูเบียดกันเกินไป
- เลือกที่ตัว Row ( แถว )
- ไปที่แผง Auto Layout ด้านขวา
- ปรับค่า Gap between items ( ระยะห่างระหว่างช่อง ) เพื่อให้ไอคอนดูไม่อึดอัดครับ
อ่านเพิ่มเติม