Figma เลย์เอาต์อัตโนมัติเทียบกับ CSS Flexbox และ Grid: ปิดช่องว่างระหว่างการออกแบบกับโค้ด
วิธีที่เค้าโครงอัตโนมัติของ Figma แมปกับ CSS flexbox และ grid (ทิศทาง ช่องว่าง การเติม การกอด การเติม การห่อ) และตำแหน่งที่แตกต่างกัน ดังนั้นการออกแบบจึงรอดพ้นจากการส่งมอบ
หลัก Takeaway
เลย์เอาต์อัตโนมัติของ Figma มีพฤติกรรมคล้ายกับ CSS flexbox มาก: แมปทิศทางไปยังทิศทางแบบยืดหยุ่น, ช่องว่างถึงช่องว่าง, การขยายไปยังช่องว่างภายใน, "เนื้อหากอด" เพื่อปรับขนาดตามเนื้อหา, "เติมคอนเทนเนอร์" เพื่อขยายแบบยืดหยุ่นหรือเต็มความกว้าง และตัดเป็น flex-wrap โฟลว์กริดของเลย์เอาต์อัตโนมัติสอดคล้องกับตาราง CSS ความแตกต่างจะปรากฏขึ้นตามขนาดต่ำสุดและสูงสุด การตัดข้อความ การจัดแนวพื้นฐาน และเบรกพอยท์ที่ตอบสนอง ดังนั้นโปรดตรวจสอบสิ่งเหล่านั้นอย่างชัดเจนเมื่อส่งมอบ
การทำแผนที่
คู่มือของ Figma อธิบายเฟรมเลย์เอาต์อัตโนมัติที่จัดเรียงรายการย่อยตามทิศทาง ระยะห่าง การเติมและการจัดตำแหน่ง โดยมีโฟลว์แนวนอน แนวตั้ง และตาราง และตัวเลือกเสริม แต่ละอันมีค่าใกล้เคียงกันของ CSS:
กอด เติมเต็ม และแก้ไข
ใน Figma เฟรมที่ตั้งค่าให้กอดเนื้อหาจะปรับขนาดตามลูก ๆ ของมัน และเฟรมลูกที่ตั้งค่าให้เติมคอนเทนเนอร์ที่ยืดออกเพื่อเติมเต็มพื้นที่ว่าง Figma ตั้งข้อสังเกตว่าหากตั้งค่าให้เด็กเติม ผู้ปกครองจะไม่สามารถกอดไปในทิศทางนั้นได้อีกต่อไป ใน CSS สิ่งที่เทียบเท่าคือการกำหนดขนาดตามเนื้อหา (อัตโนมัติหรือเนื้อหาที่พอดี) และดิ้น: 1 หรือความกว้าง: 100% คู่มือ flexbox ของ MDN อธิบายว่า flex-grow, flex-shrink และ flex-basis กระจายพื้นที่อย่างไร ซึ่งเป็นด้าน CSS ของแนวคิดเดียวกัน
ที่ช่องว่างปรากฏขึ้น
จุดบกพร่องในแฮนด์ออฟส่วนใหญ่มาจากบางพื้นที่:
- ขนาดต่ำสุดและสูงสุด: ตั้งค่าไว้ในทั้งสองตำแหน่ง หรือข้อความและคอนเทนเนอร์มีพฤติกรรมแตกต่างกันเมื่อสุดขั้ว
- ข้อความ: ความสูงของบรรทัด การตัด และการตัดทอนจะแตกต่างกันระหว่างการแสดงข้อความ Figma และเบราว์เซอร์
- การจัดแนวพื้นฐาน: CSS สามารถจัดแนวตามข้อความพื้นฐาน ตรวจสอบว่าสิ่งนี้มีจุดประสงค์อย่างไร
- ลูกสัมบูรณ์: "ละเว้นเค้าโครงอัตโนมัติ" ของ Figma (เดิมคือตำแหน่งสัมบูรณ์) แมปกับตำแหน่ง: สัมบูรณ์ในพาเรนต์ที่มีตำแหน่ง
- การตอบสนอง: เฟรมเค้าโครงอัตโนมัติไม่มีเบรกพอยต์ กำหนดการเปลี่ยนแปลงเค้าโครงในแต่ละความกว้าง
กริด
ใช้โฟลว์ตารางของเลย์เอาต์อัตโนมัติสำหรับเลย์เอาต์สองมิติที่แท้จริง และแมปเข้ากับตาราง CSS ซึ่ง MDN อธิบายว่าเป็นระบบสำหรับการจัดวางเนื้อหาในแถวและคอลัมน์ แถวแบบยืดหยุ่นที่ห่อไม่เหมือนกับตาราง: รายการในแถวที่ห่อไม่เรียงกันเป็นคอลัมน์
การเคลื่อนไหวเป็นช่องว่างที่ใหญ่กว่า
เลย์เอาต์แมปได้ดีพอสมควรตั้งแต่ Figma ถึง CSS การเคลื่อนไหวไม่ได้: การเปลี่ยนต้นแบบจะต้องถูกสร้างขึ้นใหม่ในโค้ด และสถานะมักจะหายไป นั่นคือเครื่องมือช่องว่างที่มีรันไทม์ เช่น ExodeUI (เราสร้างมันขึ้นมา) และ Rive ที่อยู่สำหรับส่วนประกอบแบบโต้ตอบ
คีย์ Principles ที่ต้องจำ
- ทิศทางเค้าโครงอัตโนมัติ ช่องว่าง ช่องว่างภายใน และตัดแผนที่ไปยังเฟล็กซ์บ็อกซ์
- การปรับขนาดเนื้อหากอด as; เติม µ ดิ้น: ความกว้าง 1 หรือ 100%
- แมปโฟลว์กริดกับกริด CSS
- ตรวจสอบขนาดขั้นต่ำ/สูงสุด ข้อความ เส้นพื้นฐาน และเบรกพอยท์ที่แฮนด์ออฟ
- การเคลื่อนไหวและสถานะเป็นช่องว่างระหว่างการออกแบบกับโค้ดที่ใหญ่กว่า
คำถามที่พบบ่อย
แหล่งที่มา
- Guide to auto layout — Figma ศูนย์ช่วยเหลือ
- Basic concepts of flexbox — MDN เว็บเอกสาร
- Basic concepts of grid layout — MDN เว็บเอกสาร