Mở đầu — vì sao bài này quan trọng
Bạn đã thiết kế xong một màn hình đẹp long lanh trong Figma. Bố cục cân đối, màu sắc chuẩn, typography sạch sẽ. Nhưng khi lập trình viên bắt tay vào code, họ gặp phải một mớ hỗn độn: icon bị mờ trên màn hình Retina, logo nặng tới 800KB làm chậm trang, ảnh xuất ra bị lệch pixel, tên file thì "asset_1_copy_final_v2.png" khiến không ai biết đó là cái gì. Kết quả là một buổi handoff lẽ ra chỉ mất 15 phút biến thành ba ngày đi lại chỉnh sửa.
Đây chính là lý do bài học về Asset Export (xuất tài nguyên) quan trọng đến mức nó xứng đáng là một mắt xích riêng trong quy trình handoff. Trong các bài trước bạn đã học cách annotate (chú thích) và dùng Dev Mode để mô tả cách một thành phần trông và hành xử. Nhưng annotation không thay thế được file thật. Icon, logo, minh họa, ảnh — tất cả đều phải rời khỏi Figma dưới dạng file mà trình duyệt và ứng dụng hiểu được, ở đúng định dạng, đúng độ phân giải, đúng tên gọi.
Một designer giỏi việc export tài nguyên tiết kiệm cho đội kỹ thuật hàng giờ đồng hồ, giảm dung lượng trang tải, và trực tiếp ảnh hưởng đến tốc độ website — thứ mà Google dùng để xếp hạng SEO. Nói cách khác, kỹ năng tưởng chừng "kỹ thuật vặt" này lại chạm thẳng đến trải nghiệm người dùng cuối và cả doanh thu. Bài này sẽ dạy bạn cây quyết định chọn định dạng, cách xuất chuẩn cho web và mobile, và những mẹo để không bao giờ bị lập trình viên phàn nàn nữa.
Khái niệm cốt lõi
Cây quyết định chọn định dạng
Trước khi export bất cứ thứ gì, câu hỏi đầu tiên luôn là: tài nguyên này thuộc loại nào? Trả lời đúng câu này thì 80% quyết định còn lại tự khắc rõ ràng.
SVG (Scalable Vector Graphics) — dùng cho icon, logo, và minh họa đơn giản (flat illustration). SVG là đồ họa vector, nghĩa là nó được mô tả bằng công thức toán học (đường thẳng, đường cong, hình khối) chứ không phải lưới điểm ảnh. Hệ quả tuyệt vời: nó phóng to vô hạn mà không bao giờ vỡ. Một icon SVG 24px hiển thị sắc nét như nhau trên điện thoại 320px và màn hình 4K. SVG cũng thường rất nhẹ, và có thể đổi màu bằng CSS (thuộc tính fill), tạo animation, hoặc nhúng thẳng vào HTML. Đây là lựa chọn mặc định cho mọi thứ có đường nét hình học.
PNG (Portable Network Graphics) — dùng cho ảnh raster (điểm ảnh) cần nền trong suốt, hoặc đồ họa phức tạp mà SVG không diễn tả nổi (minh họa nhiều lớp màu, hiệu ứng gradient tinh xảo, ảnh chụp cần cắt nền). PNG hỗ trợ kênh alpha (độ trong suốt) hoàn hảo, giữ chất lượng nguyên bản (không nén mất dữ liệu). Nhược điểm: dung lượng lớn, và vì là raster nên phải xuất nhiều độ phân giải (1x, 2x, 3x) để không bị mờ trên màn hình mật độ điểm cao.
JPG/JPEG — dùng cho ảnh chụp (photo) không cần nền trong suốt. Nén mất dữ liệu (lossy) nên dung lượng nhỏ hơn PNG nhiều, phù hợp ảnh banner, ảnh sản phẩm, hình nền. Đừng dùng JPG cho icon hay logo vì nó tạo nhiễu (artifact) quanh các cạnh sắc nét.
WebP / AVIF — định dạng ảnh hiện đại, nén tốt hơn cả JPG lẫn PNG với cùng chất lượng, hỗ trợ cả trong suốt lẫn ảnh chụp. Ngày nay đa số trình duyệt đều hỗ trợ, nên nhiều đội chuyển ảnh raster sang WebP để tiết kiệm băng thông. Thường thì lập trình viên sẽ tự convert từ PNG/JPG bạn cung cấp, nhưng bạn nên biết định dạng này tồn tại.
Sprite (SVG sprite / sprite sheet) — không phải một định dạng file mà là một kỹ thuật gộp. Thay vì để mỗi icon là một file riêng (dẫn đến hàng chục request HTTP), ta gộp nhiều icon vào một file duy nhất rồi hiển thị từng phần bằng CSS hoặc <use>. Điều này giảm số lần tải và giúp quản lý bộ icon tập trung.
Density và @2x, @3x — bài toán màn hình Retina
Màn hình ngày nay có mật độ điểm ảnh khác nhau. Một điểm ảnh logic (point) trên iPhone Retina thực chất được vẽ bằng 2 hoặc 3 điểm ảnh vật lý. Nếu bạn chỉ export ảnh raster ở kích thước 1x, nó sẽ bị làm mờ (blur) khi hiển thị trên màn hình 2x/3x. Vì vậy với PNG/JPG bạn cần xuất nhiều biến thể: @1x (kích thước gốc), @2x (gấp đôi), @3x (gấp ba). SVG hoàn toàn miễn nhiễm vấn đề này — đó là một lý do nữa để ưu tiên vector.
Tình huống thực tế
Ví dụ 1 — Sàn TMĐT Việt và cái logo 900KB
Một startup thương mại điện tử ở TP.HCM (gọi là "ChợXanh") thuê freelancer thiết kế lại giao diện. Designer xuất toàn bộ logo và icon dưới dạng PNG @3x, trong đó riêng file logo header nặng 900KB. Khi lên production, đội frontend đo được điểm PageSpeed của trang chủ chỉ đạt 42/100, thời gian tải trên mạng 4G ở khu vực tỉnh lên tới 6,8 giây. Tỷ lệ thoát trang (bounce rate) tăng vọt.
Sau khi truy nguyên, họ phát hiện logo là một hình vector đơn giản (chữ và một biểu tượng lá cây) mà lẽ ra chỉ nên là SVG khoảng 4KB. Chỉ riêng việc đổi logo từ PNG sang SVG đã giảm dung lượng 99% cho phần tử đó, và cùng với vài tối ưu khác, điểm PageSpeed nhảy lên 78/100, thời gian tải giảm còn 2,1 giây.
Bài học: Đừng bao giờ xuất logo hay icon hình học dưới dạng raster. Hãy nhìn vào bản chất của tài nguyên — nếu nó là đường nét, nó là SVG. Sai lầm này rất phổ biến ở designer mới vì họ quen "screenshot rồi export".
Ví dụ 2 — App gọi xe và bộ icon rời rạc
Một đội phát triển app gọi xe tại Đông Nam Á có bộ giao diện với gần 60 icon. Ban đầu mỗi icon là một file PNG riêng, xuất @1x @2x @3x, tổng cộng 180 file. Mỗi khi mở màn hình bản đồ, ứng dụng phải nạp hàng chục file ảnh, gây khựng nhẹ (jank) khi cuộn. Ngoài ra, khi thương hiệu đổi màu chủ đạo từ cam sang xanh, designer phải xuất lại toàn bộ 180 file bằng tay — mất gần hai ngày.
Đội quyết định chuyển toàn bộ sang SVG sprite. Tất cả 60 icon được gộp vào một file sprite duy nhất. Vì SVG có thể đổi màu bằng code, lần đổi thương hiệu tiếp theo lập trình viên chỉ cần sửa một biến màu — mất 5 phút thay vì hai ngày. Số lượng request giảm mạnh, và độ mượt khi cuộn được cải thiện rõ.
Bài học: Với bộ icon lớn dùng lặp lại khắp sản phẩm, SVG sprite vừa giảm request vừa cho phép đổi màu tập trung. Đây là khoản đầu tư nhỏ mang lại lợi ích dài hạn cho cả design lẫn dev.
Ví dụ 3 — Ảnh banner mờ trên iPhone của khách hàng cao cấp
Một agency thiết kế landing page cho thương hiệu mỹ phẩm cao cấp. Ảnh banner sản phẩm được export JPG ở đúng kích thước hiển thị 1x (750px rộng). Trên máy tính của designer (màn hình thường) trông sắc nét, nhưng khi giám đốc thương hiệu mở trên iPhone Pro (màn hình 3x), banner bị mờ nhòe, làm hình ảnh sản phẩm cao cấp trông rẻ tiền. Khách hàng phàn nàn gay gắt ngay trong buổi nghiệm thu.
Nguyên nhân: ảnh 750px hiển thị trên khung 750 điểm logic của màn 3x cần độ phân giải thực 2250px. Designer chỉ cần xuất lại ở @2x/@3x (hoặc cung cấp phiên bản rộng 2250px) là hết mờ. Họ cũng chuyển sang WebP để bù dung lượng tăng thêm.
Bài học: Luôn kiểm tra tài nguyên raster trên màn hình mật độ cao thật, không chỉ nhìn trên laptop. Với ảnh, hãy export ở độ phân giải cao hơn khung hiển thị và để dev xử lý responsive.
Hướng dẫn từng bước
Dưới đây là quy trình export chuẩn trong Figma, áp dụng cho cả web lẫn mobile.
Bước 1 — Phân loại tài nguyên. Duyệt qua thiết kế và gắn nhãn từng phần tử: icon/logo (vector) → SVG; đồ họa phức tạp/cần nền trong → PNG; ảnh chụp → JPG hoặc WebP. Quyết định này làm trước, không vừa export vừa nghĩ.
Bước 2 — Chuẩn bị layer sạch. Đặt tên layer/frame rõ ràng vì Figma dùng tên đó làm tên file. Gộp icon vào một frame vuông với padding đều (ví dụ icon 20px trong frame 24px) để mọi icon cùng kích thước xuất ra đồng nhất. Flatten hoặc outline stroke nếu cần để SVG gọn.
Bước 3 — Thiết lập export setting. Chọn phần tử, ở panel bên phải mở mục Export, bấm dấu cộng. Chọn định dạng (SVG/PNG/JPG). Với PNG/JPG, thêm nhiều dòng scale: 1x, 2x, 3x — Figma cho phép đặt hậu tố (suffix) như @2x, @3x để tên file tự chuẩn theo quy ước iOS.
Bước 4 — Tối ưu SVG. SVG Figma xuất ra thường thừa metadata. Bật tùy chọn "Outline text", "Simplify stroke", "Include id attribute" tùy nhu cầu. Với số lượng lớn, chạy qua công cụ như SVGO (SVG Optimizer) để giảm dung lượng thêm 30–60%.
Bước 5 — Nén ảnh raster. Với PNG/JPG, chạy qua TinyPNG hoặc ImageOptim trước khi giao. Một PNG 200KB thường nén xuống 60–80KB mà mắt thường không phân biệt được.
Bước 6 — Đặt tên và tổ chức thư mục. Dùng quy ước nhất quán: chữ thường, gạch nối, không dấu tiếng Việt, không khoảng trắng. Ví dụ icon-cart.svg, logo-primary.svg, banner-home@2x.webp. Nhóm theo thư mục icons/, logos/, images/.
Bước 7 — Bàn giao qua Dev Mode hoặc file nén. Trong Figma Dev Mode, lập trình viên có thể tự chọn phần tử và tải asset theo định dạng họ cần — đây là cách hiện đại nhất. Nếu đội chưa dùng Dev Mode, đóng gói thư mục có cấu trúc rõ ràng vào file zip kèm ghi chú ngắn.
Lỗi thường gặp & mẹo
Lỗi: Xuất icon/logo dưới dạng PNG. Đây là lỗi số một. Bất cứ thứ gì là đường nét đều nên là SVG. Chỉ dùng raster khi thật sự không thể vector hóa.
Lỗi: Quên @2x/@3x cho ảnh raster. Dẫn đến mờ trên màn Retina. Luôn cấu hình đủ scale ngay từ đầu, đừng đợi bị phàn nàn.
Lỗi: Tên file lộn xộn có dấu và khoảng trắng. Icon Giỏ Hàng.png sẽ gây lỗi đường dẫn trên server Linux và khiến dev khó chịu. Luôn dùng chữ thường, gạch nối, không dấu.
Lỗi: Không nén file trước khi giao. Bạn đẩy gánh nặng tối ưu cho dev, và nếu họ quên thì người dùng cuối gánh trang nặng. Nén là trách nhiệm của designer.
Lỗi: SVG chứa mã rác. SVG xuất thô từ Figma đôi khi có id ngẫu nhiên, clip-path thừa, khiến file phồng và khó style bằng CSS. Chạy SVGO để làm sạch.
Mẹo — dùng slice frame cho vùng cắt chính xác. Nếu bạn cần export một vùng cụ thể không trùng khớp với layer, dùng công cụ Slice trong Figma để định nghĩa vùng cắt chính xác đến pixel.
Mẹo — thống nhất một artboard "assets" riêng. Nhiều đội tạo một page riêng trong Figma tên "Assets/Export" gom mọi icon và ảnh cần xuất, đặt export setting sẵn. Khi cần bàn giao chỉ việc export cả page — nhanh và không sót.
Mẹo — hỏi dev họ muốn định dạng gì. Đội dùng React có thể muốn SVG dạng component; đội mobile muốn PNG @1x/@2x/@3x theo chuẩn nền tảng. Một câu hỏi trước khi export tiết kiệm rất nhiều lần làm lại.
Bài tập thực hành
- Phân loại định dạng. Lấy một màn hình bạn đã thiết kế (hoặc một app quen thuộc), liệt kê 10 tài nguyên trực quan trên đó và ghi định dạng đúng cho mỗi cái (SVG / PNG / JPG / WebP) kèm lý do một dòng.
- Export bộ icon. Trong Figma, tạo 6 icon đơn giản trong các frame vuông đồng kích thước. Cấu hình export SVG cho cả 6, xuất ra, rồi mở file bằng trình soạn thảo văn bản để xem mã. Chạy chúng qua SVGO (jakearchibald.github.io/svgomg) và so sánh dung lượng trước/sau.
- Kiểm tra Retina. Xuất một ảnh banner ở 1x, 2x, 3x. Đặt cả ba lên một màn hình mật độ cao (điện thoại của bạn) và ghi lại phiên bản nào bắt đầu sắc nét. Rút ra kết luận về độ phân giải tối thiểu cần cung cấp.
- Đặt tên và đóng gói. Lấy 10 file bất kỳ và đổi tên theo quy ước chữ thường-gạch-nối-không-dấu, sắp vào thư mục
icons/,logos/,images/. Viết một ghi chú handoff 3 dòng gửi kèm.
Tóm tắt
Asset export là mắt xích tưởng nhỏ nhưng ảnh hưởng trực tiếp đến tốc độ, chất lượng hiển thị và sự trơn tru của quá trình handoff. Nắm vững cây quyết định định dạng là chìa khóa: SVG cho mọi thứ là đường nét (icon, logo, minh họa phẳng) vì nó phóng to vô hạn và đổi màu bằng code; PNG cho đồ họa raster cần nền trong suốt; JPG/WebP cho ảnh chụp; và sprite để gộp bộ icon lớn nhằm giảm request và quản lý tập trung.
Với tài nguyên raster, đừng quên xuất @1x/@2x/@3x để không bị mờ trên màn hình Retina, và luôn nén file trước khi bàn giao. Đặt tên nhất quán (chữ thường, gạch nối, không dấu), tổ chức thư mục rõ ràng, và ưu tiên bàn giao qua Figma Dev Mode để lập trình viên tự lấy đúng định dạng họ cần. Ba tình huống thực tế ở trên — logo 900KB, bộ icon rời rạc, và banner mờ — đều bắt nguồn từ một quyết định export sai lệch nhỏ nhưng gây hậu quả lớn. Làm đúng ngay từ đầu, bạn không chỉ tiết kiệm thời gian cho cả đội mà còn trực tiếp nâng trải nghiệm người dùng cuối.