Every year I do an audit.
I go through every tool I'm paying for, every resource I've downloaded, every plugin sitting in my Figma toolbar. I ask the same question about each one: if I had to rebuild my setup from scratch tomorrow, would this make the first cut?
This is the list that would make the first cut in 2026. Every tool here is free — not "free tier with severe limitations" but actually, genuinely free for commercial design work.
I'm not going to explain what every tool is. You can Google that. I'm going to tell you why it's on this list and what would make me remove it.
The Figma Foundation
Figma (free tier)
Three active projects. Unlimited drafts. Access to the entire Figma Community. This is enough to run a serious freelance design practice or do your best work at a job.
The free tier limitation that actually affects people: three active projects. The workaround: use your drafts folder for everything in progress, and only move things to a project when they're being actively collaborated on. Most designers have more than three projects but are only actively working on one or two at a time.
I'd upgrade to Professional the moment a client asks to be added as a collaborator or when you need version history beyond 30 days.
Why it stays: There's no credible alternative for product design in 2026. The free tier is genuinely usable.
Untitled UI (Jordan Hughes)
The free tier of Untitled UI has more components than most paid Figma kits. Color system, typography scale, spacing system, 1,000+ components built with proper variables and auto layout.
What I want designers to understand about Untitled UI isn't the component count — it's the system underneath the components. The color scales are built on a proper 50-950 progression. The spacing uses an 8pt grid throughout. The typography is a genuine modular scale.
Using Untitled UI properly teaches you what a design system should look like. That education is worth more than the components themselves.
Why it stays: It's the best free design system available, and using it deeply makes you a better designer regardless of whether you ship it.
When I'd remove it: If a client has an existing, well-built design system. Always use the client's system over an external one.
Phosphor Icons
My default icon library since 2022. 1,200+ icons, 6 styles, MIT license, excellent Figma plugin.
I've tried switching to other icon sets multiple times. I keep coming back. The multi-style system (Thin / Light / Regular / Bold / Fill / Duotone) solves the problem of needing different icon weights for different surfaces without switching libraries.
Why it stays: The only icon library I've never run out of icons in.
View Phosphor Icons on Mantlr →
The Typography Stack
Fontshare (Indian Type Foundry)
Fontshare is a curated library of commercial-quality typefaces, free for personal and commercial use. The selection is smaller than Google Fonts but every typeface is exceptional.
My go-to typefaces from Fontshare:
- Satoshi — for tech/consumer products. The geometric construction gives it a modern, startup-y quality without feeling cold.
- Cabinet Grotesk — for display and headings when I need more personality than a neutral grotesque.
- General Sans — when I need neutral professionalism that isn't Inter.
- Switzer — the one I reach for when I want "clean and modern" without any specific personality.
Why it stays: Better curation than Google Fonts for display and heading typefaces. The quality of the foundry work shows.
View Fontshare Resources on Mantlr →
Google Fonts
1,500+ typefaces, all free, all web-optimized. The criticism that Google Fonts is generic is valid for the most popular 20 fonts and unfair to the other 1,480.
If you spend more than 5 minutes on Google Fonts, you'll find typefaces that are genuinely excellent and genuinely underused. Bricolage Grotesque, Instrument Sans, Epilogue, Public Sans — none of these feel generic.
Why it stays: The breadth is unmatched. The variable font selection has improved dramatically. When Fontshare doesn't have what I need, Google Fonts usually does.
View Typography Resources on Mantlr →
The Color System
Coolors
The fastest way to explore color directions. I use the randomizer for about 90 seconds — not to find a palette, but to calibrate my eye for what's interesting versus what's safe. Then I generate palettes around the direction I find interesting.
Coolors is for direction, not decisions. The final palette comes from more rigorous tools.
Why it stays: Fastest idea-generation tool in my stack.
Realtime Colors
This tool is underrated to a surprising degree. Paste any hex color and Realtime Colors applies it to a realistic interface mockup — navbar, buttons, cards, typography — so you can see exactly how the color behaves in context rather than as a swatch.
The insight this provides is different from what you get from a palette generator. You're not looking at colors next to each other. You're looking at a color doing actual UI work. A color that looks great as a swatch can look overwhelming as a button background. You only know by testing it in context.
Why it stays: Changes how I evaluate colors. I don't approve any color palette without checking it in Realtime Colors first.
View Realtime Colors on Mantlr →
Whocanuse.com
Accessibility is not optional. But contrast ratio numbers are abstract — "5.2:1" doesn't communicate what that means for a user with protanopia.
Whocanuse.com shows your color combination across 8 types of color blindness and visual impairment with realistic simulations. When you see that your button text is invisible to a user with tritanopia, it's more motivating than a number.
Why it stays: The simulation-based approach changes how clients and stakeholders understand accessibility. Numbers don't persuade people. Visual simulations do.
ColorBox.io (by Lyft)
When I need to build a systematic color scale — not just a palette, but a proper 50-950 scale with consistent lightness progression — ColorBox.io is the right tool. Built by Lyft's design team, it generates scales with APCA contrast checking built in.
Why it stays: Essential when a client's brand color is challenging. It's the difference between guessing and engineering a color system.
The Asset Layer
unDraw (Katerina Limpitsouni)
Open-source SVG illustrations for any concept. The color is customizable to your exact brand color. Commercial use is free, no attribution required.
The quality is consistently good. The variety is excellent. The ubiquity is a genuine concern — unDraw is on approximately one-third of all SaaS landing pages, and designers who use it without customization contribute to a kind of visual homogeneity that makes products feel generic.
The solution: always customize the primary color to your exact brand hex. Change the compositions when possible. Use Humaaans or illlustrations.co alongside unDraw to vary the visual language.
Why it stays: The fastest path from "I need an illustration for this concept" to "illustration in the file." The quality justifies frequent use if you customize properly.
Storyset (Freepik)
What Storyset does that unDraw doesn't: animated SVG illustrations. When you need an empty state or a loading state that communicates "this is supposed to be here, we're just getting things ready" — a static illustration does some of that work but an animated one does it better.
The animation quality is good — not flashy, just purposeful motion that makes waiting feel shorter.
Why it stays: The animated empty state use case has no better free alternative.
The CSS & Development Layer
Haikei
Generate SVG design assets — waves, blobs, geometric patterns, gradient meshes — that would take hours to create by hand. The output is clean SVG code you can drop into any project.
What I use it for: section background dividers, hero background textures, anywhere I need organic visual interest without reaching for stock imagery or complex illustration.
Why it stays: Replaces hours of illustration work for background sections. The output quality is consistently better than what I could create manually in the same time.
Squoosh (Google Chrome Labs)
Browser-based image compression with side-by-side quality comparison. Drag an image in, choose your compression algorithm, see the quality difference, export.
This sounds trivial. It isn't. Unoptimized images are the most common performance problem on designer-produced websites. A hero image at 2MB versus 180KB is the difference between a 95 and a 55 on PageSpeed Insights.
Why it stays: Used on every project. The before/after comparison makes it easy to find the right quality/size trade-off.
View Developer Tools on Mantlr →
The Reference & Inspiration Layer
Mobbin
100,000+ screenshots from real mobile and web applications, searchable by UI pattern type.
This is reference, not inspiration. When I'm designing an onboarding flow, I search "onboarding" in Mobbin and see how 50 real products handle user activation. When I'm designing an empty state, I search "empty state" and see the range of approaches. Real products, real decisions, real context.
The difference between Mobbin and Dribbble: Mobbin shows you design that actually shipped. Dribbble shows you design that was meant to impress other designers. These are very different things.
Why it stays: Best research tool for understanding how real products solve real UI problems.
Google Search Console
Not a design tool. On this list anyway.
Designers who understand data make better decisions than designers who only trust their instincts. Google Search Console shows you what users search for before finding your product, which pages they actually visit, and where they lose interest. That information should change how you design.
If you work on any product with a web presence, ask for Search Console access. Spend 30 minutes in it monthly. You will learn things that change your design decisions.
Why it stays: Makes me a better product designer, not just a better visual designer.
The One Rule That Keeps This List Useful
Before adding any new tool: does this replace something I already have, or fill a genuine gap?
If it replaces: add the new one, delete the old one. Net zero.
If it fills a gap: add it.
If it's "cool but I don't have an immediate use for it": don't add it.
The designers I've seen produce the best work consistently aren't the ones with the most tools. They're the ones who know the fewest tools the most deeply.