Cách dùng Figma CSS sang Webflow
- Trong Figma, chọn một layer rồi mở Dev Mode → Code → CSS (hoặc chuột phải → Copy as → Copy as code → CSS). Bạn có thể copy nhiều layer cùng lúc.
- Dán CSS vào đây. Mỗi comment
/* Tên layer */sẽ trở thành một khối riêng. - Chọn có chuyển px sang rem hay không, và có giữ kích thước cố định hay không (thường bạn không cần giữ).
- Sao chép từng giá trị từ bảng Style panel, hoặc lấy CSS đã làm sạch để dùng cho code tùy chỉnh.
Vì sao CSS của Figma cần làm sạch trước khi dùng trong Webflow
Figma sinh ra CSS mô tả layer đúng như được vẽ trên canvas, bao gồm position: absolute với tọa độ left/top, chiều rộng và chiều cao pixel cố định, và các phần thừa từ auto-layout như flex: none; order: 0; flex-grow: 0;. Dán nguyên những thứ này vào Webflow sẽ tạo ra layout cứng nhắc, dễ vỡ trên màn hình nhỏ. Thứ bạn thực sự cần từ bàn giao thiết kế là quyết định thiết kế: cỡ chữ, độ đậm, line height, màu sắc, khoảng cách, bo góc và bóng đổ.
Những gì được chuyển đổi
| Đầu ra từ Figma | Thành | Lý do |
|---|---|---|
font-size: 32px | 2rem | rem tôn trọng cỡ chữ mặc định của trình duyệt người dùng và co giãn nhất quán. |
line-height: 120% hoặc 38.4px | 1.2 | Line-height không đơn vị sẽ tự co giãn theo cỡ chữ ở mọi nơi được kế thừa. |
letter-spacing: -0.64px | -0.02em | Khoảng cách chữ dạng em giữ tỷ lệ khi cỡ chữ thay đổi (typography linh hoạt). |
var(--Text-Primary, #141827) | #141827 + danh sách biến | Cho biết bạn cần tạo lại những biến Figma nào trong Variables panel của Webflow. |
position: absolute; left; top, flex: none | đã loại bỏ | Định vị theo canvas, không phải ý đồ layout. |
Ánh xạ sang Style panel của Webflow
Các giá trị được nhóm theo mục Style panel nơi bạn nhập chúng: Layout (display, direction, gap, alignment), Spacing (padding, margin), Size, Typography, Backgrounds, Borders và Effects (shadows, opacity). Trong Webflow, bạn có thể nhập đơn vị trực tiếp vào ô, nên 2rem hoặc 1.2 dùng được ngay.
Tìm hiểu thêm
Để khoảng cách và chữ tự thích ứng giữa mobile và desktop, hãy chuyển cặp giá trị Figma thành clamp() linh hoạt bằng Clamp Calculator. Với chuyển đổi đơn lẻ, dùng PX to REM, còn với icon thì dùng SVG to Webflow.
Cũng được tìm dưới tên: figma sang webflow, figma css webflow, figma dev mode css, webflow style panel, px sang rem, line height webflow, letter spacing em, bàn giao thiết kế figma.
Các công cụ dùng kèm tốt với Figma CSS sang Webflow
- Chuyển đổi mã màu — Dán bất kỳ màu CSS nào — HEX, rgb(), hsl(), hwb(), oklch() hoặc tên màu như tomato — và nhận ngay mọi định dạng còn lại, kèm bảng màu 50–950 sẵn sàng dùng.
- Tạo Box Shadow CSS — Xếp nhiều lớp bóng đổ, chỉnh độ lệch, blur, spread và độ trong suốt trên thẻ xem trước trực tiếp, rồi sao chép CSS box-shadow hoặc text-shadow.
- Chuyển hướng WordPress sang Webflow — Chuyển website từ WordPress sang Webflow sẽ thay đổi hầu hết các URL: đường dẫn bài viết có ngày tháng, trang lưu trữ /category/, dấu gạch chéo cuối và slug của trang.
- HTML & CSS sang Webflow — Dán HTML và CSS, nhấn Copy to Webflow rồi dán vào Designer.
Câu hỏi thường gặp
Tôi tìm CSS trong Figma ở đâu?
Vì sao chiều rộng và chiều cao bị loại bỏ?
Tôi có thể dán nhiều layer cùng lúc không?
/* Tên layer */ sẽ bắt đầu một khối mới, và mỗi khối có bảng Style panel riêng.