เผยแพร่เมื่อ 2026-08-20 · โดย ทีม MarkupGen
จาก Figma Auto Layout สู่ React: จากเฟรมสู่ Component
คำตอบสั้นๆ: คุณสมบัติ Auto Layout ของ Figma (direction, gap, padding, alignment) จะ map เป็น Flexbox CSS แบบเดียวกันใน React เหมือนกับเอาต์พุตอื่นๆ สิ่งที่ต่างออกไปคือทุกอย่างที่ React เพิ่มเข้ามา ได้แก่ การตัดสินใจว่าเฟรม Auto Layout ไหนควรกลายเป็น component ของตัวเอง การแม็ป variant ของ component ใน Figma ไปเป็น props และการจัดการกับ children ที่ซ้ำหรือเปลี่ยนแปลงตามเงื่อนไข
การแม็ป CSS ไม่เปลี่ยน — แต่ขอบเขตของ component เปลี่ยน
ถ้าคุณรู้อยู่แล้วว่า Auto Layout แม็ปเป็น Flexbox อย่างไร ครึ่งหนึ่งที่เกี่ยวกับสไตล์ก็จะคุ้นเคยดี direction กลายเป็น flex-direction, gap กลายเป็น gap, padding กลายเป็น padding, alignment กลายเป็น justify-content/align-items React ไม่ได้เปลี่ยนอะไรตรงนี้เลย
สิ่งที่ React เพิ่มเข้ามาคือโครงสร้างที่อยู่เหนือชั้น CSS — การตัดสินใจที่เอาต์พุต HTML/CSS แบบแบนราบไม่ต้องทำ
| แนวคิดใน Figma | สิ่งที่เทียบเท่าใน React |
|---|---|
| เฟรม Auto Layout ที่นำกลับมาใช้ซ้ำในหลายที่ | กลายเป็น component ของตัวเอง ไม่ใช่มาร์กอัปที่ซ้ำกัน |
| Variant ของ component ใน Figma (เช่น ขนาด/สถานะของปุ่ม) | Props ของ component (size, variant, disabled) |
| เฟรมที่มี instance ลูกซ้ำกัน (list, grid) | ใช้ .map() วนอาร์เรย์ของ props/เนื้อหา |
| การปรับขนาดแบบ "hug contents" กับ "fill container" | เลย์เอาต์ถูกจัดการด้วยกฎ flex ของ parent ไม่ใช่ width พิกเซลตายตัวใน component |
| เฟรม Auto Layout ที่ซ้อนกัน | ซ้อน component เฉพาะจุดที่การนำกลับมาใช้ซ้ำหรือการแยกตามตรรกะคุ้มค่าจริงๆ ไม่ใช่หนึ่ง component ต่อหนึ่งเฟรม |
จุดที่มักพลาดเมื่อแปลงด้วยมือ
- สร้าง component มากเกินไป. การเปลี่ยนทุกเฟรม Auto Layout ที่ซ้อนกันให้เป็นไฟล์ component แยกกัน ทำให้ได้ tree ลึกๆ ของ wrapper component บรรทัดเดียว ที่เพิ่มความอ้อมโดยไม่ได้เพิ่มการนำกลับมาใช้ซ้ำ เฟรมจะสมควรมี component ของตัวเองก็ต่อเมื่อถูกใช้ซ้ำที่อื่น หรือการแยกออกมาทำให้โค้ดอ่านง่ายขึ้นอย่างมีนัยสำคัญ
- ทำ variant mapping หายไป. Variant ของ component ใน Figma (เช่น สถานะ default/hover/disabled ของปุ่ม) ควรกลายเป็น props ไม่ใช่ component แยกกันสี่ตัวที่ hardcode ไว้ การข้ามขั้นตอนนี้ทำให้ปุ่มที่ควรนำกลับมาใช้ซ้ำได้เพียงตัวเดียว กลายเป็นมาร์กอัปที่ copy-paste ซ้ำสำหรับทุกสถานะ
- Hardcode สิ่งที่ควรเป็น dynamic. เฟรมที่ซ้ำสามครั้งในดีไซน์เพราะมีข้อมูลตัวอย่างสามรายการ ไม่ควรกลายเป็น JSX เดียวกันสามชุด แต่ควรเป็น component เดียวที่ render จากอาร์เรย์
- ใช้ width พิกเซลตายตัวในจุดที่ดีไซน์ตั้งใจให้ปรับขนาดแบบ fluid. พฤติกรรม "fill container" ของ Auto Layout ควรแปลงเป็นการกำหนดขนาดแบบ flex-grow/เปอร์เซ็นต์ใน CSS ของ component ไม่ใช่
widthตายตัวที่ทำลายเจตนา responsive ของเฟรมต้นฉบับ
MarkupGen จัดการเรื่องนี้อย่างไร
เอาต์พุต React ของ MarkupGen ใช้เวิร์กโฟลว์สี่ขั้นตอนเดียวกับฟอร์แมตอื่นๆ คือ ส่งออกเฟรมด้วยปลั๊กอิน ซึ่งจับโครงสร้าง สไตล์ รูปภาพ และความสัมพันธ์ระหว่าง component มาพร้อมกัน AI จะสร้างโค้ดจากโครงสร้างจริงนั้น ปรับแต่งเนื้อหา ฟอนต์ หรือเลย์เอาต์ในตัวแก้ไขภายในแอปหากจำเป็น แล้วจึงส่งออกแพ็กเกจสุดท้าย direction, gap, padding และ alignment ของ Auto Layout จะ map เป็นกฎ Flexbox ภายในแต่ละ component แบบเดียวกับที่เกิดขึ้นในเอาต์พุต CSS ธรรมดา และข้อจำกัดการปรับขนาดจะถูกส่งต่อมาเป็นพฤติกรรม responsive แทนที่จะเป็นขนาดตายตัว ทุกการเอ็กซ์พอร์ตยังได้รับคะแนนคุณภาพจาก AI โดยอัตโนมัติ เทียบพรีวิวที่ใช้งานจริงกับดีไซน์ต้นฉบับ ทำให้คุณมองออกได้ในทันทีว่าเอาต์พุตนั้นต้องดูซ้ำอีกครั้งก่อนใช้งานจริงหรือไม่
สำหรับขั้นตอนแบบละเอียดตั้งแต่ไฟล์ Figma ไปจนถึง React component ที่ใช้งานได้จริง — รวมถึงการเลือกฟอร์แมตเอาต์พุต — ดูได้ที่ Figma to React: A Practical Workflow
ลองใช้กับดีไซน์ของคุณเอง
การดูว่าโครงสร้าง Auto Layout ของดีไซน์จริงกลายเป็น React component อย่างไร คือวิธีที่เร็วที่สุดในการตัดสินว่าการแบ่ง component ตรงกับที่คุณจะสร้างเองด้วยมือหรือไม่ ลองใช้ MarkupGen ฟรี กับไฟล์ Figma ของคุณเอง หรือดูหน้า Figma to React converter เพื่อดูว่ามีอะไรรวมอยู่บ้าง