Free Tools to simplify your UI Design workflow!

These are some tools I use to help with visual design, such as UI patterns, typography, and picking colours.

Mesh Gradient generates a gradient image with an underlying 2d mesh and lets you edit the vertices & edges of the mesh to get the perfect gradient look. Achieving something similar with existing gradients would be impossible since layering numerous gradients results in muddied colours and sub-par results.

Along with Mobbin, Design Vault always help me when I am stuck while creating wireframes for a new product or feature. I like to see what is new or how specific UI patterns are used in existing products.

Undraw is a fantastic tool to create free open-source illustrations that you can copy directly from the browser into your Figma file! I love how they create a consistent visual image throughout your product instead of a mishmash of unmatching illustrations. Checklist is a relatively new product I am playing with, but this tool helps me to remember the names of UI patterns and elements. Breadcrumbs, toast messages, and search bars, to name a few. Yum!

Last but not least, I often struggle with typography — do I pick a decorative font and pair it with a Sans-Serif? Should I go with Inter? Or maybe Roboto? This tool called FontJoy helps me to decide what font pairs I should use.

I hope these tools will be helpful in your next design project! I am very grateful to the Designers and Developers who created these tools to make our lives easier!