
Bạn đã bao giờ gặp tình huống khi bàn giao file thiết kế mà bị developer phản hồi:
“Thiếu style cho text này”, “Màu này không nằm trong hệ thống”, hay “Khoảng cách giữa các button không thống nhất”?
Những lỗi nhỏ như vậy có thể khiến Design System mất tính nhất quán — và đó chính là lý do Design Lint ra đời.
Đây là plugin Figma giúp quét, phát hiện và sửa lỗi hệ thống (như thiếu style, sai màu, hoặc không đồng bộ component) chỉ trong vài giây.
1. Design Lint là gì? Dành cho ai?
Design Lint là một plugin mã nguồn mở giúp kiểm tra toàn bộ file thiết kế Figma để phát hiện các phần tử chưa áp dụng style (màu, text, hiệu ứng…).
Nó cực kỳ hữu ích trong giai đoạn kiểm tra trước khi bàn giao (handoff) hoặc khi bạn muốn đảm bảo tính nhất quán trong Design System.
Điểm hay là Design Lint không yêu cầu đăng nhập hay quản lý thư viện, chỉ cần chạy plugin là có thể bắt đầu quét và sửa lỗi ngay lập tức.
Điểm nổi bật của plugin:
- Phát hiện lỗi tự động: Tìm tất cả các lớp bị thiếu style như màu, text, hiệu ứng.
- Cập nhật theo thời gian thực: Khi bạn sửa lỗi trong Figma, plugin tự làm mới và cập nhật kết quả.
- Phân loại lỗi rõ ràng: Lỗi được hiển thị theo danh mục (màu, text, hiệu ứng…) giúp bạn lọc nhanh và xử lý dễ dàng.
- Tùy chọn xem theo layer: Cho phép kiểm tra cụ thể từng phần tử trong giao diện, đặc biệt hữu ích cho các component phức tạp.
- Xử lý hàng loạt: Có thể chọn “Select All” để sửa nhiều lỗi cùng lúc.
- Tối ưu cho file lớn: Dù là dự án với 10.000 layer, plugin vẫn hoạt động mượt mà trong vài giây.
- Không cần đăng nhập: Chạy độc lập, không yêu cầu tài khoản hay kết nối thư viện.
Phù hợp cho:
- UI/UX Designer cần đảm bảo file gọn gàng, chuẩn hóa trước khi bàn giao cho dev.
- Design System Manager muốn rà soát tính đồng bộ trong hệ thống thiết kế.
- Nhóm thiết kế làm việc chung trên cùng project, cần kiểm tra sự thống nhất giữa các component.
Bạn có thể tìm plugin bằng cách:
- Tìm kiếm “Design Lint” trên Figma Community hoặc vào link này.
- Hoặc truy cập trực tiếp plugin trên Figma.
2. Hướng dẫn sử dụng
Sau khi cài đặt plugin, bạn có thể sử dụng Dessign Lint với các bước đơn giản sau:
Bước 1: Mở file Figma → chuột phải → chọn Plugins → Design Lint để khởi chạy plugin.
Bước 2: Plugin sẽ quét toàn bộ file hoặc khung (frame) bạn đang chọn để tìm các phần tử chưa áp dụng style.
Bước 3: Các lỗi được liệt kê trong bảng kết quả phân loại theo nhóm lỗi (màu, text, hiệu ứng, corner radius…).
Bước 4: Chọn từng lỗi để plugin tự động đưa bạn đến đúng layer trong thiết kế hoặc dùng tùy chọn “Select All” để sửa đồng loạt. Với các layer đặc biệt (ví dụ minh họa hoặc texture), bạn có thể chọn “Ignore” hoặc “Ignore All” để bỏ qua.
Bước 5: Sau khi sửa, nhấn biểu tượng “Refresh” để plugin quét lại và cập nhật trạng thái mới.
3. Kết luận
Design Lint là “trợ lý kiểm định chất lượng” mà mọi designer nên có trước khi bàn giao thiết kế.
Plugin này tiết kiệm hàng giờ rà soát thủ công, đảm bảo mọi phần tử đều được áp dụng style, giữ cho file Figma sạch, chuẩn và chuyên nghiệp.
Dù bạn đang xây dựng Design System, thiết kế sản phẩm mới hay làm việc nhóm, Design Lint giúp đảm bảo tính đồng bộ, giảm lỗi và tăng hiệu quả trong toàn bộ quy trình thiết kế.
Nếu bạn từng gặp cảnh “dev fix tay từng màu vì thiếu style”, thì plugin này chính là cứu tinh của bạn.
