Choosing the Right Designer Tools Plan

Since version 5 introduces three different plans for Designer Tools, I thought it’d be helpful to explain what each one offers. This isn’t about convincing you which one to pick, it’s just a breakdown of what’s included and how the features work, so you can figure out what fits best for you.

All paid features are free to try ten times before you’ll need to upgrade to a paid plan. This way, you can test everything out and see if it’s a good fit for you.

Starter: The Essentials

Starter is where most people will begin, and honestly, it covers a lot of ground. Take the measurement tool, for example, it’s super handy for quickly measuring things on screen. If a button feels off or you’re wondering if two elements are aligned, the rulers and guidelines will give you precise measurements without much effort. Guidelines snap to selected elements, making it easy to align things perfectly.

Another feature that’s available for free, allows you to Compare Elements. Let’s say you’ve got two buttons side by side, and one feels just a bit taller or wider.Just hold down shift and click on the elements you want to compare, and you’ll see the differences in size and position. It’s a quick way to spot inconsistencies and make sure everything lines up.

Plus: Making your life even easier

The Plus plan builds on Starter by giving you more control over your tools and designs. One of the key features is the ability to hide the toolbar. It might sound small, but for people working on busy layouts, it’s a lifesaver—it frees up screen real estate so you can focus on your work without distractions.

Another big addition is the ability to customize grid systems. You can define your own grids to overlay on your website, making it easier to structure content and check alignment. Whether you’re working with a standard 12-column layout or something more custom, this feature lets you see it directly on your design.

One of my favorite Plus features is the ability to upload and overlay designs. You can upload your Figma or Photoshop exports and overlay them on top of your website using several different filters. The normal overlay filter shows how well your design matches the live site, while the difference filter highlights discrepancies. There’s also a wireframe filter, which lets you see just the outlines, and an enhanced overlay filter to show any differences even more clearly. If you’ve ever struggled with pixel-perfect comparisons, this will save you so much time.

Pro: Advanced Features for the Future

The Pro plan is still largely under development, but I didn’t want to keep any exciting features from you. That’s why I decided to make it available to anyone who feels it’s worth the extra cost, even though not all features are ready yet.

The Pro plan is for those who need advanced tools to go even further with their design work. It includes everything from Plus, and add a few more features to help you analyze and improve your designs.

First, an accessibility inspector. This tool will automatically highlight potential accessibility issues, like low contrast, missing alt text, and other common problems. Accessibility is a big focus for me, and I want to make it easier for everyone to create inclusive designs.

Another feature coming to Pro is the branding tool. It let you analyze the website’s design by breaking down which colors, text styles, and other elements that are being used. It’s great for ensuring consistency or just getting an overview of how everything fits together. It also gives tips on how to improve your design based on the analysis.

Hopefully, this gives you a clearer idea of what each plan offers and how the tools can help you. If you’re not sure where to start, Starter is always a solid choice, and you can explore the paid features before committing to a plan. No matter which tier you pick, my goal is to make Designer Tools something that makes your work easier, faster, and just a bit more fun. As always, feel free to reach out if you have any questions!