Home

Awesome

<div class="hidden-in-page">

Awesome Design Tools

<p align="center"> <a href="https://flawlessapp.io/designtools"> <img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/Awesome-design-tools-cover.png" alt="Awesome-Design-Tools"/> </a> </p> <p align="center"> <img alt="awesome" src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg" /> <img alt="PRs Welcome" src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" /> </p>

Awesome Design Tools as a part of Flawless App family joins Abstract!

Today, we’re excited to announce that Flawless App has joined Abstract, a design delivery platform that brings visibility, accountability, measurability, and predictability to design.

Flawless App was our first company, and we’re proud of everything that we’ve achieved with our 5-person team.

Since 2015, we’ve launched powerful tools for designers and developers — among them are Flawless App, Reduce, Flawless Feedback. We’ve also invested a lot of love and care into community-driven initiatives. Awesome Design Tools is one of them.

So what’s next?

Our team has joined Abstract and is focused on building out the Abstract SDK, bringing developers’ experience forward. One unbelievable journey has finished and the new one has just begun. And if you want to know more about the future of Awesome Design Tools, please keep reading our FAQ.

<p align="center"> <a href="https://flawlessapp.io/designtools/joinsabstract"> <img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/awesome-design-tools-joins-abstract-cover.png" alt="Awesome-Design-Tools-Joins-Abstract"/> </a> </p>

How to Use and Contribute

If you found some great design tool or plugin, just send a Pull Request with respect to our Contribution Guidelines (they're very simple, please take a look). Design tools should be submitted here and plugins in Awesome Design Plugins file. We use such labels for free free.svg, open source open-source.svg and Mac only mac.svg tools, don't forget to add them. Now I'd love to see your suggestions!

</div> <header class='header header-top -blue'></header> <div class="nav">

Table of Content

</div> <main> <article id="accessibility-tools">

Accessibility Tools

Accessibility is the practice of creating websites and apps usable for all people, including individuals with visual, motor, auditory, speech, or cognitive disabilities. Here you will find web accessibility tools, accessibility testing tools, and accessibility apps both for developers and designers:

<div class="banner banner--yellow">

Accessibility checking features are also available in VisBug from the Visual Debugging Tools category.

</div> </article> <article id="animation-tools">

Animation Tools

<div class="hidden-in-page"> <p align="center"> <a href="http://bit.ly/33Q3AC0"> <img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/Abstract.png" alt="Abstract"/> </a> </p> </div>

Animations guide people through the product friendly and smoothly. Live interactive UI makes users feel delighted with instant feedback and emotional touch. These free and paid tools are designed to make animation creation easier. If you plan to make animated transitions, micro-interactions or scroll-based animations, go through these tools:

<div class="banner banner--yellow">

Drama, Principle, Framer, Invision Studio, Flinto are also among UI & UX animation apps and software animation tools.

</div> </article> <article id="augmented-reality">

Augmented Reality

Augmented Reality is a technology that upgrades our real world, by adding a layer of digital information to it. The use of AR increases day by day with dozens of new AR apps, development kits, and AR frameworks. So in this section is collected different augmented reality tools for creating, projecting and prototyping apps focused on AR:

</article> <article id="collaboration-tools">

Collaboration Tools

<!--- <div class="hidden-in-page"> <p align="center"> <a href="http://bit.ly/2ZwUoEq"> <img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/SuperNova.png" alt="Supernova"/> </a> </p> </div> --->

Looking to try some tools for agile design and development collaboration? Good idea because such tools make the lives of designers and developers much easier, save time and improve productivity. Well, you know all that in Slack-driven era. Here you'll find the best collaboration tools for product teams:

<div class="banner banner--yellow">

You can also have design collaboration into InVision Freehand tool.

</div> </article> <article id="color-picker-tools">

Color Picker Tools

If you are looking for an eyedropper tool, color identifier or color capture, check this section. With the color pickers mentioned here, you will be able to create new color combinations and define great ones. Almost all of these tools are free:

<div class="banner banner--yellow">

You can also create color palettes with Leonardo, which is mentioned in the Accessibility Tools section.

</div> </article> <article id="design-feedback-tools">

Design Feedback Tools

How do you provide and get feedback during the development process? This process is usually pretty messy for many product teams, which caused product delays and time waste on back-and-forth communication. So if you wish to get fast and structural feedback on UI issues or visual bugs — take a look at this tool:

</article> <article id="design-handoff-tools">

Design Handoff Tools

<!-- <div class="hidden-in-page"> <p align="center"> <a href="https://adobe.ly/33HVSdf"> <img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/Adobe%20XD.png" alt="Abobe XD"/> </a> </p> </div> -->

Design handoff happens when designers finish the work and need to deliver designs to developers with all specs and assets. Design handoff tools allow to automatically generate style guide, comment on the design, inspect elements. These tools minimize guesswork and improve the effectiveness of the design process.

<div class="banner banner--yellow">

You can also make a design handoff within Relay, mentioned in the Design Version Control section.

</div> </article> <article id="design-inspiration">

Design Inspiration

<!-- <div class="hidden-in-page"> <p align="center"> <a href="http://bit.ly/2VQVTJ8"> <img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/Porkbun.png" alt="Porkbun"/> </a> </p> </div> -->

The creative process can be tough. So if ideas don’t come to your mind right away, try to search for inspiration in the work of other designers. These design inspiration sites feature design patterns, user flows, email markups and creative solutions of popular companies and great products:

</article> <article id="design-system-tools">

Design System Tools

<div class="hidden-in-page"> <p align="center"> <a href="http://bit.ly/33Q3AC0"> <img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/Abstract.png" alt="Abstract"/> </a> </p> </div>

I bet you heard about Design Systems, as it’s a pretty trendy topic. Design systems provide consistent, robust design patterns to keep design and development in sync. They are essentially collections of rules, constraints, and principles, implemented in design and code. Here you can find tools to build, maintain and organize your design system.

<div class="banner banner--yellow">

We can also add to this in Sketch, Figma, UXPin and Framer X (Framer X Team Store).

</div> </article> <article id="design-to-code-tools">

Design to Code Tools

<!-- <div class="hidden-in-page"> <p align="center"> <a href="http://bit.ly/2ZwUoEq"> <img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/SuperNova.png" alt="Supernova"/> </a> </p> </div> -->

Everyone can learn development but it takes time and effort. If you need a website or an app right now and you don’t want to hire a developer, pay attention to the website builders. Such design to code tools will help you to make a portfolio, simple landing or an app pretty fast and beautiful.

</article> <article id="design-version-control">

Design Version Control

<div class="hidden-in-page"> <p align="center"> <a href="http://bit.ly/33Q3AC0"> <img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/Abstract.png" alt="Abstract"/> </a> </p> </div>

Developers actively use version control tools for a long time, probably since 2005 (Git first release). Using a version control system is no brainer for dev teams, while the design version control system appeared only recently. This market is rapidly developing and we expect to see even more in version control for designers:

</article> <article id="development-tools">

Development Tools

This section mentions development tools and browsers. Development browsers have features that help developers and designers create and test websites and apps.

</article> <!-- <div class="hidden-in-page"> <p align="center"> <a href="http://bit.ly/35I1q9q"> <img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/Maze.png" alt="Maze"/> </a> </p> </div> --> <article id="experience-monitoring">

Experience Monitoring

Listening to users is important but seeing the real usage is even more crucial. For these, you need to install different analytic tools, experience monitoring software, and user behavior apps. Just use those analytics solutions concerning users data:

</article> <article id="font-tools">

Font Tools

Fonts are commonly used for making the web a more beautiful place. It’s an essential part of any design. In this section, you’ll find fonts generators & font finder tools that allow you to manage and work with fonts:

<div class="banner banner--yellow">

You can also handle fonts with Specify, which is mentioned in the Design System Tools section.

</div> <div class="hidden-in-page"> <p align="center"> <a href="http://bit.ly/33Q3AC0"> <img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/Abstract.png" alt="Abstract"/> </a> </p> </div> </article> <article id="gradient-tools">

Gradient Tools

You can see gradient colors are everywhere — UI, branding, illustration, typography. A gradient is created by using two or more different colors to paint one element while gradually fading between them. It might look as a memorable, fresh and unique color. To make such a gradient for your design, use these gradient color palettes.

<div class="banner banner--yellow">

You can also create and audit gradients with Leonardo, which is mentioned in the Accessibility Tools section.

</div> </article> <article id="icons-tools">

Icons Tools

As well as fonts, icons are used in every design. These basic elements support and guide many user actions inside the product. Without a doubt, icons are a vital element in user navigation. While making those small design elements is hard and time-consuming, you can get thousands of vector icons for personal and commercial use.

<div class="banner banner--yellow">

You can also handle icons with Specify, which is mentioned in the Design System Tools section.

</div> </article> <article id="illustrations">

Illustrations

<!-- <div class="hidden-in-page"> <p align="center"> <a href="http://bit.ly/2VQVTJ8"> <img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/Porkbun.png" alt="Porkbun"/> </a> </p> </div> -->

Illustrations can be used on your landing page, blog posts, inside your app or email campaign. They make your design live and playful. While drawing good illustration is a task of a skilled graphic designer, you can grab free SVG images & illustrations from very kind people in our community:

</article> <article id="information-architecture">

Information Architecture

Information architecture helps designers organize and structure content inside websites, mobile apps, and other software. So users will understand product functionality and will find everything needed. These information architecture tools should allow you to create visual sitemaps and to improve your website content structure:

</article> <article id="logo-design">

Logo Design

A logo is the starting point of your brand identity. It reflects the product mission, functionality and brand message. Ideally, the logo creates a strong connection between your product and the users. Logo design is an art, as well as many other design disciplines. With the right logo design tools, this art can be done right a bit faster.

<div class="banner banner--yellow">

You can also do your logo design with Adobe Photoshop, GIMP, Inkscape, Krita and Vectr which are mentioned in UI design tools.

</div> </article> <article id="mockup-tools">

Mockup Tools

<!-- <div class="hidden-in-page"> <p align="center"> <a href="http://bit.ly/33KtOpN"> <img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/ProtoPie.png" alt="ProtoPie"/> </a> </p> </div> -->

A mockup is a visual way of representing the product. While a wireframe mostly represents a product’s structure, a mockup shows how the product is going to look like. These mockup tools that help you create and collaborate on mockups, wireframes, diagrams, and prototypes:

</article> <article id="no-code-tools">

No Code Tools

With a rise of “no code tools”, everyone with a laptop can build and launch a project. These tools help designers and makers create websites, apps, and even games. No code tools allow to automate routine tasks and can be used without a development background. Take a look at the tools here and if you need more — check Design to Code section.

</article> <article id="pixel-art-tools">

Pixel Art Tools

Pixel art is a digital art form where color is applied to individual pixels to create an image. The pixel art can be used to create everything from intricate scenes and game backgrounds to character designs or emoji. If you feel curious to try, check this pixel art software for both macOS and Windows:

</article> <!-- <div class="hidden-in-page"> <p align="center"> <a href="http://bit.ly/33KtOpN"> <img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/ProtoPie.png" alt="ProtoPie"/> </a> </p> </div> --> <article id="prototyping-tools">

Prototyping Tools

A prototype is a simple experimental design of a proposed solution. It should help to test ideas, design assumptions, and hypotheses in a fast and cheap way. Prototyping tools allow designers and clients to see how the product would function in the real world and collaborate on this solution. Many modern prototyping tools can use for wireframing, prototyping, and collaboration:

<div class="banner banner--yellow">

You can also do prototyping with Figma, Adobe XD, Sketch and InVision Studio, which are mentioned in the UI Design Tools section.

</div> </article> <article id="screenshot-software">

Screenshot Software

<!-- <div class="hidden-in-page"> <p align="center"> <a href="http://bit.ly/2VQVTJ8"> <img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/Porkbun.png" alt="Porkbun"/> </a> </p> </div> -->

Taking screenshots is a typical task in the design & development workflow. So these free and full-featured screenshot apps can help you capture a screen with ease. Some screen captures are macOS only, while others support both OS:

</article> <article id="sketching-tools">

Sketching Tools

Sometimes you need just a pencil and paper to start creating your app or website. So here are you can find online sketching tools with great sketch sheet templates to speed up your creative process:

<div class="banner banner--yellow">

You can also do some sketching with Sketch mentioned in UI design tools.

</div> </article> <article id="smm-design-tools">

SMM Design Tools

Often marketing teams need well-design materials. It can be different banners, promo visuals, favicons, animations or just nice images for social platforms, like Twitter or Instagram. It this section we will keep adding tools for everyone to create marketing designs.

</article> <article id="sound-design">

Sound Design

Sound design is an art of creating a soundscape for a site, app, movie, game or any other product. The sound has great potential for transforming the way people connect with your product. Some sound design software is very advanced and can be used mostly by sound designers, while others are good for beginners.

</article> <article id="stock-photos-tools">

Stock Photos Tools

Need a high-quality photo for iOS app or new banner? You can always shoot it yourself or borrow from the stock photo sites. Luckily, there are hundreds of beautiful, free stock photos and royalty-free images that you can use for any project:

</article> <article id="stock-videos">

Stock Videos

If you work with video-content, you will enjoy these high-quality, hand-curated stock videos. You'll find many good and free stock video sites below, which you can use on your website, in your ad campaigns or social media:

</article> <!-- <div class="hidden-in-page"> <p align="center"> <a href="https://adobe.ly/33HVSdf"> <img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/Adobe%20XD%20(1).png" alt="Abobe XD"/> </a> </p> </div> --> <article id="tools-for-learning-design">

Tools for Learning Design

<div class="hidden-in-page"> <p align="center"> <a href="http://bit.ly/33Q3AC0"> <img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/Abstract.png" alt="Abstract"/> </a> </p> </div> <article id="ui-design-tools">

UI Design Tools

What are the best UI design tools in 2019? You can pick any of the tools below and it will allow you to do dozens of design tasks — UI for site or mobile, wireframe, prototype, animation, logo. These are great and fully-functional tools for UX & UI designers:

</article> <!-- <div class="hidden-in-page"> <p align="center"> <a href="http://bit.ly/33KtOpN"> <img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/ProtoPie.png" alt="ProtoPie"/> </a> </p> </div> --> <article id="user-flow-tools">

User Flow Tools

User flow is a series of steps a user takes to achieve a meaningful goal. It's a fast way to plan customer journey paths and improve UX. So if you need to make a user flow diagram, user flow map or a sitemap, take a look at these tools:

</article> <!-- <div class="hidden-in-page"> <p align="center"> <a href="http://bit.ly/35I1q9q"> <img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/Maze.png" alt="Maze"/> </a> </p> </div> --> <article id="user-research-tools">

User Research Tools

User research helps you understand user behaviors, needs, and motivations through various qualitative and quantitative methods (interviews, observation, forms, etc). These user research tools can be useful for you:

</article> <article id="visual-debugging-tools">

Visual Debugging Tools

</article> <article id="wireframing-tools">

Wireframing Tools

A wireframe is a visual mockup that outlines the basic structure of the site or an app. It contains the most essential elements and the content, helping you easily explain ideas on design. Wireframes are a low-fidelity way of showing a design. This section is presented the best wireframing tools for a variety of use cases.

<!-- <div class="hidden-in-page"> <p align="center"> <a href="https://adobe.ly/33HVSdf"> <img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/Adobe%20XD.png" alt="Abobe XD"/> </a> </p> </div> --> </article> <article id="three-d-modeling-software">

Three D Modeling Software

3D graphics are used in gaming, film making, architecture, engineering, and 3D printing. 3D artists & designers use specific 3D modeling software, mentioned in this section.

</article> <article id="addendum">

Addendum (Reference & Inspiration)

Awesome Design Tools & Plugins is curated by Lisa Dziuba & Valia Havruliyk from Flawless team. And it was hugely inspired by articles from the design community and Prototypr.io Toolbox made by our good friend Graeme Fulton. If you found some great design tools, please suggest it. Thanks for making this project awesome :)

</article>