๐Ÿ‡ช๐Ÿ‡ธ

Este artรญculo solo estรก disponible en Inglรฉs.

23 New Tools: ๐ŸŽจ Color Mixer, โš›๏ธ Spinners React and ๐Ÿฆ„ Startup911

https://youtu.be/vOGjGFsc7dM

Starting off April with 23 new awesome tools!

This virus seems to have kept us hostage in our own homes, and weโ€™re all about to lose our minds. So, we really hope that this roundup of design goodies can help get your mind off of it, and bring you something positive.

This month we have a way to mix color like youโ€™d mix audio, React fun, resources for startups, dev challenges and a lot more.

Check it out!

Contents

Menu


๐ŸŽจ Glyphs, Icons and Colour ๐Ÿ–Œ๏ธ Illustrations โšก Design Collections and UI ๐Ÿ’Ž Prototyping ๐Ÿ™ Fun ๐Ÿ“š Design and Startup Resources ๐Ÿ“ˆ Feedback and Tracking
 
This image has an empty alt attribute; its file name is image_preview.png

๐ŸŽจ Glyphs, Icons and Colour

1. Glyphfinderโ†’

The best glyph search out there. Glyphfinder helps you find words, characters, emojis, look-alikes and colors. Makers Hans Pagel and Philipp Kรผn have manually tagged over 30,000 characters, so you can easily find them. Also, the tool works perfectly offline, itโ€™s dark mode by default, and available for both Mac OS and Windows. Glyphs for everyone!

2. Flat Icons โ†’

A library of flat icons with over 20,000 elements, including free and premium options. It includes formats like AI, EPS, SVG, PDF, PNG & IconJar. This way, you have all flexibility to work with the tools you want.

3. Parametric Color Mixer โ†’

Mix colors like youโ€™re mixing audio!

Parametric Color Mixer uses knobs to create color transitions, layers and ultimately, palettes. Inspired by audio equalizers, this tool includes features, such as:

  • Different blending modes
  • Scientific precision

Besides that, itโ€™s incredibly fun to use!

4. CSS Color Gradient Generator โ†’

Get cool CSS color gradients to add to your backgrounds and UI elements. This tool letโ€™s you change the light, depth and intensity of the colors in the gradient, tailoring it to your needs. You can also change the gradientโ€™s position, as well as its direction, and finally, copy the code and use it.

5. Hex Palette โ†’

Hex Palette is your new place for color inspiration. Built with designers and artists in mind, this tool gives you new color palettes every day, so you can add different combinations to your projects. On top of it, you can also create your own palettes and play around with it.

6. Neon 2.0 โ†’

Neon is a color and gradient maker app for iOS. Capture any image on your iPhone or iPad, and Neon automatically turns it into a color palette or gradient. Besides that, the new version includes editing and color analyzing tools that maximize its potential.

This image has an empty alt attribute; its file name is image_preview.png

๐Ÿ–Œ๏ธ Illustrations

1. Control Illustrations โ†’

A pack of over 108 free flat illustrations. Control Illustrations offer two different friendly styles that work great for startups. The free version is available as png files. For other file formats you can get one of the two premium packages. Also, the library is compatible with Figma, Sketch and Adobe Illustrator, and it comes with 9 bonus animations by UI8.

2. Minty 3.0 โ†’

Minty is the go-to platform for illustrators to showcase and sell their work. So, if youโ€™re an illustrator, this is a great place to promote your work and get some earnings. If, on the other hand, youโ€™re looking for custom illustrations, here you can find them in different styles. From water color to 3D, Editorial, Isometric, and more.

This image has an empty alt attribute; its file name is image_preview.png

โšก Design Collections and UI

1. Doodle Patterns โ†’

A set of 61 hand-drawn SVG and .AI patterns. Doodle Patterns is entirely done by hand with pen, paper and some brushes. A project made by friends Alexander Olsen and July Draw, so that you can have interesting and unique graphic elements on your website, UI, app, or other. The pack is available for $35. However, there are 10 free patterns available too! Go get โ€™em!

2. thePenTool โ†’

A design assets library created by designers. thePenTool does the work for you and gives you packs of design resources. From illustration sets to email templates and visual data, so you can quickly get what you need. There are different packs available, including free and premium, so thereโ€™s something for everyone.

3. 89elements โ†’

A library of over 200 of the most commonly used UI elements. 89elements includes both basic elements and layout options, enabling you to quickly start a new design. Besides that, you can easily find what you need due to its organization into different categories. Also, itโ€™s free to use.

4. Tetrislyโ†’

A starter kit for design systems and wireframes.

Tetrisly lets you create wireframes and libraries for your design systems in a much quicker manner. Its 2500 components give you loads of options to start off, all at hand. Also, built for UX and UI designers, as well as product teams, Tetrisly ensures visual consistency across all components, and seamless collaboration.

Check out the demo!

https://youtu.be/Fqlocom6Foo
This image has an empty alt attribute; its file name is image_preview.png

๐Ÿ’Ž Prototyping

1. Faux Code Generator โ†’

Generate faux code SVG images to add to your technical illustrations and designs. Faux Code Generator lets you create imitations of code based on real code. You can either use your own or a random Github Gist.

2. Fabula โ†’

A simple app to create and test animations. Fabula gives you the possibility to:

  • Tweak and adjust animation values
  • Share Swift code snippets
  • Test results in real-time

Try it out on iPhone or iPad!

This image has an empty alt attribute; its file name is image_preview.png

๐Ÿ™ Fun

1. The Simpsons in CSS โ†’

Enough with serious projects! The Simpsons have arrived to CSS! This Simpsons CSS library promises you great fun. Play around with the different characters, edit their colour, motion, and more. From Homer to Lisa, to Apu and Itchy. Enjoy!

2. No Code Challenges โ†’

No Code Challenges is a platform where developers are encouraged to build projects without using any code. New challenges are announced every week and vary from building products to tools, and more. Besides that, youโ€™re in for a chance to win a $100 prize!

3. Unscreenโ†’

Unscreen is a gif and video background remover thatโ€™s free to use. Say goodbye to the greenscreen! Record videos and remove their backgrounds without having to use complex techniques and software. Besides that, Unscreen helps you craft amazing gifs through editing and sharing features.

This image has an empty alt attribute; its file name is image_preview.png

๐Ÿ‘ฉ๐Ÿฝโ€๐Ÿ’ป Code

1. Spinners React โ†’

SVG and CSS spinners for React. The React.js pack includes fully customizable components with smooth animations, and more. See the other features, as mentioned by maker George Maksimenko on Product Hunt:

๐ŸŒฌ๏ธ Lightweight (less 3kB for all spinners)
โ›“๏ธ No dependencies
๐Ÿ’ช Typescript-aware
๐ŸŒณ Tree shaking/Code splitting

https://youtu.be/sktXKu5ZWWc
This image has an empty alt attribute; its file name is image_preview.png

๐Ÿ“š Design and Startup Resources

1. Checklist โ†’

Missing a step in your process? Checklist has got your back! This website includes dozens of checklists for developers and designers, and other roles, so that you know exactly what to do next when working and delivering a digital product.

2. Startup 911 โ†’

Startup 911 is the ultimate list of discounts for startups. Find special offers on different tools. From design to marketing, analytics, productivity and more. Save money, get what you need and grow your business.

3. Corebook โ†’

A book to get you into a brand design mindset. Corebook was built to help designers and brand managers without IT resources. It enables them to create, maintain and organize brand guidelines and other assets, while saving time and money. Corebookโ€™s main features are:

  • Easy onboarding
  • Brand book UX
  • Audio style guides
  • No boring text blocks
  • HTML export
  • Sync with cloud services
https://www.youtube.com/watch?v=oQizsYoEgQs
This image has an empty alt attribute; its file name is image_preview.png

๐Ÿ“ˆ Feedback and Tracking

1. MarkUpโ†’

MarkUp is a design feedback and collaboration tool that enables real-time comments directly on your websites. Add any URL and invite colleagues and stakeholders to give you feedback all in one place. This feature makes your process much clearer, so you can work and manage your edits more efficiently.

2. Figma Tracking โ†’

A tracking plugin for Figma built by Enzo and Ferruccio.

Figma Tracking aims to help make your product tracking more transparent, as well as facilitate communication across departments. See what you need to track, ensure implementation is in place, and communicate your tracking plan to your development team.

Thank you for reading! ๐Ÿ™
Subscribe to our newsletter for a fresh batch every week.

Also, if you subscribed to Letter a couple months ago, you should now have early access! Test it out! ๐Ÿ’Œ

More updates coming soon!๐Ÿ‘‡

Author: Sofia
Editorial: Graeme

Share to your friends
Author avatar

Sofia Marques

Social Media and Partnerships Management at Prototypr.io