Design Tools

Prototyping Tools

Figma

Real-time collaboration, detailed version history, browser based, team component libraries, live device test, integration with other popular apps for productivity. You can start with two members for free but projects will be public and pricing is good for everyone.

Adobe XD

Recently Adobe made it available for free to use with paid plans for extras. If you are part of Creative Cloud ecosystem this is going to be very helpful as integrations with Adobe Photoshop and Adobe After Effects is available. Too many free to start resource available by Adobe to build your very first prototype in easily.

Sketch

The most popular for a reason it lets you create the best of your ideas in the fastest way possible and you get great amount of control over every design aspects which can be updates and replaced in seconds. With the plugin ecosystem, integrations with all major softwares, collaborations with other teammates it worth trying out for every designer.

InVision

Start with Free Forever plan which gives you 1 active Prototype. It comes with InVision cloud, studio, design system manager and integrations with all services. The main focus is designing better, faster and in collaboration to deliver the best of your work. It also provides CSS for designs for faster development, everything is backed up in cloud.

Webflow

The fastest way to transform your prototype in final product. It provides a lot of resources from your prototype which makes web developers work much faster than before. You will get by far the best experience in designing a website with a lot of animation, details from prototype to final website launching.

Marvel

Everything works in browser no need to download anything that means work anytime anywhere just login in and start working, easy to use interface, free to start with features like wireframing, prototyping, handoff, collaboration, integrations.

Overflow

If you have already created design in any other software you can import it here and create user flow design faster and easily. It’s Free with no paid plans because currently in beta, definitely try out for your current projects maybe you can save money.

Phase

Not yet launched get early access. The main focus here is making things much faster from design to final website. You can export code not just basic css instead JavaScript, React, Swift, Android, HTML and Custom as per need isn’t soo cool?

MockingBot

Free for 1 member for 3 projects with sketch plugin. Works completely online that means everything is saved online. Design, wireframe multiple screens, test it on multiple screens sizes when satisfied download for development, using inspect code it can show useful info for time saving.

Color Tools

CoolHue 2.0

Get 50+ Cool gradient hues and swatches. One click CSS code or download as a image.

Blend

Select two colors of your choice from color picker and just blend with control over degree and way.

uiGradients

There are 330+ Gradients with one click rotate direction button. You will get confused in lots of colors.

Coolors

Super fast color schemas generator. You can generate color palette in just few clicks that means no more color confusions.

Flat UI Colors

As the name says, get flat colors no gradient grouped in 14 different palette. One click copy RGB, RGBA, HEX color code to paste anywhere.

Color Wheel

You get greater control over colors for generating palette. Even you can import an image to generate color palette. Also you can sync with adobe account.

Shade

Define a base color then adjust saturation, hue, lightness, gradient spread and get code to directly use anywhere you want.

SVG Color Filter

Upload an image change the values copy the code and use it on your website. It’s like a filter without changing the original image.

Random A11Y

You get colors which are focused on accessibility. Upvote or Downvote colors at end end look at the all the colors you liked to use in your next project.

Color Supply

Generate colors based on predefined rules. Complimentary, Analogous, Triad, Split-complement, Square these options give you much better colors.

Color Favs

Generate color palette by uploading an image. You can take screenshot of any website and upload to quickly get ready to use color palette.

Color Hunt

You don’t need to select color or generate anything. Find already generated hundreds of cool color palette just keep scrolling it will never end.

CSS Color Names

Total of 147 colors that are already available and supported by browsers just by calling there names no need to define values. The colors are actually quite awesome.

Color by Fardos

Super hand utility to pick any color from website and get more similar suggestion. You can keep picking colors and save for later use or sync between multiple browser with same account.

Lost In The Rainbow?

After browsing few website you might feel confused between lots of good colors. Start with one of your favorite or first choice of color and build color palette for your project for consistency.

Free to Use Images

Unsplash

Everyone is using free images from unsplash without any doubts it’s the best with amount of images they have over different categories. There api is useful for easy integration.

Pexels

After unsplash most sought option by designers and web developers for images. They also organize challenges on monthly basis which means more awesome photos.

Pixabay

Here you can get images as well as videos for free to use in your projects without any copyright issues. All the phots aren’t available on single websites check different websites.

Burst

Photos are well organized into categories on the homepage itself. It’s part of the Shopify but all the images here are free to use

Free Range

You might find photos which aren’t available on other websites. No attribution required. You can contribute to increase the photos for community.

Life of Pix

Super high resolution images and all free for your websites or design projects. New photographs are added every week.

Stock Snap

Some really great photos over a huge list of categories well organized.

Kaboom Pics

You can search photos using colors and find color palette of each photo.

Realistic Shots

A project by Commit 2 Design. Some Fresh high quality photos and new photos are added every week.

Gratisography

As they say Quirky, creative and always free photos. Limited photos are available still you can find some different images maybe.

Pikwizard

You get tons of stock photos over 40+ different categories and all free to use for your needs. A lot of pictures, which tend to be rare in free stock photos library.

Foodies Feed

Really delicious photos, don’t open when you are hungry. Designer or foodie you will find yummy photos and all free to use.

What About Attribution?

Always read websites image attribution policy before using any image. Most of the website mentioned above does not force you for attribution, still where possible give credits to original creator.

Cool Icon Packs

Heroicons

Handcraft Icons from the Makers of Tailwind CSS with MIT license.
Icons can be copied directly as SVG

Feather

Most common icons used in designing navigation and interfaces. All open source free to use. One click SVG download option.

Material Design

Provided by Google huge sets of icons in filled, outlined, rounded, two-tone an sharp icons all for free. Either get SVG or PNG on different DPI.

Icons8 – Ouch

You will love the illustration across 48 different type of subjects which you can use in your projects. If you need vectors then you need to pay else it’s free by giving credits.

Flat Icon

Probably the largest database of icons of every type grouped into packs.It comes with free and premium both options. Download in multiple formats PNG, PSD, SVG, BASE64 or EPS.

Icon8

Free 84,800 Icons considering different devices, environment and style. Download directly of generate html in one click even CDN link also available for Free.

Font Awesome

Most popular in web development comes with free and pro version. You can get more than thousands of icons directly ready too use no extra work needed.

Icon Store

It’s like unsplash but for icons. Get icons designed by first class designer. Free to use without any attribution.

IconFinder

More than 100k free icons very creatively designed and grouped into different categories.

Good Stuff No Nonsense

Get hand drawn icons for free with many other in paid option.

Get Inspiration

Dribble

A community for designers to share what you are working on and inspire others for there next projects. Every designer loves platform like this to get visibility around the world.

Behance

Another most popular place for designers to share there work, discover work of other creative people around the world. It works like online portfolio for creative people.

UpLabs

Find best of design, inspiration, resources and a lot of freebies by designers. Everything is well categorized and there is also challenges in which you can participate to show your skills.

Mobbin

Get inspiration from 150+ Handpicked user interface and patterns for iOS devices in wide variety to implement in your next projects.

Let's Be Friends 🤘