- Go through the Table of Contents and choose the tool.
- Search for a keyword or phrase (for example, "animation", "prototyping").
- Ask Lisa on Twitter.
If you found some great design tool, just send a Pull Request with respect to our Contribution Guidelines (they're very simple, please take a look). We use such labels for free , open source and Mac only tools, don't forget to add them. Now I'd love to see your suggestions!
- Accessibility Tools
- Animation Tools
- Augmented Reality Tools
- Collaboration Tools
- Color Picker Tools
- Design Feedback Tools
- Design Handoff Tools
- Design System Tools
- Design to Code Tools
- Experience Monitoring Tools
- Font Tools
- Free Screenshot Software
- Icons Tools
- Illustrations
- Mockup Tools
- Mouse Tracking Tools
- Prototyping Tools
- Sketching Templates
- Stock Photos Tools
- UI Design Tools
- User Flow Tools
- Version Control for Designers
- ANDI — accessibility testing tool (bookmarklet).
- Axe — accessibility engine designed to work on all modern browsers and with whatever tools, frameworks, libraries and environments you use today.
- ColorBox by Lyft Design — a web app that algorithmically builds accessible color systems.
- Contraste — app for checking the accessibility of text against the Web Content Accessibility Guidelines (WCAG).
- Contrast — a macOS app for designers and developers to get quick access to WCAG color contrast ratios.
- Hex Naw — helps you to test entire color systems for contrast and accessibility.
- PA11Y — accessibility testing tool to find issues with your web pages. It runs HTML CodeSniffer from the command line for programmatic accessibility reporting.
- Sim Daltonism — a color blindness simulator for macOS and iOS that lets you visualize colors as they are perceived with various types of color blindness. It‘s free and open-source.
- tota11y — an accessibility visualization toolkit.
- WAVE — allows you to evaluate web content for accessibility issues directly within Chrome and Firefox.
Need to create an animated transition, micro-interaction or scroll-based animation? Go through these tools:
- Adobe After Effects — a digital visual effects, motion graphics, and compositing application.
- BeatFlyer — a web tool that lets you create very quickly loopy and catchy animations from your multi-layer compositions.
- Haiku — keyframe-based animation connecting your UI tools to code that developers can easily use.
- Kite Compositor — a powerful animation and prototyping application for Mac & iOS.
- LightBox — 2D, Hand-Drawn animation package.
- Lottie — a mobile library for Android and iOS that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile and on the web.
- Spirit — animation tool that helps you to create and manage the animations real time in the browser.
- Tumult Hype — the HTML5 animation/interactives creation app for macOS.
Principle, Framer, Invision Studio, Flinto are also among UI & UX animation apps and software animation tools.
- Lightform — a design tool for projected AR.
- Torch — a cloud-based 3D design and prototyping app focused on mobile AR.
- Spark AR Studio — сreate AR experiences for Instagram without code.
- Gallery.io — a collaborative tool for uploading design work, getting feedback, and tracking revisions.
- Invision Freehand — quickly create, discuss, and iterate on designs.
- Jira — software development tool used by agile teams.
- MURAL — think and collaborate visually. Anywhere, anytime.
- Notion — write, plan, collaborate, and get organized. Notion is all you need — in one tool.
- RealtimeBoard — whiteboarding platform for cross-functional team collaboration.
- Trello — a web-based project management application that enables you to organize and prioritize your projects in a fun, flexible and rewarding way.
- Visual Inspector — collaboration tool for website feedback and fixing design bugs.
- Witeboard — simple real-time whiteboard for collaboration work.
- Wrike — an online project management software that gives you full visibility and control over your tasks.
If you are looking for an eyedropper tool, color identifier tool or color capture tool, here you go:
- Adobe Color — create color schemes with the color wheel or browse thousands of color combinations from the Color community.
- Chroma — free web app which allows you to identify the color.
- Coolors.co — it is the super-fast color scheme generator.
- Colourcode — online designer tool, which allows you to easily and intuitively combine colours.
- Just Color Picker — Free portable offline colour picker and colour editor.
- Khroma — AI-based tool to generate color palettes based on your preferences.
- Material Colors Native — Google's material design color palette in the form of a mac app.
- Paletton — a designer tool for creating color combinations that work together well.
- Pikka — Color Picker — color picker & color schemes generator for macOS.
- React Color — a collection of color pickers from Sketch, Photoshop, Chrome. It‘s free and open-source.
- Sip - a better way to collect, organize and share colors. Global eyedropper tool for MacOS.
- Skala Color — works with a huge variety of formats, covering everything you’re likely to need for web, iOS, Android, and macOS development.
- Swatches — iOS app that lets you collect, inspect and share the colors that inspire you in your daily life.
- UI Gradients — handpicked collection of beautiful color gradients for designers and developers.
Do you get feedback during the development process? If you wish to get more structural feedback on UI issues or visual bugs take a look at this tool:
- Flawless Feedback — review and annotate iOS apps then share your feedback in Jira or Trello.
- Avocode — open designs without design tools. Export images without preparing layers. Click on layers to get code.
- Invision Inspect — prepare designs for development.
- Sketch Measure — Sketch redline plugin. Annotate distance and size of elements.
- Specctr — in the unfortunate event you're designing UI in PS, AI, or ID this tool creates redline annotations.
- Sympli — automated specs and assets handoff from Sketch, Photoshop and Adobe XD. Integrated with Jira, Xcode and Android Studio.
- Zeplin — handoff designs and styleguides with accurate specs, assets, code snippets automatically.
Tools that help to build, maintain, and organize your own design system.
- Brand.ai — automatically maintainable UI components style guide.
- Design System Manager – Invision's design system manager.
- Frontify — create graphical guidelines, patterns libraries, design systems.
- Lingo — create a shared asset library with your entire team.
- Lucid — tool for creating, managing and sharing a design system. From a simple component library through to detailed descriptions of your styles.
- Zeroheight — styleguides created by designers, extended by developers, and editable by everyone.
We can also add to this list Sketch, Figma and Framer X (Framer X Team Store).
- Blocs For Mac — a fast, easy to use and powerful visual web design tool, that lets you create responsive websites without writing code.
- Bootstrap Studio — a powerful web design tool for creating responsive websites using the Bootstrap framework.
- Mobirise — an offline drag and drop website builder software that is based on Bootstrap 3/4 and Google AMP.
- Pinegrow — a professional visual editor for CSS Grid, Bootstrap 4 and 3, Foundation, responsive design, HTML, and CSS.
- px.div — Proper site build tool for developers and designers.
- Readymag — a visually-pleasing tool for designing on the web from landing pages to multimedia long-reads, presentations and portfolios.
- STUDIO — design from scratch, collaborate in real time and publish websites.
- Sympli — deliver the design, assets, specifications directly into your preferred IDE (e.g Xcode, Android Studio).
- Tilda — create a website, landing page or online store for free with the help of Tilda modules and publish it on the same day.
- Webflow — build responsive websites in your browser, then host with us or export your code to host wherever.
- Amplitude — understand your users, rapidly release better product experiences, and grow your business.
- Fathom — provides simple, useful websites stats without tracking or storing personal data of your users.
- FullStory — an app that captures all your customer experience data in one powerful, easy-to-use platform.
- Google Analytics — measure your advertising ROI as well as track your Flash, video, and social networking sites and applications.
- Heap — automatically capture every web, mobile, and cloud interaction then retroactively analyze your data without writing code.
- Hotjar — see how visitors are really using your website, collect user feedback and turn more visitors into customers.
- Inspectlet — record videos of your visitors as they use your site, so you can see everything they do.
- Mixpanel — get insights across all of your user-centric data to make smarter decisions and act faster based on how customers use your product or website.
- Pendo — measure and elevate the customer experience within their applications.
- Adobe Fonts — thousands of beautiful fonts.
- Google Fonts — making the web more beautiful, fast, and open through great typography.
- Google Webfonts Helper — a hassle way to self-host Google Fonts. It‘s free and open-source.
- Fontbase — font management made easy.
- FontPair — a simple tool that helps you pair Google Fonts together.
- Fontface Ninja — browser extension to discover what fonts are being used on any website.
- FontSpark — a simple tool to help designers quickly find the best fonts for their projects.
- RightFont — font managing app, helps preview, sync, install and organize fonts over iCloud, Dropbox, OneDrive or Google Drive.
- Sans Forgetica — a downloadable font that is scientifically designed to help you remember your study notes.
- Typeface — font manager that improves your design workflow with live font previews and flexible tagging.
- Webfont — create and maintain custom SVG icon fonts, made a shared library of icons.
Find some powerful screenshot tools available for macOS:
- CloudApp — record videos, webcam, annotate screenshots, create GIFs and save them to the cloud.
- Giphy Capture — capture parts of your screen and export as gif or mp4.
- Greenshot — take a screenshot of a selected region, window or fullscreen. Export it in different ways. Free on Windows.
- Kap — open-source screen recorder with options to export to GIF, MP4, WebM and APNG.
- Lighshot — screenshot app for taking quick captures of your screen.
- Monosnap — create screenshots, annotate them and upload them to the cloud.
- Quicktime — a video player that you can use to record your screen.
- Screenie — a screenshotting tool that works as an image manager, so you can filter and search through images, change screenshot filetypes.
- ScreenToGif — open source tool to record a gif of part of the screen. Also, work as a nice editor. Only available for Windows.
- Snappy — a tool that takes quick shots and organizes them for you into collections.
- Teampaper Snap — a modern screenshotting app that allows you to take screenshots of a selected area.
- Iconfinder — a marketplace for vector icons (SVG). Icon sets available in IconJar format.
- IconJar — store all your icons in one icon manager.
- Font Awesome — the web's most popular icon set and toolkit, also it's open source.
- Fontello - tool to build custom fonts with icons, also open source.
- Noun Project — icons for everything.
- Nucleo — a Mac and Windows app to collect, customize and export all your icons.
- Svgsus — SVG icon management tool.
- unDraw — collection of beautiful SVG images.
- Cleanmock — create stunning mockups using latest device frames like iPhone & custom backgrounds.
- Rotato — animated 3D mockups for your app designs.
- Screely — quickly frame web page designs into a minimalist browser window.
- ScreenSpace — 3D devices videos for motion designer.
- Smartmockups — create stunning product mockups with just a few clicks.
- Mouseflow — record mouse cursor movements.
- Piskel - online editor for animated sprites & pixel art.
- Aseprite - animated sprite editor & pixel art tool.
- Alva — create living prototypes with code components. It's also open source.
- Axure RP — wireframing, prototyping, collaboration & specifications generation.
- Balsamiq — wireframing and collaboration.
- Creo — prototyping, code exporting and built-in mobile app builder.
- InVision — prototyping, collaboration & workflow platform.
- Flinto — a Mac app for creating interactive and animated prototypes of app designs.
- Framer X — a tool to visually design realistic interactive prototypes.
- Keynote — the built-in Mac app for creating presentations that can also be used for quick prototyping (see how Apple designers use it to verify design concepts).
- Marvel App — the collaborative design platform. Wireframe, prototype, design online and create design specs in one place.
- Maze — a tool for designers and developers that gives analytical results with actionable KPIs for your Invision prototypes.
- Principle — makes it easy to design animated and interactive user interfaces.
- ProtoPie — piece hi-fi interactions together, build sensor-aided prototypes and share your amazing creations in a matter of minutes.
- Proto.io — a tool to create fully-interactive high-fidelity prototypes that look and work exactly as your app should.
- UXPin — build prototypes that feel real, with powers of code components, logic, states and design systems.
You can also do prototyping with Figma, Adobe XD, and InVision Studio, which are mentioned in the UI Design Tools section.
- Sketchsheets — is an open source project dedicated to providing free printable templates of the latest devices and platforms for wireframing designs.
- Sneakpeekit — print note taking grids and devices frames.
- Burst — free stock photos for websites and commercial use.
- FreePhotos.cc — free stock photos for commercial use.
- Pexels — an aggregate of many free stock photo resources.
- Pixabay — website for sharing photos, illustrations, vector graphics, and film footage under a proprietary license.
- pxhere — free image stock.
- Unsplash — stock photos free to use.
- #WOCinTech Chat Photos — free stock photos of women technologists of diverse backgrounds.
- Zoommy — helps you find awesome free stock photos for your creative product or inspiration.
- Adobe Illustrator — create logos, icons, drawings, typography, and illustrations for print, web, video, and mobile.
- Adobe Photoshop — imaging and graphic design software.
- Adobe XD — design, prototype, and share any user experience, from websites and mobile apps to voice interactions.
- Affinity Designer — vector graphics editor for macOS, iOS, and Microsoft Windows.
- CleverBrush — browser-based online vector editor and digital publishing tool which is possible to integrate to page as JS component.
- Figma — a design tool based in the browser, that allows to design and prototype with real-time collaboration.
- Gravit — a free vector design app, available for macOS, Windows, Linux, ChromeOS and browser.
- GIMP — free & open source imaging and graphic design software.
- Inkscape — a free and open-source vector graphics editor. It has ability to create or edit vector graphics such as illustrations, diagrams, line arts, charts, logos and complex paintings.
- Invision Studio — combines design, prototyping, and collaboration into one harmonious workflow.
- Krita — A free painting and graphic design software considered a good alternative to Adobe Photoshop.
- Photopea — a free browser-based graphic design app alternative to Photoshop.
- Sketch — it's a design toolkit built for Mac.
- Vectr — a simple web and desktop cross-platform tool to create vector graphics easily and intuitively.
If you need to make a user flow diagram, user flow map or a sitemap, take a look at these tools:
- Draw.io — free online diagram software for making flowcharts, process diagrams, org charts, UML, ER and network diagrams.
- Flowmapp — online tool for creating sitemaps and user flows that helps you to effectively design and plan user experience.
- Google Drawings — create diagrams and charts, for free; all within Google Docs.
- Lucidchart — online tool for creating diagrams, flow charts, sitemaps, and more.
- MindNode — a mind mapping app that makes brainstorming simple and easy.
- NinjaMock — Wireframe and user flow online tool. Link your views and create logic flow prototype. All with freehand visual style.
- OmniGraffle — a diagramming and digital illustration application for macOS and iOS.
- Overflow — turn your designs into playable user flow diagrams that tell a story.
- Sketch.systems — ui and flow design with interactive state machines.
- Whimsical — easy to create flow charts, wireframes and sticky notes.
- yEd - Graph Editor — free desktop tool for making diagrams. Usable for wide variety of use cases. Auto-layout helps a lot when making flowcharts.
- Abstract — a platform for design teams to version, manage and collaborate on Sketch files.
- Folio — a simple version control system for design teams; based on Git.
- Kactus — design version control without changing your tools. Manage changes, document work and keep your team in sync.
- Plant — a Mac app and Sketch plugin offering complete version control for designers and teams.
- Versions — a version control tool for designers with visual diff, merge and conflict resolution. Works with GitHub, Bitbucket, GitLab and Azure Devops.
This repo was inspired by articles from the design community and Prototypr.io Toolbox made by my good friend Graeme.