Figma Responsive Design: Auto Layout และ Constraints กำหนดเลย์เอาต์ Mobile/Desktop อย่างไร

เฟรม Figma ที่ดูถูกต้องทั้งบนเดสก์ท็อปขนาด 1440px และมือถือขนาด 375px ไม่ได้แปลว่าพฤติกรรม responsive ในช่วงระหว่างนั้นถูกกำหนดไว้แล้ว — Figma แสดงให้คุณเห็นแค่ภาพนิ่งสองภาพ ในขณะที่เบราว์เซอร์ต้องการกฎที่ระบุชัดเจนเพื่อเติมเต็มทุกขนาดหน้าจอที่ผู้เข้าชมจริงอาจมี การจะไปจากขั้น "สองเฟรมนี้ดูถูกต้องแล้ว" สู่เลย์เอาต์ที่ใช้งานได้จริงในทุกขนาดหน้าจอ ต้องอ่าน Auto Layout และ constraints ในฐานะสัญญาณของ responsive ไม่ใช่แค่การตั้งค่าด้านภาพ และต้องรู้ว่างานของ Figma จบตรงไหน แล้ว CSS ต้องเข้ามารับช่วงต่อตรงไหน บทความนี้จะอธิบายโมเดลความคิดเชิงปฏิบัติ สิ่งที่ควรตรวจสอบก่อนเริ่มสร้าง และจุดที่ผลลัพธ์ responsive อัตโนมัติของ MarkupGen เข้ามาช่วยได้

เฟรม Figma คือสเปกภาพ ไม่ใช่ CSS responsive

Figma แสดงผลเฟรมที่ความกว้างคงที่เพียงค่าเดียว ไม่มีอะไรในไฟล์ที่ "เล่น" ไปตามขนาดหน้าจอแบบที่เบราว์เซอร์ทำได้ — สิ่งที่ดูเหมือน responsive design ใน Figma แท้จริงแล้วเป็นเพียงชุดของกฎ (direction, gap และโหมดการกำหนดขนาดของ Auto Layout; constraints ของแต่ละ layer) ที่อธิบายเจตนา ไม่ใช่การจำลองเหตุการณ์ปรับขนาดที่ทำงานได้จริง CSS ต่างหากคือจุดที่เจตนานั้นกลายเป็นความจริง — flex-direction, gap, เปอร์เซ็นต์, clamp() และกฎ @media คือสิ่งที่ตอบสนองต่อความกว้างของ viewport จริง ๆ ควรมองไฟล์ Figma เป็นแหล่งข้อมูลที่บอกเจตนา ไม่ใช่สิ่งที่มี responsive code สำเร็จรูปอยู่แล้ว

เฟรม Mobile และ Desktop คือดีไซน์เดียวกัน ไม่ใช่สองดีไซน์แยกกัน

เป็นเรื่องปกติที่จะเห็นเฟรมเดสก์ท็อปกับเฟรมมือถือในไฟล์เดียวกัน ที่ถูกออกแบบห่างกันหลายสัปดาห์และค่อย ๆ เพี้ยนไปจากกันโดยไม่รู้ตัว — ระดับหัวข้อไม่ตรงกัน component variant ต่างกัน หรือมีเนื้อหาที่อยู่ในเฟรมหนึ่งแต่ไม่มีในอีกเฟรมโดยไม่มีเหตุผลชัดเจน แทนที่จะปล่อยแบบนั้น ควรมองทั้งสองเฟรมเป็นมุมมองของโมเดลเนื้อหาเดียวกัน — หัวข้อเดียวกัน component เดียวกัน (ใช้ variant สำหรับ state ต่าง ๆ แทนการก็อปปี้แยกกันแบบครั้งเดียวใช้) และข้อมูลชุดเดียวกันเรียงตามลำดับเดียวกัน เว้นแต่จะมีเหตุผลตั้งใจให้สลับลำดับ เมื่อทั้งสองเฟรมมีโครงสร้างพื้นฐานร่วมกันแบบนี้ สิ่งที่ CSS ต้องจัดการต่อส่วนใหญ่จะเป็นเรื่องเลย์เอาต์เท่านั้น — เปลี่ยนแถวให้เป็นคอลัมน์ ปรับจำนวนคอลัมน์ของกริด ยุบ UI รอง — มากกว่าที่จะต้องดูแลเทมเพลตสองชุดที่แยกจากกันโดยสิ้นเชิง

Auto Layout และ Constraints: อะไรที่ส่งผลต่อพฤติกรรม responsive จริง ๆ

direction, gap, padding และโหมดการกำหนดขนาด (hug, fill, fixed) ของ Auto Layout แม็ปเข้ากับ Flexbox ได้ใกล้เคียงมาก — ดูการแม็ปแบบละเอียดทีละคุณสมบัติได้ที่ Figma Auto Layout สู่ CSS สำหรับพฤติกรรม responsive โดยเฉพาะ โหมดการกำหนดขนาดคือสัญญาณที่สำคัญที่สุด — element แบบ "fill" กำลังบอกว่ามันควรโตหรือหดตามคอนเทนเนอร์ (flex: 1, width: 100%) ในขณะที่ "fixed" บอกว่าไม่ควรเป็นแบบนั้น

Constraints ตอบคำถามที่ต่างออกไป — element จะมีพฤติกรรมอย่างไรเมื่อ parent ของมันถูกปรับขนาด ซึ่งสำคัญที่สุดสำหรับทุกอย่างที่อยู่นอกเหนือ Auto Layout:

• Left / Right — ยึดติดกับขอบใดขอบหนึ่ง ใกล้เคียงกับระยะห่างคงที่ (fixed offset) ที่ไม่เปลี่ยนแปลงแม้ parent จะถูกปรับขนาด
• Left and Right — ยืดตามขนาดของ parent ใกล้เคียงกับ width: 100% ที่มี margin ด้านข้างคงที่
• Center — อยู่กึ่งกลางเสมอแม้ parent จะถูกปรับขนาด คล้ายกับ margin: 0 auto หรือการจัดวางแบบกึ่งกลางด้วย flex/grid
• Scale — ปรับขนาดตามสัดส่วนไปพร้อมกับ parent CSS ไม่มี declaration เดียวที่เทียบเท่าโดยตรง มักถูกจำลองด้วยหน่วยสัมพัทธ์ (relative units) แทน
• Top / Bottom (และค่าผสมต่าง ๆ) — ตรรกะเดียวกัน แต่ใช้กับแกนแนวตั้ง

ไฟล์งานจริงจำนวนมากใช้ทั้งสองอย่างร่วมกัน — Auto Layout ควบคุมว่าองค์ประกอบลูกของคอนเทนเนอร์จัดเรียงตัวอย่างไร ส่วน constraints ควบคุมว่าคอนเทนเนอร์นั้นมีพฤติกรรมอย่างไรเมื่ออยู่ภายในสิ่งที่ใหญ่กว่าตัวมันเอง

Breakpoint: จากเฟรม Figma ไปสู่ CSS จริง

Figma ไม่มีฟีเจอร์ breakpoint มาในตัว — ไม่มีการตั้งค่าที่บอกว่า "เปลี่ยนเลย์เอาต์เมื่อความกว้างต่ำกว่า 768px" สิ่งที่ไฟล์ให้คุณได้จริง ๆ มีอยู่สองแบบ คือเฟรมแยกกันสำหรับแต่ละขนาดหน้าจอ หรือเฟรม Auto Layout เดียวที่ปรับขนาดแบบยืดหยุ่นโดยไม่เปลี่ยนโครงสร้างเลย แบบไหนที่คุณกำลังเจออยู่จะเป็นตัวกำหนดว่า CSS ต้องมีกฎ @media ที่ชัดเจนหรือไม่ และงานส่วนใหญ่คือการเลือกค่า breakpoint ที่ตรงกับจุดที่เลย์เอาต์เปลี่ยนรูปทรงจริง ๆ ไม่ใช่ความกว้างของอุปกรณ์แบบสุ่มเอาเอง Figma Breakpoint สู่ CSS Media Query อธิบายทั้งสองรูปแบบอย่างละเอียด พร้อมจุดที่การแปลงด้วยมือมักผิดพลาด

แปลงการตัดสินใจใน Figma ให้เป็น CSS responsive

เมื่อสัญญาณฝั่ง Figma ชัดเจนแล้ว ฝั่ง CSS ก็เหลือแค่ชุดเครื่องมือเล็ก ๆ ที่นำไปใช้อย่างสม่ำเสมอ:

• Flexbox สำหรับเฟรม Auto Layout ส่วนใหญ่ — แถว คอลัมน์ nav bar รายการการ์ด
• Grid สำหรับเลย์เอาต์ที่เป็นสองมิติอย่างแท้จริง เช่น แดชบอร์ดหรือแกลเลอรีที่ Auto Layout กำลังจำลองด้วยแถวและคอลัมน์ที่ซ้อนกัน
• Media queries สำหรับจุดที่ รูปทรง ของเลย์เอาต์เปลี่ยนไปจริง ๆ — sidebar ที่กลายเป็น bottom nav กริดที่กลายเป็นคอลัมน์เดียว
• Fluid sizing (เปอร์เซ็นต์, minmax(), clamp()) สำหรับทุกอย่างที่อยู่ระหว่างความกว้างที่ดีไซเนอร์ระบุไว้จริง ๆ แทนที่จะเพิ่ม breakpoint เพื่อเติมช่องว่าง
• max-width เพื่อไม่ให้ข้อความและเนื้อหายืดกว้างจนอ่านยากบนหน้าจอขนาดใหญ่ แม้ว่าเฟรม Figma เองจะไม่ได้แสดงค่านี้ไว้ก็ตาม
• การ wrap และ stacking (flex-wrap, แถวที่กลายเป็นคอลัมน์) สำหรับเนื้อหาที่ควรจัดเรียงใหม่แทนที่จะถูกบีบให้เล็กลง
• การเปลี่ยนการแสดงผล (visibility) สำหรับสิ่งที่ควรแสดงเฉพาะบนมือถือหรือเดสก์ท็อปเท่านั้น ควรทำอย่างระมัดระวัง เพราะการซ่อน element ด้วย display: none จะลบมันออกจาก accessibility tree ด้วย ดู Figma สู่ HTML ที่เข้าถึงได้ (Accessible) หากเนื้อหาที่ซ่อนอยู่ยังต้องเข้าถึงได้ด้วยวิธีอื่น เช่น เมนูมือถือ

จุดพลาดที่พบบ่อยเมื่อแปลง Figma เป็นเลย์เอาต์ responsive

• มองมือถือเป็นแค่เดสก์ท็อปย่อส่วน แทนที่จะเป็นเลย์เอาต์ของตัวเองที่มีลำดับความสำคัญและโครงสร้างเฉพาะตัว
• Hardcode ค่าพิกเซล ทุกจุดที่เฟรม Figma แสดงตัวเลขเจาะจง แทนที่จะใช้การกำหนดขนาดแบบ fill/fixed และ constraints เพื่อตัดสินใจว่าอะไรควรคงที่จริง ๆ
• มองข้ามการ wrap ของข้อความ — หัวข้อหรือข้อความบนปุ่มที่พอดีหนึ่งบรรทัดในภาษาต้นฉบับ อาจต้อง wrap เป็นสองหรือสามบรรทัดเมื่อแปลเป็นภาษาที่ยาวกว่า และเลย์เอาต์ที่สมมติว่าข้อความมีบรรทัดเดียวเสมอก็จะพังทันที
• พึ่งพา absolute positioning เพื่อให้ตรงกับดีไซน์แบบพิกเซลต่อพิกเซล ซึ่งจะดูถูกต้องแค่ที่ความกว้างของเฟรมพอดี แต่จะพังในทุกความกว้างระหว่างนั้น
• ตรวจสอบเฉพาะความกว้างที่เฟรม Figma ถูกวาดไว้เท่านั้น เช่น 375px และ 1440px แล้วข้ามทุกอย่างที่อยู่ระหว่างนั้น ซึ่งเป็นจุดที่ปัญหาจริง ๆ ส่วนใหญ่เกิดขึ้น

เช็กลิสต์สำหรับส่งต่องานให้นักพัฒนา

ก่อนที่จะเริ่มทำ responsive behavior จากไฟล์ Figma ควรตรวจสอบสิ่งเหล่านี้โดยตรงในดีไซน์ แทนที่จะสมมติเอาเอง:

• มีเฟรมอะไรอยู่บ้าง และมือถือกับเดสก์ท็อปตั้งใจให้เป็นเนื้อหาเดียวกันที่จัดโครงสร้างใหม่ หรือเป็นประสบการณ์ที่ต่างกันจริง ๆ
• การตั้งค่า Auto Layout ของแต่ละเฟรม — direction, gap, padding และโหมดการกำหนดขนาดขององค์ประกอบที่ต้องปรับขนาด
• Constraints ของทุกอย่างที่อยู่นอก Auto Layout โดยเฉพาะ element ที่ยึดติดกับขอบหรืออยู่กึ่งกลาง
• ระยะห่างและตัวอักษร (typography) ที่แต่ละความกว้างของเฟรม — ปรับขนาดตามหรือคงที่?
• Component variants — component นั้นมี variant สำหรับมือถือแยกต่างหากหรือไม่ หรือเป็น component เดียวกันที่คาดว่าจะปรับตัวเอง
• อะไรที่ต่างกันจริง ๆ ระหว่างเฟรมมือถือและเดสก์ท็อป และความต่างแต่ละจุดนั้นตั้งใจให้เป็นแบบนั้น หรือเป็นแค่ความเพี้ยนที่เกิดจากการแก้ไขไฟล์ต่างเวลากัน

MarkupGen ทำให้พื้นฐาน responsive เป็นอัตโนมัติได้อย่างไร

ทุกการ export เริ่มต้นจากการตั้งค่า Auto Layout และ resizing constraints ของเฟรมนั้น ๆ เอง ไม่ใช่รายการ breakpoint แบบทั่วไป — direction, gap และ padding ถูกคงไว้ตรงตามเดิม และการกำหนดขนาดแบบ fill/hug จะถูกแปลงเป็น CSS แบบ fluid ทำให้ผลลัพธ์ปรับขนาดได้ตามขนาดหน้าจอต่าง ๆ โดยไม่ต้องเขียน media query ด้วยมือในเลย์เอาต์ส่วนใหญ่

สำหรับดีไซน์ที่มือถือต้องการโครงสร้างที่ต่างออกไปจริง ๆ — เมนูนำทางแบบเรียงซ้อนแทนแนวนอน การจัดเรียง hero ใหม่ หรือการซ่อน sidebar — ตัวแก้ไขภายในแอปสามารถสร้างเลย์เอาต์ Mobile หรือ Desktop แยกต่างหากสำหรับหน้าปัจจุบันจาก HTML/CSS ที่มีอยู่ พร้อม media query ของตัวเอง คุณตรวจสอบก่อนนำไปใช้ได้ และหลังจากนั้นขนาดหน้าจอของผู้เข้าชมจะเป็นตัวกำหนดว่าเลย์เอาต์ไหนถูกแสดง ไม่ว่าจะเป็นแบบไหน ผลลัพธ์เน้น HTML แบบ semantic มากกว่า <div> ที่ซ้อนกันเป็นชั้น ๆ ไม่ว่าจะเป็น Vanilla CSS, Tailwind, Bootstrap, Bulma, Materialize หรือ Pico พร้อมคะแนนคุณภาพจาก AI โดยอัตโนมัติในทุกการ export ทั้งหมดนี้ไม่ได้มาแทนที่เช็กลิสต์ด้านบน — มันเป็นเพียงจุดเริ่มต้นที่สร้างจากสัญญาณจริงของดีไซน์ ซึ่งยังคุ้มค่าที่จะตรวจสอบเหมือนกับที่คุณตรวจสอบการทำ responsive แบบอื่น ๆ ก่อนนำไปใช้งานจริง

หากอยากดูว่าไฟล์ Figma ของคุณเองแสดงผล responsive อย่างไรบนทั้งสองขนาดหน้าจอ ลองใช้ ตัวแปลง Figma to HTML — หรือแปลงตรงเป็น React ถ้านั่นคือสแต็กที่คุณใช้ — ฟรี ไม่ต้องใช้บัตรเครดิต

คำถามที่พบบ่อย

ดีไซน์ Figma ควรจัดการเลย์เอาต์ Mobile และ Desktop อย่างไร? มองทั้งสองอย่างเป็นดีไซน์เดียวกันที่แสดงผลที่สองความกว้าง — เนื้อหา หัวข้อ และ component เดียวกัน แทนที่จะเป็นไฟล์สองไฟล์ที่ไม่เกี่ยวข้องกัน Auto Layout และ constraints อธิบายว่าโครงสร้างร่วมนั้นควรปรับตัวอย่างไร ส่วนความต่างเชิงโครงสร้างที่แท้จริง เช่น เมนูที่ยุบตัวหรือ hero ที่จัดเรียงใหม่ จะถูกทำให้เกิดขึ้นด้วย CSS media queries

Auto Layout และ Constraints ใน Figma ทำให้ดีไซน์เป็น responsive โดยอัตโนมัติหรือไม่? ไม่ ทั้งสองอย่างอธิบายเพียงเจตนา — element ควรมีขนาดหรือพฤติกรรมอย่างไรเมื่อคอนเทนเนอร์เปลี่ยนไป — แต่เจตนานั้นยังต้องถูกแปลงเป็น Flexbox, Grid, fluid sizing หรือ media queries ใน CSS จริง ทั้ง Figma และเครื่องมือแปลงใด ๆ ก็ไม่ได้สร้างการตัดสินใจ responsive ทุกอย่างให้เองโดยอัตโนมัติ

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

Auto Layout กับ Constraints ใน Figma ต่างกันอย่างไร? Auto Layout ควบคุมว่าองค์ประกอบลูกของเฟรมจัดเรียงตัวอย่างไร — direction, gap, padding, การกำหนดขนาด — ใกล้เคียงกับ display: flex มากที่สุด ส่วน Constraints ควบคุมว่า element มีพฤติกรรมอย่างไรเมื่อ parent ของมันถูกปรับขนาด เช่น ยึดติดกับขอบ อยู่กึ่งกลาง หรือปรับสเกล ซึ่งสำคัญที่สุดสำหรับ element ที่อยู่นอก Auto Layout หรือสำหรับการที่เฟรม Auto Layout เองวางตัวอยู่ภายในสิ่งที่ใหญ่กว่า

มือถือกับเดสก์ท็อปควรแยกเป็นไฟล์ Figma คนละไฟล์หรือไม่? ไม่จำเป็น และการเก็บไว้ในไฟล์เดียวกันโดยใช้ component ร่วมกันมักช่วยให้จับความเพี้ยนได้ง่ายกว่า สิ่งที่สำคัญกว่าโครงสร้างไฟล์คือทั้งสองเฟรมเป็นตัวแทนของโมเดลเนื้อหาเดียวกันหรือไม่ — component และลำดับชั้นเดียวกัน โดยมีเลย์เอาต์ ไม่ใช่เนื้อหา เป็นสิ่งที่เปลี่ยนไประหว่างสองเฟรมนั้น

ควรตรวจสอบอะไรบ้างก่อนทำดีไซน์ Figma ให้เป็น responsive? เฟรมที่มีอยู่ทั้งหมด การตั้งค่า Auto Layout และ constraints ของแต่ละเฟรม การเปลี่ยนแปลง (หรือไม่เปลี่ยนแปลง) ของระยะห่างและตัวอักษรระหว่างเฟรม component มี variant สำหรับมือถือแยกต่างหากหรือไม่ และความต่างระหว่างเฟรมมือถือกับเดสก์ท็อปจุดไหนที่ตั้งใจ ไม่ใช่ความเพี้ยนที่เกิดขึ้นโดยบังเอิญ