# Design and UI Tools for Frontend Development — Part 1

In this post, we will see some of the best Design and UI Tools for Frontend to ease your development work

#### #1 AllTheFreeStock

A curated list of free stock images, audio, and videos.

%[https://allthefreestock.com/?source=post_page-----c67a77cb5264--------------------------------] 

#### #2 Ant Design Landing Page

Ant Design Landing Page provides a template built by Ant Motion’s motion components. It has a rich homepage template, downloads the template code package, and can be used quickly. You can also use the editor to quickly build your own dedicated page.

[**Ant Design Landing - Ant Design Landing Page 的模板与规范**  
*Ant Design Landing 平台拥有丰富的各类首页模板，下载模板代码包，即可快速使用，也可使用首页编辑器，快速搭建一个属于你的专属首页*landing.ant.design](https://landing.ant.design/)

#### #3 Backlight

Backlight is a very complete coding platform where teams build, document, publish, scale, and maintain Design Systems. The free plan allows up to 3 editors to work on 1 design system with unlimited viewers.

[**Backlight - Build Design Systems - Tool for front-end teams**  
\*Empower your front-end with a collaborative design system platform: code, design, stories, tests, documentation…\*backlight.dev](https://backlight.dev/)

#### #4 BoxySVG

A free installable Web app for drawing SVGs and exporting in SVG, png, jpeg, and other formats.

[**Boxy SVG**  
*Create and edit Scalable Vector Graphics (SVG) files online*boxy-svg.com](https://boxy-svg.com/app)

#### #5 Circum Icons

Consistent open-source icons such as SVG for React, Vue, and Svelte.

[**Circum Icons - Open source icons**  
\*Circum is a collection of simply beautiful open source icons. Each icon is designed on a 24x24 grid with an emphasis on…\*circumicons.com](https://circumicons.com/)

#### #6 Clever Brush

Free Graphics Design / Photo Collage App, also they offer paid integration of it as a component.

[**Online Vector Editor Software for Printing and Digital Publishing - CleverBrush**  
\*Make use of our templates library to create stunning designs and photo collages for social network posts, invitations…\*www.cleverbrush.com](https://www.cleverbrush.com/)

#### #7 CodeMyUI

A handpicked collection of Web Design & UI Inspiration with Code Snippets.

[**CodeMyUI**  
\*Code by: Kirtis McGlynn If you are having trouble with the pen, try the archived copy on GitHub.... Read More Code by…\*codemyui.com](https://codemyui.com/)

#### #8 ColorKit

Create color palettes online or get inspiration from top palettes.

[**ColorKit - Color Palettes, Gradients, Inspiration, and Color Tools**  
\*For artists and designers, bring your designs to life with our collection of online color tools and color palette…\*colorkit.co](https://colorkit.co/)

#### #9 Coolors

Free Color palette generator

[**Coolors - The super fast color palettes generator!**  
\*Generate or browse beautiful color combinations for your designs.\*coolors.co](https://coolors.co/)

#### #10 Branition

Hand-curated color pallets best fitted for brands.

[**290+ Colors for Logos and Branding | Branition**  
\*Explore the collection of hand-curated color palettes best fitted for logos and branding, with an instant preview on a…\*branition.com](https://branition.com/colors)

#### #11 CSS Gradient

Free tool to easily generate custom cross-browser CSS gradients. In RGB and HEX format.

[**CSS Gradient Generator - Make and generate beautiful gradients**  
\*The CSS Gradient online generator tool is a nice and simple to use utility to quickly generate linear and radial color…\*www.css-gradient.com](https://www.css-gradient.com/)

#### #12 Designer.io

Design tool for UI, illustrations, and more. Has a native app.

[**Corel Vector | Free Trial**  
\*Create and access design projects from anywhere with Corel Vector - a powerful, cloud-based vector graphics app with…\*www.coreldraw.com](https://www.coreldraw.com/en/product/vector/)

#### #13 Easyvectors

EasyVectors.com is a stock of quality free SVG vector art. Download the best vector graphics absolutely for free.

[**Free Vectors - Download Stock Vector Art, Images, Graphics, Clipart.**  
\*Easy Vector downloads - biggest free premium vector collection, vector stock, background vector, silhouette vectors…\*easyvectors.com](https://easyvectors.com/)

#### #14 Figma

Online, collaborative design tool for teams; free tier includes unlimited files and viewers with a max of 2 editors and 3 projects.

[**Figma: the collaborative interface design tool.**  
\*Figma connects everyone in the design process so teams can deliver better products, faster. Get started Join other…\*www.figma.com](https://www.figma.com/)

#### #15 Framer motion

Framer helps you iterate and animate interface ideas for your next app, website, or product — starting with powerful layouts. For anyone validating Framer as a professional prototyping tool: unlimited viewers, up to 2 editors, and up to 3 projects.

[**Framer: Ship sites with style**  
\*Go from design to world-class site with Framer, the web builder for creative pros.\*www.framer.com](https://www.framer.com/)

### Congratulations!!

In this post, we have seen some of the best Design & UI tools for Frontend development will catch up in another post with more crafts. Till then Happy Learning:)