Designer Tools

Developers, have you ever wanted to verify that you’ve implemented UI designs to spec?

UX Designers, ever wanted to validate whether a color or layout is correct?

Designer Tools provides a suite of features to review and validate app specifications. Whether it be checking your keylines or that shade of blue, you’ll definitely want to add this app to your toolkit. Even if you provide redlines, these are a great way to verify each and every pixel.

Grid Overlay - Quickly toggle on-screen grids to check layouts for inconsistent spacing or mis-aligned elements. You can even customize the grid size and line colors.

Mockup Overlay - Display a mockup image over your app. This gives you a high-fidelity opportunity to see how the design spec matches the developed user interface. Choose from portrait or landscape overlays and tune the opacity for an effective comparison.

Color Picker - Use your finger to drag around a loupe and identity the hex codes of colors at the pixel level.

Screenshot details - Add a panel to all of your screenshots that displays information regarding the device, screen and Android version. QA teams will LOVE this.

Have ideas for another tool that we could include? Let us know by sending us an email!

Source code available on GitHub at https://github.com/0xD34D/DesignerTools

Các nhà phát triển, có bao giờ bạn muốn để xác minh rằng bạn đã thực hiện thiết kế giao diện người dùng để spec?

UX thiết kế, bao giờ muốn để xác định một màu hoặc bố trí là chính xác?

Công cụ thiết kế cung cấp một bộ tính năng để xem xét và xác nhận thông số kỹ thuật ứng dụng. Cho dù đó là kiểm tra keylines của bạn hoặc bóng màu xanh, bạn chắc chắn sẽ muốn thêm ứng dụng này để bộ công cụ của bạn. Thậm chí nếu bạn cung cấp redlines, đây là một cách tuyệt vời để kiểm tra từng pixel.

Lưới Overlay - Nhanh chóng chuyển đổi lưới trên màn hình để kiểm tra bố trí cho các yếu tố khoảng cách không phù hợp hoặc mis-liên kết. Bạn thậm chí có thể tùy chỉnh kích thước lưới điện và đường màu.

Mockup Overlay - Hiển thị hình mockup trên ứng dụng của bạn. Điều này cung cấp cho bạn một cơ hội với độ trung thực cao để xem như thế nào spec thiết kế phù hợp với giao diện người dùng phát triển. Chọn từ bức chân dung hoặc phong cảnh lớp phủ và điều chỉnh opacity cho một so sánh hiệu quả.

Color Picker - Sử dụng ngón tay của bạn để kéo xung quanh một kính lúp và nhận dạng mã hex của màu sắc ở mức pixel.

Chi tiết Ảnh chụp màn hình - Thêm một bảng điều khiển cho tất cả các ảnh chụp màn hình của bạn có hiển thị thông tin về các thiết bị, màn hình và phiên bản Android. đội QA sẽ yêu này.

Có những ý tưởng cho một công cụ khác mà chúng ta có thể bao gồm? Cho chúng tôi biết bằng cách gửi email cho chúng tôi!

mã nguồn có sẵn trên GitHub tại https://github.com/0xD34D/DesignerTools