Bố cục tự động Figma so với Flexbox và lưới CSS: Thu hẹp khoảng cách từ thiết kế đến mã
Cách bố cục tự động của Figma ánh xạ tới hộp linh hoạt và lưới CSS (hướng, khoảng cách, khoảng đệm, ôm, lấp đầy, bao bọc) và những điểm chúng khác nhau, để thiết kế tồn tại trong quá trình chuyển giao.
Điểm chính
Bố cục tự động của Figma hoạt động giống như CSS flexbox: ánh xạ hướng tới hướng flex, khoảng cách với khoảng cách, phần đệm với phần đệm, "Ôm nội dung" để định cỡ theo nội dung, "Đổ vào vùng chứa" để tăng trưởng linh hoạt hoặc toàn bộ chiều rộng và bọc thành flex-wrap. Luồng lưới của bố cục tự động tương ứng với lưới CSS. Sự khác biệt xuất hiện với kích thước tối thiểu và tối đa, cách ngắt dòng văn bản, căn chỉnh đường cơ sở và các điểm dừng đáp ứng, vì vậy hãy kiểm tra chúng một cách rõ ràng khi chuyển giao.
Bản đồ
Hướng dẫn của Figma mô tả các khung bố cục tự động sắp xếp các phần tử con theo hướng, khoảng cách, phần đệm và căn chỉnh, với các luồng ngang, dọc và lưới cũng như một lớp bọc tùy chọn. Mỗi cái có một CSS tương đương:
Ôm, lấp đầy và cố định
Trong Figma, một khung được đặt để ôm nội dung sẽ thay đổi kích thước dựa trên các phần tử con của nó và một khung con được đặt để lấp đầy các vùng chứa để lấp đầy không gian có sẵn; Figma lưu ý rằng nếu đứa trẻ được đặt để lấp đầy, cha mẹ không thể ôm theo hướng đó nữa. Trong CSS, các giá trị tương đương là định cỡ dựa trên nội dung (tự động hoặc vừa với nội dung) và flex: 1 hoặc chiều rộng: 100%. Hướng dẫn flexbox của MDN giải thích cách phân bổ không gian flex-grow, flex-shrink và flex-basis, đây là khía cạnh của cùng một ý tưởng với CSS.
Nơi khoảng cách xuất hiện
Hầu hết các lỗi chuyển giao đều xuất phát từ một số lĩnh vực:
- Kích thước tối thiểu và tối đa: đặt chúng ở cả hai vị trí hoặc văn bản và vùng chứa hoạt động khác nhau ở mức cực đoan.
- Văn bản: chiều cao dòng, ngắt dòng và cắt ngắn khác nhau giữa kết xuất văn bản Figma và trình duyệt.
- Căn chỉnh đường cơ sở: CSS có thể căn chỉnh theo đường cơ sở của văn bản; kiểm tra xem điều này đã được dự định như thế nào.
- Con tuyệt đối: "Bỏ qua bố cục tự động" (trước đây là vị trí tuyệt đối) của Figma ánh xạ tới vị trí: tuyệt đối trong cha mẹ được định vị.
- Khả năng phản hồi: khung bố cục tự động không có điểm dừng; xác định cách bố cục thay đổi ở mỗi chiều rộng.
Lưới
Sử dụng luồng lưới của bố cục tự động cho bố cục hai chiều thực sự và ánh xạ nó tới lưới CSS, mà MDN mô tả là một hệ thống bố trí nội dung theo hàng và cột. Các hàng linh hoạt được bao bọc không giống như một lưới: các mục trong hàng được bao bọc không xếp thành các cột.
Chuyển động là khoảng cách lớn hơn
Bố cục bản đồ hợp lý từ Figma đến CSS. Chuyển động thì không: quá trình chuyển đổi nguyên mẫu phải được xây dựng lại trong mã và các trạng thái thường bị mất. Đó là các công cụ bổ sung với thời gian chạy, chẳng hạn như ExodeUI (chúng tôi tạo ra) và Rive, địa chỉ cho các thành phần tương tác.
Nguyên tắc chính cần nhớ
- Tự động bố trí hướng, khoảng cách, phần đệm và gói bản đồ vào flexbox
- Ôm ≈ kích thước nội dung; Điền ≈ flex: chiều rộng 1 hoặc 100%
- Ánh xạ luồng lưới tới lưới CSS
- Kiểm tra kích thước tối thiểu/tối đa, văn bản, đường cơ sở và điểm dừng khi chuyển giao
- Chuyển động và trạng thái là khoảng cách lớn hơn giữa thiết kế và mã hóa
Câu hỏi thường gặp
Nguồn
- Guide to auto layout — Trung tâm trợ giúp Figma
- Basic concepts of flexbox — Tài liệu web MDN
- Basic concepts of grid layout — Tài liệu web MDN