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.
#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
#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
#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 onlineboxy-svg.com
#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
#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
#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
#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
#9 Coolors
Free Color palette generator
Coolors - The super fast color palettes generator!
*Generate or browse beautiful color combinations for your designs.*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
#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
#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
#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
#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
#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
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:)
