111 amazing resources you're gonna love 💖
Tags: code, css, javascript, react
Published: 2021-03-19 08:05:39

# Hello Devs 👋

This is Savio here. I'm young dev with an intention to enhance as a successful web developer. I love building web apps with React. I have proved my superiority in frontend technologies.

Today, I'm gonna share 100+ super amazing resources every developer are gonna love for sure 💖 I hope you'll enjoy this article.

---

## 3 UX/UI Design Systems to gain inspiration

- 🤟 [Polaris by Shopify](https://polaris.shopify.com/) - an amazing design system by shopify

- 🐵 [Patterns by Mailchimp ](https://ux.mailchimp.com/patterns/color) - super creative design system by mailchimp

- 💪 [Google’s Material Design](http://material.io/) - A huge design system by Google

## 3 tools every UX/UI designer should know

- 📒 [Notion](https://www.notion.so) - is an all-in-one workspace to organise your notes, projects and tasks

- 🎸 [Figma](https://www.figma.com/) - is a multiplayer interface design tool to create mockups, design systems and prototypes ⁣

- ⭐️ [Miro](https://miro.com/) - is a real-time whiteboard to gather research and ideate with team mates ⁣

## 3D websites that will inspire every UX/UI designer ⁣

- 🍻 [Protopie.com](https://Protopie.com/) - go the extra mile with 3D video and awesome animations on scroll

- ♻️ [Pitch.com](https://Pitch.com/) - began the 3D movement and their characters are super friendly and feature in their website and product. ⁣

- 💯 [kukla-kit.com](https://wannathis.one/kukla-kit) - is a 3D library for Figma projects

## 3 chrome extensions for every UX/UI Designer ⁣

- ⌨️ [Font Ninja](https://chrome.google.com/webstore/detail/fonts-ninja/eljapbgkmlngdpckoiiibecpemleclhh) lets you inspect and bookmark fonts and any webpage⁣

- 💻 [Go Full Page](https://chrome.google.com/webstore/detail/gofullpage-full-page-scre/fdpohaocaechififmbbbbbknoalclacl?hl=en) takes full page screenshots of any webpage ⁣

- 🔥 [Loom](https://chrome.google.com/webstore/detail/loom-for-chrome/liecbddmkiiihnedobmlmillhodjkdmb) lets you record videos directly in chrome

## 3 Illustration Libraries for UX/UI Designers ⁣

- 🌈 [Absurd.Design](https://Absurd.Design/) have expressive illustrations for products with personality ⁣

- 🥰 [Blush.design](https://Blush.design/) have a great mix of characters from artists around the world ⁣

- 🌟 [Ouch!](https://icons8.com/illustrations) - have a comprehensive library of searchable illustrations

## 3 Typography tools for UX/UI Designers ⁣

- 🍭 [Fontjoy.com](https://Fontjoy.com/) generates font pairings with a contrast slider in a single click ⁣

- 🍟 [app.typeanything.io](https://app.typeanything.io/) let’s you experiment with font pairings, sizes, spacing, and weights live i. The browser ⁣

- 🎨 [Font Base](https://fontba.se/) is a free font manager with access to Google’s fonts for Mac and windows

## 3 color tools for UX/UI Designers ⁣

- 🎹 [picular.co](https://picular.co/) generates colors based on keywords ⁣

- 🚆 [Coolhue](https://Coolhue/) is a gradient plugin for Figma & Sketch ⁣

- 🚀 [Eva](https://eva.design/) uses AI to generate feedback colors based off your brand color

## 3 user testing tools for UX/UI Designers ⁣

- 🎉 [Maze.design](https://Maze.design/) is great for running unmoderated tests as it integrates smoothly with your existing prototyping workflow ⁣

- ✨ [Lookback.io](https://Lookback.io/) is super for moderated usability tests of your product live with users ⁣

- 🤙 [Usertesting.com](https://Usertesting.com/) is an accessible tool for your whole team to test with

## 3 3D libraries for UX/UI Designers ⁣

- 🏀 [Shapefest.com](https://Shapefest.com/) is a massive library of 3D shapes ⁣

- 📎 [Storytale.com](https://Storytale.com/) has a great mix of 3D characters and objects ⁣

- 🥳 [Toy Faces](https://amritpaldesign.com/toy-faces) is a super fun 3D avatar library

## 3 Prototyping tools for UX/UI Designers ⁣⁣

- 💫 [Figma](https://Figma.com/) lets you effortlessly create prototypes whilst you design ⁣

- 🍿 [Framer](https://Framer.com/) has an extensive library of notions and tutorials to help you learn how to prototype ⁣

- 🤯 [Protopie](https://Protopie.com/) helps you create mind blowing prototypes with native elements

## 3 sites to gain inspiration as a UX/UI Designer ⁣

- 📱 [mobbin.design](https://mobbin.design/) is a hand picked collection of the latest mobile design patterns ⁣

- 💼 [Land-Book.com](https://Land-Book.com/) is a great place for landing page and portfolio inspiration ⁣

- 🏀 [Dribbble](https://Dribbble.com/) is perfect for conceptual thinking and experimental design

## 3 productivity tools for UX/UI Designers ⁣

- 🏃‍♂️ [Notion](https://Notion.so/) is perfect for organising your weekly tasks and design team wiki ⁣

- 🍅 [Tomato 2](https://tomato2.app/) is a super app for following the pomodoro technique and managing your time ⁣

- 📅 [Calendly](https://calendly.com/) helps your organise meetings without the back and forth emailing.

## 3 accessibility tools for UX/UI Designers ⁣

- 🎨 [colorable.jxnblk.com](https://colorable.jxnblk.com/) - Colorable is a great tools for generating an accessible color palette ⁣
- 💯 [getstark.co](https://getstark.co/) - Stark is a super Figma, XD, Sketch plug-in for running contrast and color blind tests live in your designs ⁣

- 🌊 [Wave](https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh) is a wicked chrome extension for running an accessibility evaluation live on your site.

## 3 free image libraries for UX/UI Designers ⁣

- 🎥 [pexels.com](https://pexels.com/) - Pexels is a super resource for free images and videos ⁣

- 🌍 [unsplash.com](https://unsplash.com/) - Unsplash has powerful search, filters and collections from around the world ⁣

- ✌️ [Reshot.com](https://Reshot.com/) - Reshot is another super image resource with handpicked, non-sticky images.

## 3 font resources for UX/UI Designers ⁣

- ⚡️ [Google fonts](https://fonts.google.com/) has over 1k searchable fonts categorised by type. ⁣

- 📦 [Open Foundry](https://open-foundry.com/fonts) is a super resource for handpicked open-source typefaces ⁣

- 🐺 [Typewolf](https://www.typewolf.com/) is super for learning about fonts and font pairings.

## 3 portfolio tools for UX/UI Designers ⁣

- ⚡️ [Super.so](https://Super.so/) is quick and easy way to convert your Notion docs into an online portfolio ⁣

- 🖥 [Webflow.com](https://Webflow.com/) lets you design your portfolio directly in the browser across multiple devices ⁣

- 🖊 [Grammarly.com](https://Grammarly.com/) fixes your grammar errors helping you write better case studies

## 3 no-code tools for UX/UI Designers ⁣

- ⚡️ [Webflow](https://webflow.com/) is the best no-code website builder with awesome interactions ⁣

- 🍬 [Bubble](https://bubble.io/) is a great tool for building web apps without code ⁣

- 💵 [MemberStack](https://www.memberstack.com/) is a no-code membership tool for any website

## 3 UX Writing resources for UX/UI designers⁣

- ✍️ [dailyuxwriting.com](https://dailyuxwriting.com/) have super how to guides to up your writing game⁣

- 🤙 [Uxlibrary.org](https://Uxlibrary.org/) define the value of UX Writing with super ux writing blog links ⁣

- 📖 [uxplanet.org](https://uxplanet.org/) is an awesome handbook for UX writers⁣

## 3 Figma plugins for UX/UI Designers ⁣

- ↪️ [Autoflow](https://www.figma.com/community/plugin/733902567457592893/Autoflow) allows you to neatly draw the flows between your frames ⁣

- 👀 [Color-Palettes](https://www.figma.com/community/plugin/740832935938649295/Color-Palettes) font picker lets you view typefaces before you select them ⁣

- 📸 [Unsplash](https://www.figma.com/community/plugin/738454987945972471/Unsplash) is super for adding awesome stock images to your designs

## 3 color gradient tools for UX/UI Designers ⁣

- 👀 [webgradients.com](https://webgradients.com/) have 180 awesome gradients with full screen preview ⁣

- 💪 [coolors.co](https://coolors.co/) have a super gradient maker with a neat toggle between radial and linear ⁣

- ⚡️ [uigradients.com](https://uigradients.com/) is a super resource to grab limitless gradients with a neat full screen toggle

## 3 user flow libraries for UX/UI Designers ⁣

- 📱 [uxarchive.com](https://uxarchive.com/) have a super library of user flows from top mobile apps ⁣

- ⚡️ [Mobbin.design](https://Mobbin.design/) is the largest user flow library that you can click through on a device ⁣

- 🍿 [pageflows.com](https://pageflows.com/) is an awesome user flow library with web and mobile apps

## 3 icon libraries for UX/UI Designers ⁣

- 💡 [Ikonate.com](https://Ikonate.com/) is a super library of customisable icons that you can preview in dark mode ⁣

- ⚡️ [Useanimations.com](https://Useanimations.com/) is an awesome library of animated icons ⁣

- 👀 [Streamline.to](https://Streamline.to/) is an icon app and plugin with over 30k icons to use

## 3 AI powered tools for UX/UI Designers ⁣

- 🎨 [Khroma.co](https://Khroma.co/) is an AI powered color palette generator based on your fave colors ⁣

- ✏️ [UIzard.io](https://UIzard.io/) is an AI tool that converts your sketches into mockups ⁣

- 📸 [remove.bg](https://remove.bg/) is an AI tool that removes any background from an image

## 3 color palette tools for UX/UI Designers ⁣

- 😁 [happyhues.co](https://happyhues.co/) is a color palette tool that lets you view curated colors in context ⁣

- 🌈 [colorinspo.com](https://colorinspo.com/) let’s you generate a color palette based on color theory ⁣

- ⚡️ [Colors.muz.li](https://Colors.muz.li/) is a color palette generator with a live UI kit demo

## 3 Zoom alternatives for UX/UI Designers ⁣

- 🇳🇴 [Whereby.com](https://Whereby.com/) is a no fluff video meeting tool made by a secure friendly team in Norway⁣

- 💭 [Vowel.com](https://Vowel.com/) is a video conference tool that helps you host, plan and transcribe meetings ⁣

- 📈 [Macro.io](https://Macro.io/) is an interface tool for Zoom that allows you to visualise meeting discussions

## 3 white boarding tools for UX/UI Designers ⁣

- 🕹 [Freehand](https://www.invisionapp.com/freehand) by Invision is a quick and easy to use whiteboarding tool⁣

- ⚡️ [Miro](https://miro.com/) is a super tool with loads of handy templates to kickstart your white boarding sesh ⁣

- 🎨 [Mural](https://www.mural.co/) is a great white boarding tool to use with your team ⁣

## 3 grid extensions for UX/UI Designers ⁣

- 📏 [Page Ruler](https://chrome.google.com/webstore/detail/page-ruler/idhjfgkakeliobkfbijghiaklmiaheag?hl=en) is super for defining the spacing between components ⁣

- 🎾 [Baseliner](https://chrome.google.com/webstore/detail/baseliner/agoopbiflnjadjfbhimhlmcbgmdgldld?hl=en-GB) is a super grid extension for applying a baseline to your design ⁣

- 🎹 [Grid Overlay](https://chrome.google.com/webstore/detail/css-grid-overlay/hajfilceeneohkmcakehndmaeonhlack?hl=en) is a great for applying a grid system directly to any page

## 3 awesome AI tools for UX/UI Designers ⁣

- 🎨 [tailwind.ink](https://tailwind.ink/) is an awesome AI color shade generator ⁣

- 🔥 [visualeyes.design](https://visualeyes.design/) is a AI heatmap generator for your designs ⁣

- ✂️ [Clipdrop](https://clipdrop.co/) is a super AR copy paste tool for adding images, objects, and text to your design ⁣

## 3 massive Design Systems to inspire UX/UI Designers ⁣

- ✅ [Atlassian.design](https://Atlassian.design/) have a mammoth design systems with neat accessibility checks ⁣

- 👀 [buffer](https://bufferapp.github.io/ui/#/ui/GettingStarted/getting-started) have a huge design systems with super guidelines on each component ⁣

- 🌔 [IBM](https://www.carbondesignsystem.com/) whopping carbon design system works across a light and dark theme

## 3 super fun typography tools for UX/UI Designers ⁣

- 💻 [wordmark](https://wordmark.it/) is a super tool that previews every font on your computer ⁣

- 🎉 [Prototypo](https://www.prototypo.io/) is a super tool for creating your own font⁣

- 💯 [kerntype](https://type.method.ac/) is a game that helps you learn how to learn type

## 3 device mockup generators for UX/UI Designers ⁣

- 💻 [previewed.app](https://previewed.app/) is a super 2D and 3D device mockup generator across devices ⁣

- 🤯 [threed.io](https://threed.io/) is an awesome 3D mockup generator directly in the browser ⁣

- ⚡️ [Rotato](https://www.rotato.xyz/) is a super animated mockup generator

## 3 animated icon libraries for UX/UI Designers ⁣

- 🎄 [iconfinder.com/p/animated-Christmas-icons](https://iconfinder.com/p/animated-Christmas-icons/) is a super festive library of animated Christmas icons ⁣

- 🌱 [loading.io](https://loading.io/) is a super tool for making your own custom Animated loading icon ⁣

- 🍋 [lottieflow.com](https://lottieflow.com/) is a super library of animated icons that you can filter by category

## 3 super analytics tools for UX/UI Designers ⁣

- 👏 [useFathom.com](https://useFathom.com/) is a super simple and visual analytics tool for your product ⁣

- 🤩 [Plausible.io](https://Plausible.io/) is another awesome analytics tool with a neat UI ⁣

- ⚡️ [Useberry.com](https://Useberry.com/) is great for grabbing analytics directly on your prototype

## 3 super productivity tools for UX/UI Designers ⁣

- 🏡 [meetsidekick.com](https://meetsidekick.com/) is a super browser that gives your apps a home and removes the need for cluttered tabs ⁣

- ✅ [getslash.co](https://getslash.co/) is an awesome tool that helps you complete your to do list ⁣

- 📧 [hey.com](https://hey.com/) is a super tool that makes emails fun and easy to manage

## 3 character illustration libraries for UX/UI Designers ⁣

- 👖 [Humaaans](https://www.humaaans.com/) is an awesome illustration library of characters that you can mix and match ⁣

- 🏔 [control.rocks](https://control.rocks/) is a super illustration library with loads of characters and scenes ⁣

- 🍉 [struct.rocks](https://struct.rocks/) is a super fun character illustration library based on shapes

## 3 agency websites to inspire UX/UI Designers ⁣

- 🦵🏼 [Toyfight.co](https://Toyfight.co/) use humour to demo the value of a small team ⁣

- 🐻‍ [Hellomonday.com](https://Hellomonday.com/) use playful characters to showcase the diversity of their agency ⁣

- 🧑‍🚀 [majortom.com](https://majortom.com/) use animation on scroll to showcase their iterative

## 3 must read books for UI/UX Designers

- 📙 [Burn Your Portfolio](https://books.google.co.in/books/about/Burn_Your_Portfolio.html?id=ovRuAQAAQBAJ&source=kp_book_description&redir_esc=y)
- 📘 [Steal Like an Artist](https://www.google.co.in/books/edition/Steal_Like_an_Artist/K6AYaA-mTk0C?hl=en&gbpv=0)
- 📗 [The Design of Everyday Things](https://www.google.co.in/books/edition/The_Design_of_Everyday_Things/I1o4DgAAQBAJ?hl=en&gbpv=0)

---

## 👀 Wrapping Up

Yeah, that's a wrap. Hope you enjoyed these amazing resources and you're satisfied with this article. Do not hesitate to share your feedback. I am on twitter [@saviomartin7](https://twitter.com/SavioMartin7). Give a follow!

Do you know more? Add them in the comments?

### 🌎 Lets connect

- [Github](http://github.com/saviomartin)
- [Twitter](https://twitter.com/saviomartin7)
- [LinkedIn](https://www.linkedin.com/in/saviomartin/)
- [Instagram](https://www.instagram.com/teen_developer/)