Auto Layout ใน Figma แปลงเป็น CSS Flexbox ได้อย่างไร (และเมื่อไหร่ที่ยังต้องใช้ Grid)

ถ้าคุณเคยเปิดไฟล์ Figma แล้วเห็นเฟรมไหนเปิด "Auto Layout" อยู่ นั่นแปลว่าคุณกำลังมองเห็นสิ่งที่ใกล้เคียงกับ Flexbox มาก ๆ อยู่แล้ว เพราะทีมออกแบบของ Figma ตั้งใจหยิบยืมแนวคิดนี้มาโดยตรง การเข้าใจการแม็ปกันนี้ไม่ใช่แค่เรื่องรู้ไว้ใช่ว่า แต่มันคือสิ่งที่ทำให้คุณแปลงจากไฟล์ดีไซน์ไปเป็น CSS ที่ใช้งานได้จริง โดยไม่ต้องมานั่งกะระยะห่างทุกค่าด้วยสายตา

Auto Layout ควบคุมอะไรบ้าง

Auto Layout คือวิธีที่ Figma ทำให้เฟรมหนึ่งทำตัวเหมือน layout container จริง ๆ แทนที่จะเป็นแค่กลุ่มของรูปทรงที่วางตำแหน่งแบบ absolute เมื่อเปิดใช้งานกับเฟรมใดเฟรมหนึ่ง คุณจะได้คุณสมบัติมาปรับตั้งค่าดังนี้

• Direction — องค์ประกอบลูกเรียงตัวในแนวตั้งหรือแนวนอน
• Spacing / gap — ระยะห่างคงที่ระหว่างองค์ประกอบลูกแต่ละตัว
• Padding — พื้นที่ระหว่างขอบเฟรมกับองค์ประกอบลูก ตั้งค่าแยกแต่ละด้านได้
• Alignment — องค์ประกอบลูกเรียงตัวตามแนวแกนหลักและแกนขวางอย่างไร
• พฤติกรรมการปรับขนาด — เฟรมและองค์ประกอบลูกจะหดตามเนื้อหา ขยายเต็มพื้นที่ที่มี หรือคงขนาดคงที่

ไม่มีคุณสมบัติไหนถูกกำหนดขึ้นมาแบบสุ่มสี่สุ่มห้า แต่ละอย่างมีอยู่เพราะสอดคล้องกับข้อมูลที่ layout engine จริง ๆ ต้องรู้ ซึ่งเป็นเหตุผลว่าทำไมมันถึงแม็ปเข้ากับ CSS ได้อย่างเป็นระเบียบ

การแม็ปโดยตรงกับ Flexbox

คุณสมบัติ Auto Layout ของ Figma	เทียบเท่ากับ CSS Flexbox
Direction (แนวตั้ง/แนวนอน)	flex-direction: column / row
ระยะห่างระหว่างองค์ประกอบ	gap
Padding	padding
การจัดเรียงตามแกนหลัก	justify-content
การจัดเรียงตามแกนขวาง	align-items
หดตามเนื้อหา (Hug)	width: fit-content / height: fit-content
ขยายเต็มคอนเทนเนอร์ (Fill)	flex: 1 หรือ width: 100% / height: 100%
ขนาดคงที่	ระบุ width / height ตรง ๆ

พอเห็นตารางนี้แล้วก็เข้าใจได้ทันทีว่าทำไม Auto Layout ถึงรู้สึกเป็นธรรมชาติสำหรับใครก็ตามที่รู้จัก Flexbox อยู่แล้ว และทำไม Flexbox ถึงรู้สึกเป็นธรรมชาติสำหรับดีไซเนอร์ที่เริ่มต้นจาก Figma เพราะทั้งสองอย่างกำลังอธิบาย box model เดียวกัน เพียงแค่ใช้ชื่อเรียกต่างกัน

จุดที่มักพลาดเมื่อแปลงด้วยมือ

แม้ว่าการแม็ปจะชัดเจน แต่นักพัฒนาที่สร้าง Auto Layout ขึ้นใหม่ด้วยมือก็มักสะดุดกับรายละเอียดซ้ำ ๆ เดิม ๆ

• Alignment แบบผสมถูกทำให้แบนราบ. Figma อนุญาตให้องค์ประกอบลูกแต่ละตัว override การจัดเรียงของกลุ่มได้ การมองผ่าน ๆ แล้วใส่ค่า align-items เดียวให้ทุกอย่างจึงทำให้เสีย override เฉพาะตัวที่ควรใช้ align-self ไป
• ความกำกวมระหว่าง "hug" กับ "fill". เฟรมที่ตั้งให้หดตามเนื้อหาจะดูเหมือนเฟรมความกว้างคงที่ทุกประการเมื่อดูที่ viewport ขนาดใดขนาดหนึ่ง แต่พฤติกรรมจะต่างกันโดยสิ้นเชิงเมื่อเนื้อหาหรือขนาดหน้าจอเปลี่ยนไป การเดาผิดตรงนี้เป็นสาเหตุทั่วไปที่ทำให้เลย์เอาต์พังเมื่อเจอเนื้อหาจริง
• ข้าม gap ไป. นักพัฒนาบางคนยังคงใช้เทคนิค margin แทน gap ซึ่งเป็นความเคยชินจากคำแนะนำ Flexbox ยุคเก่า ทั้งที่ตอนนี้ gap ได้รับการรองรับจากเบราว์เซอร์อย่างกว้างขวางแล้ว การทำแบบนั้นไม่จำเป็นอีกต่อไป และยังทำให้บั๊กเรื่องระยะห่างที่ gap ถูกสร้างมาเพื่อแก้กลับมาอีกครั้ง
• เฟรม Auto Layout ที่ซ้อนกันกลายเป็น flex container ที่ซ้อนกันแบบไม่มีแผน. เฟรมที่ซ้อนกันแต่ละชั้นคือ flex context ของตัวเอง การแปลแบบตรงตัวหนึ่งต่อหนึ่งอาจสร้างองค์ประกอบ wrapper มากเกินกว่าที่เลย์เอาต์ต้องการจริง ๆ
• Padding ถูกใส่ผิดองค์ประกอบ. ง่ายมากที่จะใส่ padding ของเฟรมลงในองค์ประกอบลูกแทนที่จะเป็นคอนเทนเนอร์ ซึ่งทำให้ระยะห่างที่อิงกับ gap ระหว่างองค์ประกอบพี่น้องผิดเพี้ยนไป

เมื่อไหร่ที่ Flexbox ไม่ใช่ตัวเลือกที่ถูกต้อง — ให้ใช้ Grid

Auto Layout เป็นโมเดลแกนเดียว มันทำงานได้ดีมากกับแถวและคอลัมน์ รวมถึงการซ้อนกันหลายชั้น แต่ดีไซน์บางแบบเป็นสองมิติอย่างแท้จริง การพยายามยัดมันเข้าไปใน Flexbox ที่ซ้อนกันจึงทำให้ได้โค้ดที่ดูแลรักษายากกว่าตัวดีไซน์เองเสียอีก ให้เปลี่ยนไปใช้ CSS Grid เมื่อคุณเจอสิ่งเหล่านี้

• เลย์เอาต์ที่องค์ประกอบต้องจัดเรียงให้ตรงกัน ทั้ง แถวและคอลัมน์ในเวลาเดียวกัน เช่น การ์ดกริด แดชบอร์ด หรือแกลเลอรีรูปภาพ
• พฤติกรรมที่ระบุชัดเจนแบบ "องค์ประกอบนี้กินพื้นที่สองคอลัมน์" หรือ "สองแถว" ซึ่ง Grid รองรับได้โดยตรงด้วย grid-column / grid-row แต่ Flexbox ไม่สามารถแสดงออกได้โดยตรง
• ดีไซน์ที่จำนวนคอลัมน์ควรปรับตามความกว้างที่มีอยู่ (repeat(auto-fit, minmax(...))) แทนที่จะยึดตามรายการ breakpoint ที่ตายตัว
• พื้นที่ที่ซ้อนทับหรือเป็นชั้น ๆ ภายในกริดเดียวกัน ซึ่งทำได้ตรงไปตรงมาด้วยระบบการจัดวางของ Grid แต่ค่อนข้างฝืนถ้าใช้ Flexbox

กฎง่าย ๆ ที่ใช้ได้คือ ถ้า Auto Layout ของเฟรม Figma ซ้อนกันในทิศทางเดียวเสมอในแต่ละครั้ง Flexbox ก็เป็นการแปลที่ตรงตามต้นฉบับ แต่ถ้าคุณพบว่าตัวเองกำลังสร้างกริดของเฟรม Auto Layout ขึ้นมาเพียงเพื่อจำลองการจัดเรียงแบบแถว-คอลัมน์ นั่นมักเป็นสัญญาณว่า UI ของ Figma กำลังชดเชยการที่มันไม่มีโหมดเลย์เอาต์ Grid สองมิติแบบเนทีฟ ซึ่งในกรณีนั้นควรสร้าง CSS Grid จริง ๆ ขึ้นมาแทน

MarkupGen จัดการเรื่องนี้ให้อัตโนมัติได้อย่างไร

การแม็ปนี้เป็นที่เข้าใจกันดีอยู่แล้ว แต่การทำให้ถูกต้องในทุกเฟรม ทุกค่า gap และทุกคอนเทนเนอร์ที่ซ้อนกันในไฟล์ดีไซน์จริงนั้นเป็นงานที่น่าเบื่อ และนี่คืองานแปลที่ทำซ้ำ ๆ ประเภทที่ MarkupGen ถูกสร้างขึ้นมาเพื่อกำจัดออกไปโดยเฉพาะ ขั้นตอนการทำงานมีสี่ขั้นตอน คือ ส่งออกเฟรมจาก Figma ด้วยปลั๊กอินคู่กัน ซึ่งจะดึงโครงสร้าง สไตล์ และรูปภาพเข้ามาในเวิร์กสเปซของคุณโดยตรง จากนั้น AI ของ MarkupGen จะสร้าง HTML และ CSS จากโครงสร้างจริงนั้น โดยแม็ป direction, gap, padding และ alignment ของ Auto Layout ไปเป็นโครงสร้าง Flexbox ที่เทียบเท่ากันโดยอัตโนมัติ แทนที่จะปล่อยให้เป็นการเดาด้วยมือ จากนั้นคุณปรับแต่งเนื้อหา ฟอนต์ และเลย์เอาต์แบบเห็นภาพในตัวแก้ไขภายในแอป แล้วจึงส่งออกแพ็กเกจโค้ดสุดท้าย breakpoint สำหรับ responsive จะถูกสร้างขึ้นอัตโนมัติจากข้อจำกัดการปรับขนาดของดีไซน์ และคุณสามารถเลือกรูปแบบผลลัพธ์ได้ตามสแต็กที่ใช้งาน ไม่ว่าจะเป็น HTML/CSS ธรรมดา, Tailwind CSS หรือ React components การส่งออกแต่ละครั้งยังได้รับคะแนนคุณภาพจาก AI โดยอัตโนมัติ ทำให้คุณเห็นได้ในทันทีว่าโค้ดที่สร้างขึ้นพร้อมใช้งานจริงหรือยัง ผลลัพธ์เน้นให้ได้ HTML ที่สะอาดและมีความหมายเชิงความหมาย (semantic) โดยไม่มี <div> ซ้อนกันเกินจำเป็น ซึ่งสำคัญทั้งต่อการดูแลรักษาโค้ดและต่อ SEO

ลองใช้กับดีไซน์ของคุณเอง

การเข้าใจการแม็ป Auto Layout ไปเป็น Flexbox ช่วยให้คุณตรวจสอบโค้ดที่สร้างขึ้นได้เร็วขึ้น และมองออกได้ดีขึ้นว่าดีไซน์แบบไหนที่จำเป็นต้องใช้ Grid จริง ๆ หากคุณอยากข้ามขั้นตอนการแปลด้วยมือไปเลย ลองใช้ MarkupGen ฟรีกับไฟล์ Figma ของคุณเอง หรืออ่านคู่มือการแปลง Figma เป็น HTML แบบเต็ม เพื่อดูขั้นตอนการทำงานแบบครบวงจร