Egor Krasnoperov · Sept 23, 2025 · 8 min read
The design world moves fast — new tools, experiments, and sources of inspiration appear almost daily.
This list brings together the most practical, creative, and genuinely valuable resources for UI/UX and product designers.
Whether you're building interfaces, refining typography, experimenting with motion, or training your eye, you’ll find something here worth bookmarking.
Let’s dive in
This list brings together the most practical, creative, and genuinely valuable resources for UI/UX and product designers.
Whether you're building interfaces, refining typography, experimenting with motion, or training your eye, you’ll find something here worth bookmarking.
Let’s dive in
23 tools that will transform your design workflow and help you break creative blocks
UI Libraries and component inspiration
5. UIVERSE
A huge open-source library of UI components. Quality varies — some look polished, others less so — but it’s perfect for micro-interactions and animation ideas.
Great for: motion inspiration and UI exploration.
Link: uiverse.io
A huge open-source library of UI components. Quality varies — some look polished, others less so — but it’s perfect for micro-interactions and animation ideas.
Great for: motion inspiration and UI exploration.
Link: uiverse.io
4. Mobbin
One of the most popular UX, UI research tools with real app flows and screens from top products.
Great for: studying real-world UX, interaction patterns.
Link: mobbin.com
One of the most popular UX, UI research tools with real app flows and screens from top products.
Great for: studying real-world UX, interaction patterns.
Link: mobbin.com
3. Figcomponents
A categorized library of components you can copy straight into Figma. Offers both free and Pro tiers.
Great for: quick prototyping and layout testing.
Link: figcomponents.com
A categorized library of components you can copy straight into Figma. Offers both free and Pro tiers.
Great for: quick prototyping and layout testing.
Link: figcomponents.com
2. Component Gallery
A clean catalog of components pulled from real design systems, each linking back to the original source.
Great for: building or improving your design system.
Link: component.gallery
A clean catalog of components pulled from real design systems, each linking back to the original source.
Great for: building or improving your design system.
Link: component.gallery
1. React Bits
A free library with 100+ React components — animations, effects, micro-interactions, and more.
Great for: adding polish and motion to projects or portfolios.
Link: reactbits.dev
A free library with 100+ React components — animations, effects, micro-interactions, and more.
Great for: adding polish and motion to projects or portfolios.
Link: reactbits.dev
Typography playgrounds
9. Type Tools
An interactive typography sandbox by Reed Hollett that lets you explore letterforms through depth, distortion, texture, and subtle visual experiments.
Great for: discovering new typographic perspectives and adding refined visual interest to your work.
Link: www.type-tools.com
An interactive typography sandbox by Reed Hollett that lets you explore letterforms through depth, distortion, texture, and subtle visual experiments.
Great for: discovering new typographic perspectives and adding refined visual interest to your work.
Link: www.type-tools.com
8. Grid Type
A place where you can design your own font right in the browser. Shape letters, play with grids, and watch your typography come to life one character at a time.
Great for: unlocking creative flow, crafting signature type for your portfolio, turning simple shapes into expressive design.
Link: grid-type.com
A place where you can design your own font right in the browser. Shape letters, play with grids, and watch your typography come to life one character at a time.
Great for: unlocking creative flow, crafting signature type for your portfolio, turning simple shapes into expressive design.
Link: grid-type.com
7. Space Type Generator
A collection of interactive typographic experiments that let you animate, distort, and reshape text in real time. Explore tools, tweak parameters, and export visuals for your projects.
Great for: motion-inspired typography, playful portfolio accents, pushing creative boundaries through dynamic type.
Link: spacetypegenerator.com
A collection of interactive typographic experiments that let you animate, distort, and reshape text in real time. Explore tools, tweak parameters, and export visuals for your projects.
Great for: motion-inspired typography, playful portfolio accents, pushing creative boundaries through dynamic type.
Link: spacetypegenerator.com
6. Enfont Terrible
A playful “break-the-rules” font distortion tool by Javier Arce. Upload any font, distort it, and export as .otf.
Great for: creating expressive typography; adding unconventional accents to your portfolio; sparking new ideas through deliberate chaos.
Link: enfont.javierarce.com
A playful “break-the-rules” font distortion tool by Javier Arce. Upload any font, distort it, and export as .otf.
Great for: creating expressive typography; adding unconventional accents to your portfolio; sparking new ideas through deliberate chaos.
Link: enfont.javierarce.com
Visual experiment tools
Tooooools App
A lo-fi effects lab for turning clean visuals into something gritty, raw, and imperfect in all the right ways. Add texture, noise, blur, and analog character to photos or videos with just a few tweaks.
Great for: moody portfolio shots, retro aesthetics, experimental video edits, and breaking the “too polished” look.
Link: tooooools.app
A lo-fi effects lab for turning clean visuals into something gritty, raw, and imperfect in all the right ways. Add texture, noise, blur, and analog character to photos or videos with just a few tweaks.
Great for: moody portfolio shots, retro aesthetics, experimental video edits, and breaking the “too polished” look.
Link: tooooools.app
12. Mosh Pro
A high-impact glitch engine for anyone who loves breaking visuals on purpose. Mash, melt, warp, and destroy footage to create chaotic, hypnotic, and unforgettable motion effects.
Great for: VJs, experimental portfolios, music visuals, and anyone who wants their videos to look beautifully corrupted.
Link: moshpro.app
A high-impact glitch engine for anyone who loves breaking visuals on purpose. Mash, melt, warp, and destroy footage to create chaotic, hypnotic, and unforgettable motion effects.
Great for: VJs, experimental portfolios, music visuals, and anyone who wants their videos to look beautifully corrupted.
Link: moshpro.app
11. Hofmann 1.0.0
A digital tribute to Armin Hofmann’s experimental design methods. Play with balance, contrast, tension, and abstraction to create bold graphic compositions right in your browser.
Great for: exploring classic Swiss-style experimentation, generating striking visuals, and pushing your graphic instincts.
Link: bbtgnn.github.io
A digital tribute to Armin Hofmann’s experimental design methods. Play with balance, contrast, tension, and abstraction to create bold graphic compositions right in your browser.
Great for: exploring classic Swiss-style experimentation, generating striking visuals, and pushing your graphic instincts.
Link: bbtgnn.github.io
10. Effect App
A fast, no-nonsense playground for turning any image into something sharper, louder, or weirder. Push textures, bend light, distort reality, and create visuals that stand out instantly.
Great for: bold portfolio shots, experimental visuals, and quick creative breakthroughs.
Link: effect.app
A fast, no-nonsense playground for turning any image into something sharper, louder, or weirder. Push textures, bend light, distort reality, and create visuals that stand out instantly.
Great for: bold portfolio shots, experimental visuals, and quick creative breakthroughs.
Link: effect.app
Skill-building games for designers
22. Kern Type
An addictive kerning trainer that challenges you to space letters like a type designer.
Great for: developing a precise typographic eye and improving text aesthetics.
Link: type.method.ac
An addictive kerning trainer that challenges you to space letters like a type designer.
Great for: developing a precise typographic eye and improving text aesthetics.
Link: type.method.ac
21. Better Web Type Triangle
A clean interactive guide that demystifies web typography fundamentals through practical exercises.
Great for: improving type hierarchy, readability, and rhythm.
Link: betterwebtype.com
A clean interactive guide that demystifies web typography fundamentals through practical exercises.
Great for: improving type hierarchy, readability, and rhythm.
Link: betterwebtype.com
20. Shape Type
Fix distorted letterforms using your typographic instincts and learn the logic behind beautiful curves.
Great for: training your eye for type, balance, and smooth bezier work.
Link: shape.method.ac
Fix distorted letterforms using your typographic instincts and learn the logic behind beautiful curves.
Great for: training your eye for type, balance, and smooth bezier work.
Link: shape.method.ac
19. Pixactly
A pixel–precision guessing game that shows how well you understand scale and dimensions.
Great for: developing spatial intuition and pixel-perfect judgment.
Link: pixact.ly
A pixel–precision guessing game that shows how well you understand scale and dimensions.
Great for: developing spatial intuition and pixel-perfect judgment.
Link: pixact.ly
18. Bezier Game
The ultimate pen tool dojo. Learn to draw anything with perfect bezier curves using real challenges.
Great for: mastering vector curves once and for all.
Link: bezier.method.ac
The ultimate pen tool dojo. Learn to draw anything with perfect bezier curves using real challenges.
Great for: mastering vector curves once and for all.
Link: bezier.method.ac
17. Designer’s Eye
A minimalist layout–accuracy trainer that tests how well you judge alignment, spacing, and proportion.
Great for: refining layout instincts and building a cleaner visual rhythm.
Link: avark.agency/designers-eye
A minimalist layout–accuracy trainer that tests how well you judge alignment, spacing, and proportion.
Great for: refining layout instincts and building a cleaner visual rhythm.
Link: avark.agency/designers-eye
16. Can’t Unsee
A UI judgment game that forces you to choose the better design in seconds.
Great for: leveling up visual taste and spotting tiny interface mistakes instantly.
Link: cantunsee.space
A UI judgment game that forces you to choose the better design in seconds.
Great for: leveling up visual taste and spotting tiny interface mistakes instantly.
Link: cantunsee.space
15. Kolor
A fast-paced color–matching challenge that trains your eye to spot subtle hue shifts.
Great for: improving color sensitivity and building instinctive palette skills.
Link: kolor.moro.es
A fast-paced color–matching challenge that trains your eye to spot subtle hue shifts.
Great for: improving color sensitivity and building instinctive palette skills.
Link: kolor.moro.es
14. The Boolean game
A hands-on way to master shape-building by slicing and combining forms with precision.
Great for: sharpening vector logic and boosting your Figma or Illustrator muscle memory.
Link: boolean.method.ac
A hands-on way to master shape-building by slicing and combining forms with precision.
Great for: sharpening vector logic and boosting your Figma or Illustrator muscle memory.
Link: boolean.method.ac
When your portfolio looks good, but the recruiters aren’t calling
23. Mockin (your secret weapon)
If you’re applying for design roles but aren’t getting interviews or helpful feedback, try
Mockin is a career toolkit built specifically for UX/UI and Product Designers.
It helps you:
Link: mockin.work
If you’re applying for design roles but aren’t getting interviews or helpful feedback, try
Mockin is a career toolkit built specifically for UX/UI and Product Designers.
It helps you:
- refine your resume and LinkedIn page
- improve your portfolio
- identify what’s missing
- practice with AI mock interviews based on 200+ real questions
- increase your chances of landing interviews and offers
Link: mockin.work
May 24, 2025
June 4, 2025
June 8, 2025
More articles
