Đăng ngày 2026-08-20 · Tác giả Đội ngũ MarkupGen
Chuyển Figma Auto Layout sang React: Từ frame đến component
Trả lời nhanh: các thuộc tính Auto Layout của Figma (direction, gap, padding, alignment) ánh xạ sang cùng một CSS Flexbox trong React như ở bất kỳ đâu khác. Điểm khác biệt nằm ở mọi thứ React thêm vào phía trên: quyết định frame Auto Layout nào trở thành component riêng, ánh xạ các variant component trong Figma sang props, và xử lý những phần tử con lặp lại hoặc thay đổi theo điều kiện.
Ánh xạ CSS không đổi — ranh giới component mới là chuyện khác
Nếu bạn đã biết Auto Layout ánh xạ sang Flexbox như thế nào, thì nửa phần styling ở đây khá quen thuộc: direction trở thành flex-direction, gap trở thành gap, padding trở thành padding, alignment trở thành justify-content/align-items. React không thay đổi gì trong số đó.
Điều React thêm vào là cấu trúc phía trên lớp CSS — những quyết định mà một bản xuất HTML/CSS phẳng không cần phải đưa ra:
| Khái niệm trong Figma | Tương đương trong React |
|---|---|
| Một frame Auto Layout dùng lại ở nhiều chỗ | Một component riêng, không phải markup lặp lại |
| Các variant component trong Figma (ví dụ size/state của button) | Props của component (size, variant, disabled) |
| Một frame có các instance con lặp lại (danh sách, lưới) | .map() trên một mảng props/nội dung |
| Resizing "hug contents" so với "fill container" | Layout do rule flex của component cha xử lý, không phải width tính bằng pixel cố định trong component |
| Frame Auto Layout lồng nhau | Component lồng nhau chỉ khi việc tái sử dụng hoặc tách biệt logic thực sự có lý do — không phải mỗi frame một component |
Những chỗ dễ sai khi dịch thủ công
- Chia quá nhiều component. Biến mỗi frame Auto Layout lồng nhau thành một file component riêng tạo ra một cây sâu gồm toàn các wrapper component một dòng, thêm vào sự gián tiếp mà không thêm tái sử dụng. Một frame chỉ xứng đáng có component riêng nếu nó được dùng lại ở chỗ khác hoặc nếu tách nó ra giúp code dễ đọc hơn rõ rệt.
- Đánh mất ánh xạ variant. Các variant component trong Figma (ví dụ trạng thái default/hover/disabled của một button) vốn phải trở thành props, không phải bốn component hardcode riêng biệt. Bỏ qua bước này biến một button tái sử dụng được thành markup copy-paste cho từng trạng thái.
- Hardcode thứ lẽ ra phải động. Một frame lặp lại ba lần trong thiết kế chỉ vì có ba item mẫu không nên trở thành ba bản copy của cùng một JSX — nó nên trở thành một component render từ một mảng.
- Width pixel cố định trong khi thiết kế muốn resize linh hoạt. Hành vi "fill container" của Auto Layout nên chuyển thành flex-grow hoặc sizing theo phần trăm trong CSS của component, không phải một
widthcố định phá vỡ ý đồ responsive của frame gốc.
MarkupGen xử lý việc này như thế nào
Đầu ra React của MarkupGen theo đúng quy trình bốn bước như các định dạng khác: xuất frame bằng plugin, plugin này nắm bắt cấu trúc, style, hình ảnh và quan hệ component cùng lúc; AI dựng code từ chính cấu trúc thật đó; tinh chỉnh nội dung, font hay layout trong trình soạn thảo tích hợp nếu cần; xuất gói code cuối cùng. Direction, gap, padding và alignment của Auto Layout ánh xạ sang các rule Flexbox bên trong mỗi component giống hệt như trong bản xuất CSS thuần, và các ràng buộc resizing được chuyển tiếp thành hành vi responsive thay vì kích thước cố định. Mỗi lần xuất còn nhận được điểm chất lượng AI tự động so sánh bản preview trực tiếp với thiết kế gốc, giúp bạn nhận ra ngay liệu một bản xuất có cần xem lại trước khi triển khai hay không.
Để xem toàn bộ các bước từ file Figma đến component React chạy được — bao gồm cả cách chọn định dạng đầu ra — xem Figma to React: A Practical Workflow.
Thử ngay trên thiết kế của bạn
Xem cách cấu trúc Auto Layout của một thiết kế thật biến thành component React là cách nhanh nhất để đánh giá việc chia component có khớp với cách bạn sẽ tự tay dựng hay không. Dùng thử MarkupGen miễn phí trên file Figma của chính bạn, hoặc xem trang công cụ chuyển Figma sang React để biết những gì bạn nhận được.