<p>Published on <a href="https://blog.prototypr.io/30-brand-new-design-tools-72f90094ba7f?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> prototypr.io <img alt="" src="https://cdn-images-1.medium.com/max/1024/1*sv1t2O2-bCLdxgFFevcGFw.png"></p>
<h4>Toolbox #4</h4>
<p>Welcome to the 4th edition of Toolbox 🎉. This month we bring you a massive 30* new resources to explore:</p>
<pre>🎨2 color tools<br>👩‍💻5 design resources<br>💎3 Sketch tools<br>🖌3 new design tools<br>👥3 icon/avatar packs<br>🙌3 awesome curations<br>🤝2 tools for collabortion<br>🛠8 for prototyping<br>✏️1 mystery tool ✨</pre>
<p>Read them below, or filter and search them later in our <a href="http://prototypr.io/toolbox/roundups?ref=prototyprblog">Toolbox app</a>. Enjoy 👇</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*aeaJGuxZtY8yNKn5B40K_w.png"></p>
<h3>🎨 2 Color Tools</h3>
<h4><a href="https://blog.prototypr.io/huesnap-the-color-tool-for-creatives-da8dfbc0e00c">1. HueSnap — The Color Tool For Creatives</a> →</h4>
<p>HueSnap is a color sharing community for creatives, allowing users to create palettes through snapping colors from images. This was made by <a href="https://medium.com/u/fa7ad7b44ecb">Helen Vling</a> and <a href="https://twitter.com/Smashed_Tatoes">Jon</a>.</p>
<p><a href="https://blog.prototypr.io/huesnap-the-color-tool-for-creatives-da8dfbc0e00c"><img alt="" src="https://cdn-images-1.medium.com/proxy/1*7MsnaSTR9c15UoJEwBowMQ.png"></a></p>
<h4><a href="http://palette.site/?ref=prototyprio">2. Site Palette</a> →</h4>
<p>Use Site Palette to generate downloadable colour palettes for your projects — from any website on the web. Made by <a href="https://medium.com/u/bdd43effe5ed">Stas Kulesh</a> and co.</p>
<p><a href="http://palette.site/?ref=prototyprio"><img alt="" src="https://cdn-images-1.medium.com/max/767/1*VMeWeda2oTZ288ADWHYQFA.png"></a><a href="http://palette.site/?ref=prototyprio"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*v5se1-2nLjPm7ekIxKnL-w.png"></a><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*5bbujXZhgnvwUkJQUbmPHw.png"></p>
<h3>👩‍💻 5 Design Resources</h3>
<p><em>Here are 5 different types of resource to help you in different ways. From free stock photos to an awesome universal typeface.</em></p>
<h4><a href="http://shortcuts.design/?ref=prototyprio">1. Shortcuts.design</a> →</h4>
<p>Here are all the keyboard shortcuts you need as a designer, in one place! <a href="https://medium.com/u/9115dc59efb3">Michel van Heest</a> has now open-sourced this project on <a href="https://github.com/michelvanheest/shortcuts-design-data">GitHub</a>, so you can add shortcuts from your own app for everyone to use.</p>
<p><a href="http://shortcuts.design/?ref=prototyprio"><img alt="" src="https://cdn-images-1.medium.com/max/1000/1*pJvraWstiYwlUJ_nAizNfg.png"></a></p>
<h4><a href="https://photos.icons8.com/?ref=prototypr">2. Moose — Free Stock Photos</a> →</h4>
<p>This is an amazing library of the highest quality stock photos, all designed to work together. They’re also all completely free, thanks to <a href="https://medium.com/u/3439ad908f8a">Moose</a>!</p>
<p><a href="https://photos.icons8.com/?ref=prototypr"><img alt="" src="https://cdn-images-1.medium.com/max/1000/1*CIF4rcMWz1tVEYtWTeq6-Q.png"></a></p>
<p>Browse images from a range of categories:</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1000/1*0WfBlUlalTC1VYgwkHO1VA.png"><img alt="" src="https://cdn-images-1.medium.com/max/1000/1*hsJ0FGdHPfP0QeVrZZ1mrA.png"></p>
<h4><a href="http://sketchize.com/?ref=prototyprio">3. Sketchize</a> →</h4>
<p>Sketchize offers free wireframing sheets for everyone — print them out and start sketching your dream app! By <a href="https://medium.com/u/6486e66e3cf0">Halil İbrahim Çakıroğlu</a>.</p>
<p><a href="http://sketchize.com/?ref=prototyprio"><img alt="" src="https://cdn-images-1.medium.com/max/1000/1*FdMGgjIrtau0LW8T3BAUHg.png"></a></p>
<h4><a href="https://www.uxfol.io/?ref=prototyprio">4. UX folio</a> →</h4>
<p>Tell the story behind your design: build a beautiful UX portfolio quickly and easily with UX folio.</p>
<p><a href="https://www.uxfol.io/?ref=prototyprio"><img alt="" src="https://cdn-images-1.medium.com/max/1000/1*-euXzuW-iksBc4uljiXTcA.png"></a></p>
<h4><a href="http://brailleneue.com/?ref=prototyprio">5. Braille Neue: Braille for everyone</a> →</h4>
<p>Braille Neue is a universal typeface that communicates to both the sighted and blind people in the same space. <a href="http://brailleneue.com/?ref=prototyprio">Find out more</a></p>
<p><a href="http://brailleneue.com/?ref=prototyprio"><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*a3sV4lWgjWZn1a0L.png"></a><a href="http://brailleneue.com/?ref=prototyprio"><img alt="" src="https://cdn-images-1.medium.com/max/1000/1*1EzHf1LSdyERuOnLx0N84A.png"></a><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*aeaJGuxZtY8yNKn5B40K_w.png"></p>
<h3>💎 3 Sketch Tools</h3>
<p><em>3 tools for Sketch that will bring you fun and productivity:</em></p>
<h4><a href="http://bottts.com/?ref=prototyprio">1. Bottts Sketch Library</a> →</h4>
<p><a href="http://bottts.com/?ref=prototyprio"><img alt="" src="https://cdn-images-1.medium.com/max/1000/1*HCn0qWSf0rFP6KU16TuTtw.png"></a></p>
<p>Create robot illustrations in Sketch App with this free library designed by <a href="https://medium.com/u/7f968435c6b9">Pablo Stanley</a>. 🤖</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/450/1*yH6ji-KvhyAMFw0J4Q_llg.gif"><img alt="" src="https://cdn-images-1.medium.com/max/450/1*Ai29hxlHPMUzlgODhCSVLA.gif"><img alt="" src="https://cdn-images-1.medium.com/max/450/1*pqpOc0pjwIARk7qv-WgjFw.gif"></p>
<h4><a href="http://sketch.the.ripper.graphics/?ref=prototyprio">2. Sketch the ripper </a>→</h4>
<p>An online tool to rip a .sketch files and extract their objects by <a href="https://medium.com/u/ffc8fd637ac4">Icons8</a> — not just for showing an embedded preview.</p>
<p><a href="http://sketch.the.ripper.graphics/?ref=prototyprio"><img alt="" src="https://cdn-images-1.medium.com/max/1000/1*hf6Yi-hKq-mNptYInT5KIw.png"></a></p>
<h4><a href="http://symboldesign.co/?ref=prototyprio">3. Symbol Design System for Sketch</a> →</h4>
<p>Symbol Design System is an advanced web-design system based on Sketch nested symbols, made by <a href="https://medium.com/u/e9e4cffc0416">Denis Shepovalov</a>. This will save you a lot of time, and it’s 50% off for students!</p>
<p><a href="http://symboldesign.co/?ref=prototyprio"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*u9RoOvCFkLLpFlne88SC-Q.png"></a><a href="http://symboldesign.co/?ref=prototyprio"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*MIbdYKXesshhnhuUss9MSQ.png"></a><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*5bbujXZhgnvwUkJQUbmPHw.png"></p>
<h3>🖌3 New Design Apps</h3>
<p><em>These are massive — 3 new apps to solve 3 different problems:</em></p>
<h4><a href="https://artboard.studio/?ref=prototyprio">1. Artboard Studio: Because Product Presentation Matters</a> →</h4>
<p>Here’s the first online graphic design app focused primarily on product mockups.</p>
<p><a href="https://artboard.studio/?ref=prototyprio"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*naTVwQEHpcY27c9jTKU6FA.jpeg"></a><a href="https://artboard.studio/?ref=prototyprio"><img alt="" src="https://cdn-images-1.medium.com/max/600/1*0P0lY_zYy5k0zf3JVbe8sQ.gif"></a></p>
<h4><a href="https://solisapp.com/?ref=prototyprio">2. Solis for Mac</a> →</h4>
<p>Solis for Mac is a Live Design Output that integrates with code editors. Take advantage of real time, multi viewport previewing of HTML, CSS, SCSS and LESS as you write it — a powerful addition to your web design workflow.</p>
<p><a href="https://solisapp.com/?ref=prototyprio"><img alt="" src="https://cdn-images-1.medium.com/max/700/1*XHocyUdLPGFUhRCmIbj46A.gif"></a></p>
<h4><a href="https://jointrunk.com/?ref=prototyprio">3. Trunk Versioning For Designers</a> →</h4>
<p>Here’s another ‘<em>Github for designers</em>’, this time by ‘Trunk’ — from <a href="https://medium.com/u/8a4d3e3cfb47">Elliott Risby</a> and co.</p>
<blockquote><p>“Secure version control for your design files.”</p></blockquote>
<p><a href="https://jointrunk.com/?ref=prototyprio"><img alt="" src="https://cdn-images-1.medium.com/max/1000/1*hgx0OfXraciTh9bfvxTwyg.png"></a><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*aeaJGuxZtY8yNKn5B40K_w.png"></p>
<h3>👥 3 Icon Packs</h3>
<p><em>You can never get enough icons — these 3 collections will keep you going until next month’s update:</em></p>
<h4><a href="https://diversityavatars.com/?ref=prototyprio">1. Diversity Avatars</a> →</h4>
<p>Grab 200 avatars from <a href="https://medium.com/u/86222373c99c">Scott Lewis (iconify)</a>. There’s a mixture of ethnicities, races and professions. <a href="https://diversityavatars.com/?ref=prototyprio">Check it out</a>.</p>
<p><a href="https://diversityavatars.com/?ref=prototyprio"><img alt="" src="https://cdn-images-1.medium.com/max/1000/1*stwPOYxPRLCq9YLahx1AEg.png"></a></p>
<h4><a href="https://icon54.com/free-avatar-icons/">2. Free 210 Avatar Icons</a> →</h4>
<p>Download a diverse range of free avatar icons made by Icon54. Batman, IronMan, Yoda, and even 🎅🏻Santa are included!</p>
<p><a href="https://icon54.com/free-avatar-icons/"><img alt="" src="https://cdn-images-1.medium.com/max/1000/1*bnmP6ZOyaePiiK_Lox0l1A.png"></a></p>
<h4><a href="http://digitalnomadicons.com/?ref=prototyprio">3. Digital Nomad and Travel Icon Pack</a> →</h4>
<p><a href="https://medium.com/u/2e83fdc82c84">Nadia Sotnikova</a> launches the ‘Digital Nomad Starter Icon Pack’ with 24 free flat icons in SVG and PNG for use in your projects.</p>
<p><a href="http://digitalnomadicons.com/?ref=prototyprio"><img alt="" src="https://cdn-images-1.medium.com/max/1000/1*aQpHa6LDXg3KnPASUJhgIg.png"></a><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*5bbujXZhgnvwUkJQUbmPHw.png"></p>
<h3>🙌 3 Curated Resources</h3>
<p><em>3 of the finest curations for designers from this month:</em></p>
<h4><a href="https://designsystemsrepo.com/?ref=prototyprio">1. Design Systems Repo</a> →</h4>
<p>This is a frequently updated collection of Design System examples, articles, tools and talks by <a href="https://medium.com/u/237575cb6f38">Jad Limcaco</a>.</p>
<p><a href="https://designsystemsrepo.com/?ref=prototyprio"><img alt="" src="https://cdn-images-1.medium.com/max/1000/1*MzD4VFx-qHc0lUcimJwXrw.png"></a></p>
<h4><a href="https://www.eggradients.com/discount-for-students?ref=prototyprio">2. Student Discounts in Tech</a> →</h4>
<p>All the discounts you need as a student — from design tools to icons, by <a href="https://medium.com/u/7adecb1184b6">Serhat İletir</a>.</p>
<p><a href="https://www.eggradients.com/discount-for-students?ref=prototyprio"><img alt="" src="https://cdn-images-1.medium.com/max/1000/1*eZcJRm2a-L4Odjm9cRoljg.png"></a></p>
<h4><a href="https://itunes.apple.com/us/app/unsplash/id1290631746?mt=8">3. Unsplash for iOS</a> →</h4>
<p>All the freely usable, high-resolution photography on Unsplash is now available on iPad and iPhone.</p>
<p><a href="https://itunes.apple.com/us/app/unsplash/id1290631746?mt=8">Unsplash on the App Store</a></p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*aeaJGuxZtY8yNKn5B40K_w.png"></p>
<h3>🤝 2 For Collaboration</h3>
<p><em>Work together better with these 2 apps:</em></p>
<h4><a href="https://scrumpy.io/?ref=prototyprio">1. Scrumpy</a> →</h4>
<p>Planning, made simple — people over processes. Scrumpy is designed for agile teams who manage multiple projects.</p>
<p><a href="https://scrumpy.io/?ref=prototyprio"><img alt="" src="https://cdn-images-1.medium.com/max/1000/1*ODc17TCN4PaQtoP76wy_VA.png"></a><a href="https://scrumpy.io/?ref=prototyprio"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*bw7bnu45Bi6vmEhRLLyYcw.png"></a></p>
<h4><a href="https://flawlessapp.io/?ref=prototyprio">2. Flawless App</a> →</h4>
<p><a href="https://medium.com/u/f5816dcbf13f">Flawless App</a> offers real-time comparisons of expected and implemented design. Find out how it can improve collaboration between design and development <a href="https://blog.prototypr.io/stop-playing-fix-it-ping-pong-with-your-developer-3aa80acb04e9">here</a> — made by <a href="https://medium.com/u/9f7968241d53">Lisa Dziuba</a> and <a href="https://medium.com/u/459701b05a52">Ahmed Sulaiman</a>.</p>
<p><a href="https://flawlessapp.io/?ref=prototyprio"><img alt="" src="https://cdn-images-1.medium.com/max/1000/1*jnDDFkcN6923qnNrcLYK-w.png"></a><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*5bbujXZhgnvwUkJQUbmPHw.png"></p>
<h3>🛠 8 for Prototyping</h3>
<p><em>Prototyping tools are always being improved. Here’s a selection of updates from April 2018:</em></p>
<h4><a href="https://blog.prototypr.io/the-all-new-plugin-from-plant-d26fc0bcb049">1. The All-New Plugin from Plant</a> →</h4>
<p>Plant run us through the most recent improvements to their version control software for designers, such as enhanced visual guidance.</p>
<p><a href="https://blog.prototypr.io/the-all-new-plugin-from-plant-d26fc0bcb049">The All-New Plugin from Plant</a></p>
<h4><a href="https://blog.framer.com/introducing-framer-form-288fcb162ca2">2. Introducing Framer Form</a> →</h4>
<p>You can now integrate 3D-graphics with your <a href="https://medium.com/u/89a1103c5c78">Framer</a> prototypes with Framer form. It was built to expose a simple API for rendering 3D-graphics in Framer Prototypes. By <a href="https://medium.com/u/41d0fcba57c2">Emil Widlund</a>.</p>
<p><a href="https://blog.framer.com/introducing-framer-form-288fcb162ca2"><img alt="" src="https://cdn-images-1.medium.com/max/320/1*3uZQEJnt4LyICMca1HIG8A.gif"></a></p>
<h4><a href="https://blog.prototypr.io/introducing-supernova-v2-3057f97141f0">3. Introducing Supernova V2</a> →</h4>
<p><a href="https://medium.com/u/8c76df8e7f0f">Supernova</a>’s biggest update is here — 100% more awesome code generation.</p>
<p><a href="https://blog.prototypr.io/introducing-supernova-v2-3057f97141f0">Introducing Supernova V2 🚀</a></p>
<h4><a href="https://blog.prototypr.io/phase-v1-all-about-interactions-3860b57dbbf0">4. STUDIO</a> →</h4>
<p><a href="https://medium.com/u/19decc1e919a">Yutaka Ishii</a> announces the official release of STUDIO!</p>
<p><a href="https://blog.prototypr.io/phase-v1-all-about-interactions-3860b57dbbf0"><img alt="" src="https://cdn-images-1.medium.com/proxy/1*PbGkzS3tyzGFi0uBfxIHCQ.png"></a></p>
<h4><a href="https://blog.prototypr.io/phase-v1-all-about-interactions-3860b57dbbf0">5. Phase v1</a> →</h4>
<p>It’s <strong>all about</strong> <strong>Interactions </strong>in Phase v1.0, coming <strong>early summer</strong>. Import your Sketch files, and make them interactive. Faster, easier, and more flexibly than many have ever thought possible.</p>
<p><a href="https://blog.prototypr.io/phase-v1-all-about-interactions-3860b57dbbf0">Phase v1 — { All About Interactions }</a></p>
<h4><a href="https://blog.figma.com/introducing-figma-to-react-d2d545cba3cc">6. Figma to React</a> →</h4>
<p>Here’s how <a href="https://medium.com/u/bf1152b11387">Figma</a>’s web API was used to convert design into React code.</p>
<p><a href="https://blog.figma.com/introducing-figma-to-react-d2d545cba3cc">Introducing: Figma to React</a></p>
<h4><a href="https://www.invisionapp.com/blog/wake-joins-invision/?ref=prototyprio">7. Wake joins InVision + Wake Free</a> →</h4>
<p><a href="https://medium.com/u/206c13695d27">InVision</a> acquire <a href="https://medium.com/u/f05bff467e4e">Wake</a> and introduce ‘Wake Free’, a new version coming this summer.</p>
<h4><a href="https://blog.avocode.com/introducing-new-adobe-xd-integration-for-windows-linux-macos-and-the-web-7160699f98c">8. Avocode’s new Adobe XD integration</a> →</h4>
<p>Introducing <a href="https://medium.com/u/b3d7a592511">Avocode</a>’s new <a href="https://medium.com/u/bc93a5e08bbd">Adobe</a> integration for Windows, Linux, macOS and the web.</p>
<p><a href="https://blog.avocode.com/introducing-new-adobe-xd-integration-for-windows-linux-macos-and-the-web-7160699f98c">Introducing new Adobe XD integration for Windows, Linux, macOS and the web</a></p>
<p><em>*If you’ve been counting, that’s 29 tools… last but not least, here’s number 30 </em>🥁<em>:</em></p>
<h4>The Classic 😃</h4>
<p><a href="https://dribbble.com/shots/1387964-Mr-Pencil"><img alt="" src="https://cdn-images-1.medium.com/max/400/0*dRdGBTbqSvpJHDFz.jpg"></a>Mr Pencil by by <a href="https://dribbble.com/justinpervorse">Justin Pervorse</a> for <a href="https://dribbble.com/dropbox">Dropbox</a> →</p>
<p>Thanks for reading, and have a great day!</p>
<p><em>Find these hard to browse? You can 🔎f</em><a href="http://prototypr.io/toolbox/roundups?ref=prototyprblog"><em>ilter and search all these resources, (and those from previous issues) in the Toolbox app</em></a><em> →</em></p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;dntp=1&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Ff51076%252F%253Fenpose&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=72f90094ba7f" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/30-brand-new-design-tools-72f90094ba7f">💥 30 Brand New Design Tools.</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


30 Brand New Design Tools.

Toolbox #4

Top Stories