Create Pixel-Perfect websites with Designer Tools
Designer Tools is the ultimate browser extension for webdesigners, developers and anyone who loves to create stunning, pixel-perfect web designs. With Designer Tools, you can take your web design projects to the next level by adding a heap of essential development-features to your browser.
The Designer Tools extension gives you the tools you need to create pixel-perfect designs that meet the needs of all users. Whether you're a seasoned pro or just getting started, Designer Tools is the must-have extension for anyone who wants to create beautiful, accessible websites.
One tool to ruler them all
Measure, position and align with ease.
You probably recognize the rulers from various design tools; Now, they are available in the browser!
It becomes a lot easier to just select an element and compare it to its neighbors. It's immediately obvious if it's perfectly aligned, or if it still needs some tweaking.
Align elements with precision
Designer Tools makes it easy to align elements on your website. Use interactive guidelines to ensure that elements are perfectly aligned, and use the alignment tool to make sure
Master your grids
Designer Tools makes working with grids effortless. Customise and overlay grids on your website to help you create pixel-perfect designs. The grid tool makes it easy to create layouts that just look great.
Compare your website to a design
Recognise the struggle of comparing your website to a design mockup? Designer Tools can help you align your website with the design mockup, making it easy to create pixel-perfect websites that match your designer's vision.
Make your website accessible for all
The accessibility tool makes it easier to identify and fix issues that might make it difficult for some users to access or use your site. It helps you ensure that your website is accessible to everyone, regardless of their abilities.
Brand inspector
Soon you will be able to inspect the branding of any website. This will help you to get a better understanding of the color palette, typography and other branding elements used on a website.
It will offer tips to enhance your brand, refine your color palette, and streamline typography for a polished, consistent experience.
What's in the box?
Designer Tools is packed with features to help you create pixel-perfect websites that meet the needs of all users, while keeping your PM happy. Here are some other features you'll find in the extension:
Dark mode
What is a developer without dark mode? No need to worry, Designer Tools has you covered. You can choose between light and dark mode, or let the extension follow your system settings.
Language support
Besides English, Designer Tools is also available in Dutch, Chinese and Spanish. And more languages are coming soon!
Customizable
Designer Tools is fully customizable. You can adjust the colors, the size of the rulers.. even the thickness of the toolbar is adjustable.
Keyboard shortcuts
We know you love to work fast, so we've added keyboard shortcuts to make your life easier.
And much more...
We're constantly adding new features to Designer Tools. So, stay tuned for more updates!