Tag Archive Insert

Byphunsanit

Figma: เพิ่ม Cell (หรือส่วนประกอบภายใน)

หากคุณต้องการเพิ่ม Cell (หรือส่วนประกอบภายใน) เข้าไปในแถวของตารางใน Figma โดยเฉพาะเมื่อมีการใช้ Auto Layout อยู่ มีวิธีทำง่ายๆ ดังนี้ครับ:


วิธีการแทรก Cell ข้างหน้า (ปุ่มลัด)

  1. เลือก Cell หรือ Component ที่คุณต้องการนำไปวาง (เช่น ไอคอน หรือช่องว่างอันใหม่) แล้วกด Cmd + C (Mac) หรือ Ctrl + C (Windows) เพื่อคัดลอก
  2. คลิกเลือก Cell แรก ที่อยู่ในแถวนั้น (ในภาพของคุณคือช่องที่มีไอคอนรูปตา)
  3. กด Cmd + V (Mac) หรือ Ctrl + V (Windows) เพื่อวาง
    • โดยปกติ Figma จะวางไว้ ข้างหลัง ตัวที่เราเลือก ให้คุณกด ปุ่มลูกศรซ้าย (←) บนคีย์บอร์ด เพื่อเลื่อนตำแหน่งมันมาไว้ข้างหน้าสุดครับ

วิธีการลากวาง (Drag and Drop)

หากโครงสร้างเป็น Auto Layout คุณสามารถทำได้ดังนี้

  1. คลิกค้างที่วัตถุที่ต้องการเพิ่ม
  2. ลากเข้าไปในแถวตาราง (Row) จนเห็น เส้นสีฟ้าแนวตั้ง ปรากฏขึ้นที่ด้านหน้าสุดของช่อง “Action”
  3. ปล่อยเมาส์เพื่อวางวัตถุลงไป

ตรวจสอบโครงสร้าง Layer

ถ้าทำตามข้างบนแล้วไม่ได้ ให้เช็คที่แถบ Layers ด้านซ้ายมือครับ:

  • ดูว่าตัว “Row” นั้นเปิด Auto Layout ไว้หรือไม่ (สังเกตไอคอน ||= หรือ ||)
  • ถ้าเป็น Component Instance (ตัวลูกที่เป็นสีม่วงและล็อคไว้) คุณอาจจะเพิ่มเข้าไปตรงๆ ไม่ได้ ต้องไปเพิ่มที่ Main Component หรือทำการ Detach Instance ก่อน (แต่แนะนำให้แก้ที่ต้นฉบับจะดีกว่าครับ)

Gemini said

หากคุณต้องการเพิ่ม Cell (หรือส่วนประกอบภายใน) เข้าไปในแถวของตารางใน Figma โดยเฉพาะเมื่อมีการใช้ Auto Layout อยู่ มีวิธีทำง่ายๆ ดังนี้ครับ:

1. วิธีการแทรก Cell ข้างหน้า (ปุ่มลัด)

  1. เลือก Cell หรือ Component ที่คุณต้องการนำไปวาง (เช่น ไอคอน หรือช่องว่างอันใหม่) แล้วกด Cmd + C (Mac) หรือ Ctrl + C (Windows) เพื่อคัดลอก
  2. คลิกเลือก Cell แรก ที่อยู่ในแถวนั้น (ในภาพของคุณคือช่องที่มีไอคอนรูปตา)
  3. กด 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 เข้าไปแล้ว ถ้าช่องไฟดูเบียดกันเกินไป

  1. เลือกที่ตัว Row (แถว)
  2. ไปที่แผง Auto Layout ด้านขวา
  3. ปรับค่า Gap between items (ระยะห่างระหว่างช่อง) เพื่อให้ไอคอนดูไม่อึดอัดครับ

อ่านเพิ่มเติม