Figma is the Google Docs for UI Design. With Figma, you can collaborate with designers and have your work always backed up in the cloud, allowing you to focus on what matters the most - Design!
Sketch, is a UI design tool which was once the defacto industry tool. It still holds strong today with more than 50% companies still using it. However it doesn't work on Windows 😔.
Adobe XD, is an all-in-one UI design tool, with which you can design beautiful wireframes and interactive prototypes with animation. It works with both Mac and Windows and is for free. They also recently added collaboration.
A fantastic powerful new platform inspired by the world’s best design teams. Design, prototype, and animate—all in one place which works on both Mac and Windows. Do give it a try. They have fantastic support, learning resources, and UI kits.
Get Started with Studio
Whimsical (only Low Fidelity)
The Balsamiq killer, this blazing fast tool is perfect for people to rapidly visualize their low-fidelity wireframes digitally. It is super intuitive with quick short cuts and pre-made components for almost every use case.
If you're not convinced we recommend viewing their Zappos, Shopify and Dropbox example projects to get a better understanding of it's capabilities.
Protopie, is a high fidelity interactive prototyping tool, perfect for creating complex interactions for a variety of gestures & interactions. It is available for both Mac and Windows on a Free Trial.
Framer, is the most powerful interactive prototyping tool out there where prototypes are built using code. This means it comes with a steep learning curve and many a times takes more time than necessary to make simple interactions. A great tool but we recommended using it to create only extremely complicated interactions.
Origami, is a fantastic interactive prototyping built by Facebook which allows you to export you to export your interactions as code directly into XCode.
Storybook is an open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient.
Zeroheight allows you to document your design system, together. Ensuring you create beautiful living styleguides and document all your design system resources in one place.
Specify is an all-in-one tool for design systems. The first tool fully designed to maintain large products and design systems. All your design primitives, component states and platforms in one place.
Lingo is the visual home for your brand. Stop wasting time looking for files buried in folders. Visually organize all your assets in one place with Lingo. Create and share living style guides, asset libraries and more.
A fantastic free tool which analyses your website's accessibility against the Web Content and Accessibility Guidelines. It provides you with fantastic detailed documentation on how you can fix each issue on your website. Do check it out.
When using color, it is important to consider contrast and accessibility. Color will help you in quickly selecting an accessible color palette for your text and backgrounds.
