Figma Auto Layout sang CSS: Ánh xạ sang Flexbox thế nào (và khi nào dùng Grid)

Nếu từng mở một file Figma và thấy "Auto Layout" được bật cho một frame, bạn đã tiếp xúc với thứ rất gần với CSS Flexbox — đội ngũ thiết kế Figma cố tình mượn đúng mô hình tư duy này. Direction, gap, padding và alignment gần như chuyển sang một-đối-một. Chỗ mà việc ánh xạ Figma-sang-CSS trở nên mập mờ là hành vi kích thước: "hug", "fill" và "fixed" mô tả một ý định, không phải một khai báo CSS duy nhất, và kết quả đúng phụ thuộc vào ngữ cảnh layout xung quanh phần tử đó. Hiểu được chỗ nào ánh xạ trực tiếp và chỗ nào không, chính là điều giúp bạn chuyển từ file thiết kế sang CSS dễ bảo trì, responsive mà không phải đoán mò từng giá trị bằng mắt.

Auto Layout thực sự kiểm soát điều gì

Auto Layout là cách Figma biến một frame thành một layout container thực sự thay vì chỉ là nhóm các hình được định vị tuyệt đối. Bật nó lên cho một frame, bạn sẽ có một loạt thuộc tính để cấu hình:

• Direction (hướng) — các phần tử con xếp theo chiều dọc hay chiều ngang.
• Spacing / gap (khoảng cách) — khoảng cách cố định giữa các phần tử con.
• Padding — khoảng cách giữa mép frame và các phần tử con, có thể cài riêng cho từng cạnh.
• Alignment (căn chỉnh) — cách các phần tử con xếp hàng dọc theo trục chính và trục phụ.
• Resizing behavior (cách thay đổi kích thước) — frame và các con của nó co theo nội dung, lấp đầy không gian sẵn có, hay giữ kích thước cố định.

Không có thuộc tính nào ở đây là ngẫu nhiên. Mỗi thuộc tính tồn tại vì nó tương ứng với thứ mà một layout engine thực sự cần biết — đó chính xác là lý do vì sao nó ánh xạ gọn gàng sang CSS Flexbox trong phần lớn trường hợp.

Figma Auto Layout sang Flexbox: bảng ánh xạ thuộc tính

Bảng này là phần cốt lõi thực dụng nhất của việc chuyển đổi Figma sang CSS. Phần lớn các dòng là đổi trực tiếp; một số dòng phụ thuộc vào ngữ cảnh, điều mà cột Ghi chú nêu rõ.

Lưu ý quan trọng: "Fill container" trong Figma không phải lúc nào cũng dịch ra một khai báo CSS duy nhất áp dụng chung. Việc nó nên trở thành flex: 1, width: 100%, hay align-self: stretch phụ thuộc vào việc phần tử đó nằm trong flex container, block container, hay grid — cùng một thuộc tính Figma có thể cần CSS khác nhau tùy vào phần tử cha.

Mô hình tư duy: Auto Layout Container → Flex Container

Khi bỏ qua giao diện Figma, các khái niệm khớp nhau trực tiếp:

Mọi frame Auto Layout đều là một flex container tiềm năng. Công việc thực sự là quyết định, với từng frame, hành vi kích thước của nó thực sự có nghĩa gì trong CSS tương ứng — nội dung sẽ trình bày tiếp theo.

Hug Contents, Fill Container và kích thước cố định

Hành vi kích thước là chỗ mà việc dịch thủ công Figma sang CSS thường sai nhất, vì Figma diễn đạt một ý định trong khi CSS đòi hỏi một khai báo cụ thể.

Hug contents

Một phần tử "hug contents" tự đặt kích thước dựa theo nội dung của nó — không có kích thước cố định và sẽ lớn lên hoặc co lại khi nội dung thay đổi. Trên web, tương đương gần nhất thường chỉ đơn giản là không đặt width hay height tường minh nào cả, vì các phần tử block và flex item vốn đã tự co giãn theo nội dung theo mặc định. Ở những chỗ cần tường minh, width: fit-content hoặc height: fit-content khá gần, nhưng không phải lúc nào cũng tương đương hoàn toàn: bên trong một flex container, một item không có flex-grow đã hành xử như "hug" mà không cần thêm CSS nào, nên việc thêm fit-content lên trên có thể thừa, hoặc ở một số trình duyệt khác biệt nhẹ so với hành vi mặc định.

/* Figma: Hug contents, Auto Layout theo chiều ngang */
.button {
  display: flex;
  width: fit-content; /* thường không cần thiết — flex item vốn đã co theo nội dung theo mặc định */
}

Fill container

Một phần tử "fill container" sẽ mở rộng để chiếm không gian sẵn có. CSS đúng hoàn toàn phụ thuộc vào phần tử cha:

• Bên trong flex container, theo trục chính: flex: 1 (hoặc flex-grow: 1).
• Bên trong flex container, theo trục phụ: align-self: stretch.
• Bên trong một phần tử cha dạng block: width: 100%.

/* Figma: Fill container, là con của một frame Auto Layout theo chiều ngang */
.sidebar-content {
  flex: 1;
}

Không có quy tắc "fill container → CSS" duy nhất nào áp dụng được ở mọi nơi. Nếu hiểu sai ngữ cảnh layout của phần tử cha, flex: 1 trên một phần tử không phải flex item sẽ không có tác dụng gì.

Fixed (kích thước cố định)

Kích thước cố định trong Figma nhìn chung ánh xạ sang width và/hoặc height tường minh trong CSS. Nhưng một giá trị pixel sao chép nguyên văn từ Figma thường không phải là mục tiêu đúng: hãy kiểm tra xem thiết kế có chủ ý là một ràng buộc cứng (width: 240px), hay là giới hạn cho một phần tử vốn linh hoạt (min-width / max-width, min-height / max-height). Xử lý mọi giá trị cố định như một width cứng là nguyên nhân phổ biến khiến layout không thích ứng được với nội dung thật hoặc các viewport khác nhau.

Auto Layout so với Constraints

Auto Layout và Constraints giải quyết những vấn đề liên quan nhưng khác nhau, và việc nhầm lẫn hai khái niệm này là nguồn lỗi dịch thuật thường gặp.

• Auto Layout kiểm soát cách các phần tử con của một frame được sắp xếp với nhau — direction, gap, padding, alignment và hành vi kích thước. Đây là thứ gần nhất tương đương với display: flex.
• Constraints kiểm soát cách một phần tử hành xử khi phần tử cha của nó đổi kích thước — được ghim vào trái/phải/trên/dưới/giữa, hoặc co giãn theo tỷ lệ. Constraints quan trọng nhất đối với các phần tử hoàn toàn không nằm trong một frame Auto Layout, hoặc để xác định chính frame Auto Layout đó hành xử ra sao bên trong một phần tử cha có kích thước cố định.

Trong thực tế, CSS cuối cùng của một phần tử thường cần thông tin từ cả hai: Auto Layout cho biết các thuộc tính flex của một container và các con của nó, trong khi constraints cho biết container đó nên được coi là cố định hay nên đổi kích thước cùng với chính phần tử cha của nó. Không thuộc tính nào trong hai thứ này, đứng riêng lẻ, cho ra bức tranh responsive đầy đủ.

Auto Layout hỗ trợ CSS responsive như thế nào

Auto Layout cung cấp tín hiệu thực sự hữu ích cho hành vi responsive, nhưng bản thân nó không tự động trở thành CSS responsive. Cần nói rõ ràng về những gì nó thực sự mang lại:

• Hành vi kích thước của Auto Layout (hug / fill / fixed) cho biết phần tử nào nên lớn lên, co lại, hay giữ nguyên — đó là nền tảng của một layout responsive, được dịch trực tiếp sang flex, width: 100%, hoặc một kích thước cố định.
• Constraints của Figma bổ sung thông tin về cách các phần tử nên hành xử khi container của chúng đổi kích thước, điều này quan trọng với mọi thứ không do Auto Layout chi phối.
• Không cái nào trong hai thứ này tự sinh ra breakpoint. Nếu layout của một thiết kế thực sự đổi hình dạng ở một số độ rộng nhất định — các cột xếp chồng lên nhau, navigation thu gọn lại — thì vẫn cần media query CSS, vì các frame của Figma thường chỉ đại diện cho một vài kích thước viewport cố định, chứ không phải toàn bộ dải giá trị giữa chúng.
• Giữa các kích thước mà nhà thiết kế thực sự chỉ định, kích thước fluid (phần trăm, flex, minmax(), clamp()) thường tái hiện hành vi dự định trung thực hơn so với việc thêm breakpoint để lấp đầy khoảng trống.

Mục tiêu là tái hiện đúng hành vi dự định của layout trên các viewport khác nhau, chứ không phải sao chép nguyên xi kích thước pixel từ frame Figma mà bạn tình cờ đang xem.

Khi nào CSS Grid là lựa chọn phù hợp hơn

Auto Layout là mô hình một trục: nó rất mạnh với các hàng và cột, kể cả khi lồng ghép nhiều cấp. Nhưng một số thiết kế thực sự mang tính hai chiều, và ép chúng vào Flexbox lồng nhau tạo ra code khó bảo trì hơn cả bản thiết kế gốc. Lựa chọn đúng phụ thuộc vào layout — Flexbox phù hợp với các bố cục một chiều (navigation, nhóm nút, một hàng thẻ, nội dung căn theo chiều dọc hoặc ngang), còn Grid phù hợp với bố cục hai chiều. Hãy chuyển sang CSS Grid khi bạn thấy:

• Một layout mà các item cần căn chỉnh theo cả hàng lẫn cột cùng lúc — ví dụ lưới thẻ (card grid), dashboard, hoặc thư viện ảnh.
• Hành vi rõ ràng kiểu "phần tử này chiếm hai cột" hoặc "chiếm hai hàng", điều mà Grid xử lý tự nhiên bằng grid-column / grid-row còn Flexbox không thể diễn đạt trực tiếp.
• Thiết kế mà số cột cần phản hồi theo chiều rộng khả dụng (repeat(auto-fit, minmax(...))) thay vì theo một danh sách breakpoint cố định.
• Các vùng chồng lấp hoặc xếp lớp trong cùng một lưới, việc này đơn giản với hệ thống đặt vị trí của Grid nhưng khá gượng ép với Flexbox.

Một quy tắc đơn giản: nếu Auto Layout của một frame Figma chỉ lồng nhau theo một hướng tại một thời điểm, Flexbox là bản dịch trung thực. Nếu bạn thấy mình đang dựng cả một lưới các frame Auto Layout chỉ để giả lập căn chỉnh theo hàng-cột, đó thường là dấu hiệu giao diện Figma đang bù đắp cho việc thiếu chế độ layout Grid hai chiều thực sự — và lúc đó, sinh ra CSS Grid thật sự sẽ hợp lý hơn.

Những lỗi thường gặp khi chuyển Auto Layout sang CSS

Ngay cả với ánh xạ rõ ràng, developer khi tự tay tái tạo Auto Layout vẫn thường vấp phải vài lỗi quen thuộc:

• Lạm dụng position: absolute. Tái tạo layout bằng cách ghim tọa độ x/y tuyệt đối lấy từ canvas Figma thay vì dịch Auto Layout thành display: flex — cách này khớp đúng pixel ở kích thước màn hình lúc đo, nhưng vỡ ngay khi nội dung hoặc kích thước màn hình thay đổi, vì nó bỏ qua toàn bộ ý nghĩa mà Auto Layout đã mã hóa sẵn.
• Alignment hỗn hợp bị làm phẳng. Figma cho phép từng phần tử con override alignment của cả nhóm; rất dễ nhìn qua loa rồi áp một giá trị align-items chung cho tất cả, làm mất các override riêng lẻ vốn cần align-self.
• Mập mờ giữa "hug" và "fill". Một frame co theo nội dung trông giống hệt một frame có chiều rộng cố định khi chỉ nhìn ở một kích thước màn hình, nhưng hành xử hoàn toàn khác khi nội dung hoặc kích thước màn hình thay đổi.
• Bỏ qua gap để dùng margin. Một số developer vẫn dùng mẹo margin thay vì gap, thói quen còn sót lại từ thời Flexbox chưa hỗ trợ tốt — điều này không còn cần thiết nữa vì gap đã được trình duyệt hỗ trợ rộng rãi, và việc bỏ qua nó lại tái tạo đúng những lỗi spacing mà gap sinh ra để giải quyết.
• Frame Auto Layout lồng nhau biến thành flex container lồng nhau một cách tùy tiện. Mỗi frame lồng nhau là một flex context riêng, và việc dịch một-đối-một theo kiểu máy móc có thể tạo ra nhiều phần tử wrapper hơn mức layout thực sự cần.
• Đặt padding sai phần tử. Rất dễ áp padding của frame vào một phần tử con thay vì vào container, làm sai lệch khoảng cách dựa trên gap giữa các phần tử anh em.
• Mặc định rằng chỉ riêng Auto Layout đã đủ làm layout responsive. Như đã trình bày ở trên, Auto Layout và constraints chỉ cung cấp thông tin cho hành vi responsive — chúng không thay thế được media query khi hình dạng của layout thực sự cần thay đổi.
• Lồng Flexbox để giả lập một lưới hai chiều. Nếu bạn đang xếp chồng các frame Auto Layout chỉ để căn chỉnh cả hàng lẫn cột, đó thường là dấu hiệu CSS Grid mới là mục tiêu phù hợp hơn.

Sử dụng Auto Layout trong quy trình Figma-to-code

Ánh xạ này về nguyên lý không khó hiểu, nhưng làm đúng cho từng frame, từng giá trị gap, từng container lồng nhau trong một file thiết kế thực tế — đồng thời còn phải diễn giải hướng, hành vi kích thước và thứ bậc giữa các frame — lại là công việc tốn thời gian. Đây chính xác là loại việc dịch thuật lặp đi lặp lại mà MarkupGen được xây dựng để giúp giải quyết. Quy trình gồm bốn bước: xuất frame từ Figma bằng plugin đi kèm, plugin này kéo cấu trúc, style và hình ảnh thẳng vào workspace của bạn; AI của MarkupGen dựng HTML và CSS từ chính cấu trúc đó, ánh xạ direction, gap, padding và alignment của Auto Layout sang một cấu trúc Flexbox tương ứng; bạn tinh chỉnh nội dung, font chữ và layout trực quan trong trình soạn thảo tích hợp; rồi xuất gói code cuối cùng. Các breakpoint responsive được sinh ra từ các ràng buộc resizing của thiết kế, và bạn chọn định dạng đầu ra — HTML/CSS thuần, Tailwind CSS, hoặc React components — tùy theo stack đang dùng. Cũng như với bất kỳ chuyển đổi tự động nào, nên rà soát lại hành vi kích thước trên các phần tử hug/fill/fixed và các breakpoint mà hệ thống suy luận ra — chúng là điểm khởi đầu tốt, không phải thứ thay thế cho việc kiểm tra kết quả so với thiết kế gốc. Nếu muốn bắt đầu từ một ví dụ chạy được thay vì một file trống, hãy thử công cụ chuyển Figma sang HTML của MarkupGen trên chính thiết kế của bạn, hoặc đọc hướng dẫn chuyển đổi Figma sang HTML đầy đủ để nắm toàn bộ quy trình từ đầu đến cuối.

Câu hỏi thường gặp

Figma Auto Layout được dịch sang CSS như thế nào? Direction, gap, padding và alignment ánh xạ trực tiếp sang flex-direction, gap, padding và justify-content/align-items. Hành vi kích thước — hug, fill và fixed — cũng ánh xạ sang CSS, nhưng khai báo chính xác phụ thuộc vào ngữ cảnh layout xung quanh, chứ không phải một phép đổi một-đối-một cố định.

Figma Auto Layout có giống CSS Flexbox không? Chúng có liên hệ chặt chẽ nhưng không giống hệt nhau. Auto Layout được xây dựng có chủ đích dựa trên các khái niệm của Flexbox, nên phần lớn thuộc tính chuyển đổi trực tiếp. Khác biệt chính là Figma diễn đạt kích thước như một ý định thiết kế (hug, fill, fixed), trong khi CSS đòi hỏi bạn phải chọn khai báo cụ thể tạo ra đúng ý định đó trong một ngữ cảnh nhất định.

"hug contents" trong CSS nghĩa là gì? Nghĩa là phần tử tự đặt kích thước theo nội dung của nó, thay vì có kích thước cố định hoặc bị kéo giãn. Trên web, đây thường là hành vi mặc định của các phần tử block và flex item không có chiều rộng tường minh, hoặc có thể được nêu rõ bằng width: fit-content / height: fit-content khi cần.

"fill container" trong CSS nghĩa là gì? Nghĩa là phần tử mở rộng để sử dụng không gian sẵn có trong phần tử cha của nó. Tùy ngữ cảnh, đó có thể là flex: 1 trên trục chính của một flex container, align-self: stretch trên trục phụ, hoặc width: 100% bên trong một phần tử cha dạng block — không có khai báo duy nhất nào luôn đúng trong mọi trường hợp.

Figma Auto Layout có tự động tạo ra CSS responsive không? Không. Hành vi kích thước của Auto Layout và constraints của Figma cung cấp tín hiệu hữu ích về cách các phần tử nên thích ứng, nhưng breakpoint cho những layout thực sự đổi hình dạng ở các độ rộng khác nhau vẫn cần được viết dưới dạng media query CSS.

Nên dùng CSS Grid hay Flexbox cho một thiết kế Figma? Điều đó phụ thuộc vào layout, chứ không phải cái nào "tốt hơn". Flexbox phù hợp với các bố cục một chiều — hàng, cột, navigation, nhóm nút. Grid phù hợp với những layout thực sự hai chiều, như dashboard hay lưới thẻ mà các phần tử cần căn chỉnh theo cả hàng lẫn cột cùng lúc.