DesignFlow: Công cụ thiết kế trong trình duyệt được ghim trong Chrome
DesignFlow, được phát triển bởi Régis Cardoso (DSR), là một tiện ích mở rộng trên Chrome giúp hợp nhất các nhiệm vụ thiết kế dựa trên trình duyệt vào một không gian làm việc bên cạnh cho các nhà thiết kế UI/UX và các nhà phát triển frontend. Nó tập trung vào việc kiểm tra, chỉnh sửa trực tiếp, kiểm tra khả năng tiếp cận và trích xuất tài sản để giảm thiểu số lượng công cụ bên ngoài cần thiết trong quá trình đánh giá giao diện. Tiện ích mở rộng sử dụng Bảng bên của Chrome để luôn sẵn có trong khi bạn duyệt web, nhấn mạnh việc xử lý tại chỗ để bảo vệ dữ liệu dự án, và phù hợp với các chuyên gia thích quy trình làm việc trình duyệt một cửa mà không cần chuyển đổi ứng dụng.
DesignFlow nhắm đến quy trình làm việc trong trình duyệt với giao diện dock bên
Ứng dụng chạy bên trong API Bảng bên của Chrome để các công cụ luôn hiển thị trong khi trang chính không bị cản trở. Nó được xây dựng trên Manifest V3 và yêu cầu một phiên bản Chrome hỗ trợ API bảng đó. Tiện ích mở rộng đóng gói cùng một giao diện bảng cho Windows, macOS, Linux và ChromeOS, điều này giữ cho môi trường kiểm tra nhất quán trên các nền tảng máy tính để bàn và tránh mở các cửa sổ ứng dụng riêng biệt trong quá trình xem xét giao diện.
DesignFlow xử lý dữ liệu thiết kế cục bộ để hạn chế tiếp xúc bên ngoài
Nhà phát triển đã triển khai một kiến trúc ưu tiên quyền riêng tư xử lý mẫu màu, kiểm tra DOM và đóng gói tài sản bên trong trình duyệt, và công cụ không gửi lịch sử điều hướng hoặc dữ liệu thiết kế đến các máy chủ bên ngoài. Cách tiếp cận cục bộ này sử dụng các API trình duyệt gốc để thực hiện các tác vụ lấy mẫu và xuất trên máy của người dùng, điều này giữ cho các tệp ZIP đã xuất và tài sản đã trích xuất dưới sự kiểm soát của người dùng thay vì được truyền đến các dịch vụ bên thứ ba.
Chỉnh sửa, kiểm tra và trích xuất trong trình duyệt sử dụng các API trình duyệt cụ thể và công cụ theo lô
Tiện ích mở rộng cung cấp một trình chỉnh sửa CSS trực quan cho phép sửa đổi khoảng cách, đệm, z-index và kích thước trên DOM trực tiếp, cùng với một trình quét phông chữ hover-to-inspect cho các kiểu và kích thước. Color Studio tích hợp API EyeDropper và hỗ trợ kéo và thả các tệp hình ảnh cục bộ để trích xuất bảng màu. Asset Exporter thực hiện quét theo lô một trang và đóng gói SVG và hình ảnh raster vào một tệp ZIP, trong khi Responsive Breakpoint Tester hiển thị các bản xem trước cạnh nhau với cuộn đồng bộ cho các kiểm tra bố cục.
DesignFlow phù hợp với những nhà thiết kế ưa thích quy trình làm việc tập trung vào quyền riêng tư trên một trình duyệt duy nhất
Ứng dụng này là sự lựa chọn thực tế cho các nhà thiết kế UI/UX và các nhà phát triển frontend, những người thích làm việc trong Chrome và giữ dữ liệu cục bộ, nhờ vào sự tích hợp Side Panel và mô hình xử lý cục bộ. Một sự đánh đổi rõ ràng là sự phụ thuộc vào một phiên bản Chrome hỗ trợ API Side Panel, điều này có thể hạn chế việc sử dụng trong các môi trường chạy các phiên bản trình duyệt cũ hơn hoặc bị khóa.
