Free Design Tools - Generators, Graphics Templates, Prototyping ...
Tags: design, webdev, productivity, tooling
Published: 2021-02-09 07:52:27



These resources will be updated frequently. Therefore, bookmarking is suggested. You can check the original and updated page by visiting: [Free Design Resources](https://www.cbsofyalioglu.com/design/free-design-resources/) 
Another shameless plug of mine is the article that reviews [Best Free Platforms for Blogging](https://bloggingplatforms.app/blog/best-free-platforms-for-blogging)



# Free Design Resources and Graphic Design Tools
The collections of free design resources and graphic design tools. I listed many graphic design resources that make it possible to generate and create useful graphics.

If you are also interested in not only design resources but also content creation tools, you can check my other curated list: 
- [Visual and Written Content Creation Tools](https://www.cbsofyalioglu.com/en/content-creation-tools/)
- [Ultimate list of blogging sites](https://www.cbsofyalioglu.com/blogging/best-blogging-sites/)





## Free Design Resources Part I – Generator Apps

These tools generate design resources for you. They are simple tools but generate effective patterns and code. Those are free design resources that you can tweak and use them.

### Magic Pattern 
Magic Pattern consists of a bunch of freemium tools. The link to the SVG wave generator is below; also check out other tools.
<a rel="noopener noreferrer" target="_blank" href="https://www.magicpattern.design/tools/wave-generator">Magic Pattern SVG Wave Generator</a>

### Get Waves
![Get Waves](https://dev-to-uploads.s3.amazonaws.com/i/n2dbweavvk7qbjtpd2t7.png)
A free SVG wave generator to make unique SVG waves for your next web design. Choose a curve, adjust complexity, randomize!
<a rel="nofollow noopener noreferrer" target="_blank" href="https://getwaves.io/">Get Waves</a>


### SVG Waves
![SVG Waves](https://dev-to-uploads.s3.amazonaws.com/i/uudxgzjjlgf6w2zu3e3h.png)
Another generator that produces wave patterns in SVG or PNG formats. SVG Wave is a minimal gradient svg wave generator with a lot of customization. It lets you the ability to generate and export pngs and svgs of beautiful waves. SVG wave also lets you layer multiple waves. Create SVGs for your website designs.
<a rel="nofollow noopener noreferrer" target="_blank" href="https://svgwave.in/?ref=cbsofyalioglu">Svg Wave</a>

### Faux Code Generator

This app requires a link of any GitHub gist. When you provide the source code, the web app transforms it to faux code graphics.
<a rel="nofollow noopener noreferrer" target="_blank" href="http://knutsynstad.com/fauxcode/?ref=cbsofyalioglu">Faux Code Generator</a>

### Neumorphism CSS Generator
![Neumorphism](https://dev-to-uploads.s3.amazonaws.com/i/hzm15cp85h8hbgisfp6r.png)
This web app allows you to create neumorphism CSS code that you tweak visually.
<a rel="nofollow noopener noreferrer" target="_blank" href="https://neumorphism.io/">Neumorphism CSS Generator</a>

### Soft UI

Another free design resource that makes it possible to build neumorphic style code.
Explore the most advanced CSS box shadow generator for your UI. Create colors, gradients, elements in the neuromorphic design: fast, free, no ads.

<a rel="nofollow noopener noreferrer" target="_blank" href="https://www.softui.io/">Soft UI</a>

### Glitch Art
![Glitch Art](https://dev-to-uploads.s3.amazonaws.com/i/oct86h6tjj5odztjrxs8.png)
The glitch art generator produces glitch patterns.
<a rel="nofollow noopener noreferrer" target="_blank" href="https://glitchart.io/">Glitch Art</a>

### Fancy Border Generator
![Fancy Border Generator](https://dev-to-uploads.s3.amazonaws.com/i/4um84tuelwxhtseb7lyr.png)
This online design resources allows you to make custom shape borders.
<a rel="nofollow noopener noreferrer" target="_blank" href="https://9elements.github.io/fancy-border-radius/">Fancy Border Generator</a>

### Components.ai
![Components.ai](https://dev-to-uploads.s3.amazonaws.com/i/fdqirzn5hq3d3fsu95bh.png)
This design resource actually a suit. It consists of many design generator that is produced by machine learning algorithms. Gradients, color scales, voronoi, and bootstrap color palette generator.
<a rel="nofollow noopener noreferrer" target="_blank" href="https://components.ai/">Components AI</a>

### Material Shadow

It allows you to add shadows to your icons. You can also select predefined material icons.
<a rel="nofollow noopener noreferrer" target="_blank" href="https://android-material-icon-generator.bitdroid.de/">Material Shadow</a>

### Technology Bullshit Generator

If you need flashy words, then this app makes it for you. It creates a flashy but bullshit word generator.
<a rel="nofollow noopener noreferrer" target="_blank" href="https://www.makebullshit.com/">Tech Bullshit Generator</a>

### Squircley

Squircley generate a shape neither square nor circle. You can tweak it as you want.
<a rel="nofollow noopener noreferrer" target="_blank" href="https://squircley.app/">Squircley</a>

### Shape Divider

It divides the shape![🙂](https://s.w.org/images/core/emoji/13.0.1/svg/1f642.svg) You realized that some kind of divided shapes are well suited on landing pages. You can do those kind of shapes with this design resource.
<a rel="nofollow noopener noreferrer" target="_blank" href="https://www.shapedivider.app/">Shape Divider App</a>

### Blobs

Decorative blob generator tool.
<a rel="nofollow noopener noreferrer" target="_blank" href="https://blobs.app/">Blobs</a>

### Omatsuri Suite

Omatsuri is not a single graphic design tool. It is actually a free design resources suit. You can find many useful graphic design resources such as triangle generator, wave generator, color shades and color palette generators.
Progressive Web Application with 12 open source frontend focused tools
<a rel="nofollow noopener noreferrer" target="_blank" href="https://omatsuri.app/https://getwaves.io/">Omatsuri Suite</a>

### Blog Cover Generator

Easy blog post cover generator.
<a rel="nofollow noopener noreferrer" target="_blank" href="https://blogcover.now.sh/">Blog Cover Generator</a>

### Patternico

A pattern generator.
<a rel="nofollow noopener noreferrer" target="_blank" href="https://patternico.com//">Patternico</a>

### Doodad

Yet another pattern generator
<a rel="nofollow noopener noreferrer" target="_blank" href="https://doodad.dev/pattern-generator//">Doodad</a>

### Tabbied

Doodle with generated patterns. 
<a rel="nofollow noopener noreferrer" target="_blank" href="https://tabbied.com/">Tabbied</a>

### BG Jar

Very useful background pattern generator which can export your design in various formats such as CSS, SVG or PNG.
<a rel="nofollow noopener noreferrer" target="_blank" href="https://bgjar.com/">BG Jar</a>



## Free Design Resources Part II – Visual Content Creator Tools

### Canva
![Canva](https://dev-to-uploads.s3.amazonaws.com/i/rbaa6fg2bvmxnpelxu20.png)
Canva is the most popular and the most used graphic content creations site. It has both free and premium plans. If you need a quick visual content Canva is one of the best design resource.
<a rel="nofollow noopener noreferrer" target="_blank" href="https://www.canva.com/">Canva</a>

### Easil

Easil is another Canva alternative that has limited features for free plan.
<a rel="nofollow noopener noreferrer" target="_blank" href="https://about.easil.com/">Easil</a>

### Visme
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/63999v7wchc57drqrnd7.png)
Visme is an online tool that allows you to easily create info-graphics. Those are very useful for visual explanations and building back-links.
<a rel="nofollow noopener noreferrer" target="_blank" href="https://www.visme.co/">Visme</a>

### Glorify

Glorify is a Canva-like tool that specifically create graphics for different platforms such as Product Hunt, Shopify, Fiver etc…
<a rel="nofollow noopener noreferrer" target="_blank" href="https://www.glorifyapp.com/">Glorify</a>

### Polotno Studio

Polotno Studio allows you to edit your graphics.
<a rel="nofollow noopener noreferrer" target="_blank" href="https://studio.polotno.dev/">Polotno Studio</a>

### Projector

Projector is also another free graphic template design tool.
<a rel="nofollow noopener noreferrer" target="_blank" href="https://projector.com">Projector</a>

### Taler

Taler is relatively new tool comparing with other free design resources. It is also powered by e-commerce platform Shopify.
<a rel="nofollow noopener noreferrer" target="_blank" href="https://www.taler.app/">Taler</a>

### Crello

It is very limited graphic design tool. Only 5 design downloads are permitted.
<a rel="nofollow noopener noreferrer" target="_blank" href="https://crello.com/">Crello</a>

### Artify

I personally like the illustration of Artify. Once in a while, It does not respond. However, It is now working. I should also mention that attribution is required.
<a rel="nofollow noopener noreferrer" target="_blank" href="https://www.artify.co/">Artify</a>



## Free Design Resources Part III – Prototyping and Graphic Editing Tools

### Figma
![Figma](https://dev-to-uploads.s3.amazonaws.com/i/dlqh3w2b5cwcpr9go6lb.png)
Figma is awesome. It is a sketch alternative. Moreover, It is boosted by Web-Assembly technology that makes possible to do these stuff on your browser. It is great for teams and freelancers. It also allows you to graphically edit React components. In this way, Framer is a unique design tool.
<a rel="nofollow noopener noreferrer" target="_blank" href="https://figma.com/">Figma</a>

### Penpot

Penpot is an open-source free prototyping and design tool that is currently at alpha stage.
<a rel="nofollow noopener noreferrer" target="_blank" href="https://penpot.app/?ref=cbsofyalioglu">Penpot</a>

### Framer
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uvjm15jpmey5w1ylxhcl.png)
Framer stands out with its mobile and interaction prototype development. It has web version as long as MacOS versions. React developers may know [Framer Motion](https://www.framer.com/motion/) library which is the product of Framer.
<a rel="nofollow noopener noreferrer" target="_blank" href="https://www.framer.com/">Framer</a>

### Lunacy

Lunacy is a desktop software created by Icons8. Because of the creator company, it has built-in assets. Currently only available for Windows.
<a rel="nofollow noopener noreferrer" target="_blank" href="https://icons8.com/lunacy">Lunacy</a>

### Spline

One of the best tools of 2020. Spline allows you to create 3D geometry. Moreover, It has Linux support.

<a rel="nofollow noopener noreferrer" target="_blank" href="https://spline.design/">Spline</a>



## Free Design Resources IV – Design System Tools

### Toolabs Design System

Toolabs is a very intuitive tools that allows you to create your design system and export it with various formats such as CSS, JSON etc.. Also, It creates a web page for your design system that you can access and share it easily.
<a rel="nofollow noopener noreferrer" target="_blank" href="https://www.toolabs.com/">Toolabs DSM</a>

### Frontify

Frontify actually is more than a design system tool. It is a complete brand design suite. It has a free plan for freelancers. You can create your design guideline and design system. Frontify also allows you to create a web page in order to access and share your guideline. Moreover, you can develop and design a user-interface component and share the code easily. A sample guideline page can be seen below:

![Free Design Resources - Frontify ](https://fra1.digitaloceanspaces.com/cbsofyalioglu/wordpress/cbsofyalioglu/Screenshot-from-2021-02-09-08_03_15-scaled.jpg)
<a rel="nofollow noopener noreferrer" target="_blank" href="https://www.frontify.com/">Frontify</a>

### Diez

Tokens are great when the case is design. Diez is a tool that is specialized in creating design tokens.
<a rel="nofollow noopener noreferrer" target="_blank" href="https://diez.org/">Diez</a>

### ZeroHeight

You can create your design guidelines with Zeroheight and make it single source of truth. Because it includes both design and code assets, communication with designers and developers becomes less problematic.

<a rel="nofollow noopener noreferrer" target="_blank" href="https://zeroheight.com/">ZeroHeight</a>



## Free Design Resources V – Miscellaneous

### Design Lobby

It is nice looking asset manager. You can deploy your design assets such as typefaces, icons, images and colors. Currently in a beta phase.
<a rel="nofollow noopener noreferrer" target="_blank" href="https://designlobby.app/">Design Lobby</a>

### Squoosh

Squoosh is a one page web app that is the easiest way to compress images. As we know, Google stated that fast opening is an important factor when ranking websites. Therefore, image compression is a must for websites that is aiming to rank higher. Considering the situation, Squoosh is an important free design resource.
<a rel="nofollow noopener noreferrer" target="_blank" href="https://squoosh.app/">Squoosh</a>

Currently the original post includes more than 70 [Free Design Resources and Graphic Design Tools](https://www.cbsofyalioglu.com/design/free-design-resources/)