จาก Breakpoint ใน Figma สู่ CSS Media Query: การแม็ปทำงานอย่างไร

คำตอบสั้นๆ: Figma ไม่มีแนวคิดเรื่อง breakpoint มาในตัวแบบที่ CSS มี ดีไซเนอร์จำลองความ responsive ด้วยการแยกเฟรมตามขนาดหน้าจอ หรือใช้การปรับขนาดแบบ fluid ของ Auto Layout (fill/hug) ที่ไม่ต้องใช้ media query เลย แนวทางที่ดีไซน์ใช้จะเป็นตัวกำหนดว่าเอาต์พุต CSS ต้องมีกฎ @media ชัดเจนหรือไม่

Figma ไม่มี breakpoint จริงๆ

ควรพูดให้ชัดเจนไปเลย เพราะนี่คือสมมติฐานที่คนมักเข้าใจผิด Figma ไม่มีฟีเจอร์ "ตั้ง breakpoint ตรงนี้" มาในตัวที่เทียบเท่ากับ media query ของ CSS สิ่งที่ดีไซเนอร์ทำจริงๆ แบ่งออกเป็นสองรูปแบบ และแต่ละแบบก็แปลงเป็น CSS ต่างกันมาก

รูปแบบที่ 1: แยกเฟรมตามขนาดหน้าจอ

แนวทางดั้งเดิมคือมีเฟรมแยกกันสำหรับเดสก์ท็อป แท็บเล็ต และมือถือ แต่ละเฟรมจัดวางด้วยมือที่ความกว้างของตัวเอง สิ่งนี้ map ตรงเข้ากับ breakpoint CSS ที่ชัดเจน เลย์เอาต์ของแต่ละเฟรมจะกลายเป็นสไตล์ภายในบล็อก @media (min-width: ...) ที่สอดคล้องกัน และหน้าที่ของนักพัฒนาคือตัดสินใจว่าค่า breakpoint จริงควรอยู่ตรงไหน (ให้ตรงกับความกว้างของเฟรม หรือใช้ breakpoint มาตรฐานอย่าง 768px/1024px) เพราะความกว้างของเฟรม Figma เป็นการตัดสินใจเชิงดีไซน์แบบปัดเศษ ไม่ใช่สเปกของ CSS

นี่คือแนวทางที่ควรใช้เมื่อเลย์เอาต์ ต่างกันในเชิงโครงสร้าง ระหว่างขนาดต่างๆ ไม่ใช่แค่จัดเรียงใหม่ แต่ต่างกันจริงๆ (sidebar ที่กลายเป็น bottom nav, กริด 3 คอลัมน์ที่กลายเป็นคอลัมน์เดียวพร้อมเนื้อหาที่สลับลำดับใหม่)

รูปแบบที่ 2: การปรับขนาดแบบ fluid ของ Auto Layout — มักไม่ต้องใช้ media query เลย

อีกรูปแบบหนึ่งอาศัยพฤติกรรมการปรับขนาดของ Auto Layout — "fill container" และ "hug contents" — ที่ตั้งไว้บนเฟรมเดียว แทนที่จะวาดเลย์เอาต์ทั้งหมดใหม่ในแต่ละความกว้าง แถวการ์ดที่ตั้งให้ wrap และเติมเต็มพื้นที่ที่มี, sidebar ที่ตั้งความกว้างคงที่ข้างพื้นที่เนื้อหาหลักแบบ "fill", ข้อความที่ไหลตามธรรมชาติภายในคอนเทนเนอร์ที่ยืดหยุ่นได้ — ไม่มีสิ่งไหนต้องใช้ breakpoint เลย นี่คือพฤติกรรม CSS แบบเดียวกับที่ flex-wrap, ความกว้างแบบเปอร์เซ็นต์ และ min-width/max-width ให้คุณได้โดยไม่ต้องใช้กฎ @media แม้แต่ข้อเดียว

เรื่องนี้ควรพูดถึงเพราะเป็น insight ที่มีค่ามากกว่าสำหรับการตรวจสอบ CSS ที่สร้างขึ้น นั่นคือ ไม่ใช่ทุกรายละเอียด responsive ที่ควรกลายเป็น media query ดีไซน์ที่อาศัยการปรับขนาดแบบ fluid ของ Auto Layout จะแปลงเป็น CSS ที่ fluid ตามธรรมชาติในช่วงความกว้างที่หลากหลาย การเพิ่ม breakpoint ที่ชัดเจนทับเข้าไปอีกมักเป็นงานที่ไม่จำเป็น เพราะเป็นการทำซ้ำพฤติกรรมที่เลย์เอาต์มีอยู่แล้ว

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

• เพิ่ม breakpoint ในจุดที่ CSS แบบ fluid ครอบคลุมอยู่แล้ว ทำให้ได้กฎ @media มากกว่าที่ดีไซน์ต้องการจริงๆ และสไตล์ชีตที่ดูแลรักษายากเกินกว่าที่เลย์เอาต์สมควรจะเป็น
• พลาด breakpoint ที่จำเป็นจริงๆ เมื่อดีไซน์มีเฟรมมือถือที่ต่างกันเชิงโครงสร้างจริงๆ แล้วพยายามฝืนให้เลย์เอาต์เดสก์ท็อปจัดเรียงใหม่เป็นสิ่งที่มันไม่เคยถูกออกแบบมาให้เป็น
• เลือกค่าพิกเซล breakpoint แบบสุ่มเอาเอง ที่ไม่ตรงกับทั้งความกว้างเฟรมของดีไซน์เองหรือสเกล breakpoint ที่โปรเจกต์มีอยู่แล้ว ทำให้เกิดค่าเฉพาะกิจที่ไม่มี CSS ส่วนอื่นใช้เลย

MarkupGen จัดการเรื่องนี้อย่างไร

พฤติกรรม responsive ถูกสร้างจากข้อจำกัดการปรับขนาดจริงของเฟรม แทนที่จะเพิ่มเป็นขั้นตอนแยกด้วยมือ — การตั้งค่า fill/hug ของ Auto Layout จะแปลงเป็น CSS แบบ fluid โดยอัตโนมัติ ตามความต่างแบบเดียวกับที่กล่าวไปข้างต้น สำหรับดีไซน์ที่มีเลย์เอาต์มือถือที่ต่างกันเชิงโครงสร้างจริงๆ (หรือต้องสร้างขึ้นจากเฟรมเดสก์ท็อปเฟรมเดียว) MarkupGen สามารถสร้างเลย์เอาต์มือถือหรือเดสก์ท็อปแยกกันด้วย AI ได้ — ดูวิธีการทำงานได้ที่ Figma Responsive Design: Auto Layout และ Constraints กำหนดเลย์เอาต์ Mobile/Desktop อย่างไร สำหรับการแม็ป Auto Layout ไปเป็น Flexbox ซึ่งเป็นพื้นฐานของเรื่องทั้งหมดนี้ ดูได้ที่ Auto Layout to CSS

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

วิธีที่เร็วที่สุดในการดูว่าดีไซน์ของคุณต้องการรูปแบบไหนจริงๆ คือลองรันผ่านระบบแล้วตรวจดู CSS ที่สร้างขึ้นว่ามีกฎ @media หรือไม่มีเลย ลองใช้ MarkupGen ฟรี กับไฟล์ Figma ของคุณเอง หรือดูหน้า Figma to HTML converter เพื่อดูว่ามีอะไรรวมอยู่บ้าง