<p>Published on <a href="https://blog.prototypr.io/magic-design-toolbox-27-new-ux-and-ui-tools-1175c01a9673?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> prototypr.io </p>
<h4>Plus the new Prototypr Toolbox ✨</h4>
<p><em>Last month we saw Sketch come to Windows (via </em><a href="https://icons8.com/lunacy?ref=prototyprio"><em>Lunacy</em></a><em>), the emergence of an awesome design mentoring community, and many more tools. Here’s our favorites from March 2018 (April roundup coming soon). Enjoy!</em></p>
<pre>🎁Before diving in, check out the ★ <a href="http://bit.ly/magic-design-toolbox">New Prototypr Toolbox <em>Beta</em></a><em> </em>★ — you can now filter and search everything we curate in these monthly roundups in a <a href="https://www.prototypr.io/toolbox/">simple UI</a>! We’re yet to index the resources from this article though, so find out the latest below ↓</pre>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*crdNijoNLTAXX-xGM36vog.png"></p>
<h3>✍️ 2 Design Tools</h3>
<p><em>2 tools for early stages of your design process (even useful before prototyping):</em></p>
<h4><a href="https://uifaces.co/?ref=prototyprio">1. UI Faces — Avatars for design mockups</a> →</h4>
<p>Here’s some aggregated people avatars that you can use in your design mockups. Great for personas, presentations and to help tell your product’s story. A great project from <a href="https://medium.com/u/3e48ab37fef4">Mighty Alex</a>.</p>
<p><a href="https://uifaces.co/?ref=prototyprio"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*C2QuR9o2h9RGVvEQYQvupA.png"></a></p>
<h4><a href="https://bit.ly/2qC3nAF">2. Meet Overflow</a> →</h4>
<p><a href="https://medium.com/u/f14ec50eee62">Overflow</a> is an awesome new tool for creating user flow diagrams. Import your prototype screens or sketches and hook them together. Then try out presentation mode to help tell the story of your user flow to stakeholders:</p>
<p><a href="https://bit.ly/2qC3nAF"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*1IivyZsTnQD7oRS2IV2Oqw.png"></a><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*PAkiNP4t9_MMXKxqg_CSDA.png"></p>
<h3>🙌 3 “No Code” Web Tools For Designers</h3>
<h4><a href="https://www.canvasflip.com/visual-inspector/offers/early-bird/?utm_source=prototypr&amp;utm_medium=mailer&amp;utm_campaign=eb_ltd_prototypr">1. Visual Inspector</a> 🔍 👁 →</h4>
<p>Visual Inspector is a Chrome extension for designers to inspect/edit live websites. It’s free to use, but there’s also a premium version with many more features…</p>
<p><a href="https://www.canvasflip.com/visual-inspector/offers/early-bird/?utm_source=prototypr&amp;utm_medium=mailer&amp;utm_campaign=eb_ltd_prototypr"><img alt="" src="https://cdn-images-1.medium.com/max/650/1*TYyw2Q1tfLp9Lr1QePI_5Q.gif"></a></p>
<p>🎁 We’ve arranged for you to <a href="https://www.canvasflip.com/visual-inspector/offers/early-bird/?utm_source=prototypr&amp;utm_medium=mailer&amp;utm_campaign=eb_ltd_prototypr">get lifetime premium access for <strong>just $49</strong></a><strong> </strong>instead of $299! That’s a saving of 83% — only available for the next week ⏰. Big thanks to <a href="https://medium.com/u/6e3e7d8d1d35">Canvas Flip</a>. You can find more offers in our <a href="http://prototypr.io/deals">deals section</a>. Enjoy!</p>
<h4><a href="http://www.lonelypage.io/?ref=prototyprio">2. Lonelypage</a> →</h4>
<p>📃 ✍️ Create and design your landing, event, business in one page. With a great selection of templates, go from idea to landing page really quickly! Made by <a href="https://medium.com/u/2e21130cf6be">Patrik Engborg</a>.</p>
<p><a href="http://www.lonelypage.io/?ref=prototyprio"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*JbOFgtPsDCAQiVKm1rF3nA.png"></a></p>
<h4><a href="https://www.sheet2site.com/?ref=prototyprio">3. Sheet 2 Site</a> →</h4>
<p>No coding necessary. Build a site with pictures, text and links from a Google sheet.</p>
<p><a href="https://www.sheet2site.com/?ref=prototyprio">Generate a website from Google Sheets</a></p>
<p>Not only is Sheet 2 Site a really useful tool, but it has a courageous story behind it from the creator, <a href="https://medium.com/u/d85008b0fd22">Andrey Azimov</a>. <a href="https://medium.com/@AndreyAzimov/i-quit-my-job-and-i-have-one-year-to-get-to-profitability-6159db01d9c2">Check that out too</a> →.</p>
<p><a href="https://medium.com/@AndreyAzimov/i-quit-my-job-and-i-have-one-year-to-get-to-profitability-6159db01d9c2">I quit my job and I have one year to get to profitability</a></p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*crdNijoNLTAXX-xGM36vog.png"></p>
<h3>👥 2 Awesome Community Projects</h3>
<h4><a href="https://mentorola.com/?ref=prototyprio">1. MentorOla: Design Mentorship</a> →</h4>
<p>Bringing the very best design mentors &amp; mentees together — by <a href="https://medium.com/u/2067a89cc386">Marc Andrew</a>.</p>
<p><a href="https://mentorola.com/?ref=prototyprio"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*wY_CKTJK1rpWEhnI236OuA.png"></a></p>
<h4><a href="https://www.invisionapp.com/blog/design-genome-project/?ref=prototyprio">2. The Design Genome Project</a>, by <a href="https://medium.com/u/206c13695d27">InVision</a> →</h4>
<p>Explore the DNA of the world’s best design teams.</p>
<p><a href="https://www.invisionapp.com/blog/design-genome-project/?ref=prototyprio"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*QYCpuv8gzkHLk5K-iMhggg.png"></a><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*PAkiNP4t9_MMXKxqg_CSDA.png"></p>
<h3>🎨 3 Color Tools</h3>
<h4><a href="https://artsexperiments.withgoogle.com/artpalette/colors/242726-886c5f-d04b18-dfb24a-d4c5aa?ref=prototyprio">1. Google Art &amp; Culture Experiment — Art Palette</a> →</h4>
<p><a href="https://medium.com/u/991272e72e68">Google</a> Art Palette uses computer vision algorithms to match color palettes with the world’s artwork.</p>
<p><a href="https://artsexperiments.withgoogle.com/artpalette/colors/242726-886c5f-d04b18-dfb24a-d4c5aa?ref=prototyprio"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*-ga90kB3K9AdbdYTATj8hg.png"></a></p>
<h4><a href="https://cssgradient.io/?&amp;utm_source=prototypr_newsletter&amp;utm_medium=email&amp;utm_campaign=meet_overflow_ladies_can_ux_and_bringing_back_skeuomorphic_design&amp;utm_term=2018-03-08">2. CSS Gradient Generator</a> →</h4>
<p>CSS Gradient is a free online tool that makes it dead simple to create fresh web gradients.</p>
<p><a href="https://cssgradient.io/?&amp;utm_source=prototypr_newsletter&amp;utm_medium=email&amp;utm_campaign=meet_overflow_ladies_can_ux_and_bringing_back_skeuomorphic_design&amp;utm_term=2018-03-08">CSS Gradient</a></p>
<h4>3. 🏀 <a href="https://chrome.google.com/webstore/detail/dribbble-color-generator/cineoljoghlkpmnpcjcmbbpedgjbmpac?&amp;utm_source=prototypr_newsletter&amp;utm_medium=email&amp;utm_campaign=meet_overflow_ladies_can_ux_and_bringing_back_skeuomorphic_design&amp;utm_term=2018-03-08">Dribbble Color Generator </a>→</h4>
<p>Here’s a Chrome extension that lets you grab color palettes from Dribbble. It generates a JSON file that can be imported to Sketch. <a href="https://chrome.google.com/webstore/detail/dribbble-color-generator/cineoljoghlkpmnpcjcmbbpedgjbmpac?&amp;utm_source=prototypr_newsletter&amp;utm_medium=email&amp;utm_campaign=meet_overflow_ladies_can_ux_and_bringing_back_skeuomorphic_design&amp;utm_term=2018-03-08">Grab the plugin</a> from <a href="https://medium.com/u/4bfd3b7234d5">Amie Chen</a> 👇</p>
<p><a href="https://github.com/amiechen/dribbble-sketch-palette">amiechen/dribbble-sketch-palette</a></p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*crdNijoNLTAXX-xGM36vog.png"></p>
<h3>🛠 6 for Prototyping</h3>
<p><em>Prototyping tools move fast. Here’s 3 big releases from March, and 3 other updates:</em></p>
<h4><a href="https://icons8.com/lunacy?ref=prototyprio">1. Lunacy: Sketch for Windows</a> 🎉→</h4>
<p>Sketch for Windows is finally here! Lunacy, made by <a href="https://medium.com/u/ffc8fd637ac4">Icons8</a>, is a native Windows app that works offline and supports .sketch files 💎</p>
<p><a href="https://icons8.com/lunacy?ref=prototyprio"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Gql75A-uH5ToKhvey4Dn1A.png"></a><a href="https://icons8.com/lunacy?ref=prototyprio"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*nAh15G7Drn2lydz0mAFlIQ.png"></a></p>
<h4><a href="https://webflow.com/ecommerce?kid=MPWBH">2. Webflow Ecommerce: Visually design, build, and grow online stores</a> →</h4>
<p>The future of ecommerce is (almost) here. <a href="https://medium.com/u/7b97144ce98b">Webflow</a>’s Ecommerce beta is coming soon. This looks very exciting, find out more 👇</p>
<p><a href="https://webflow.com/ecommerce?kid=MPWBH"><img alt="" src="https://cdn-images-1.medium.com/max/650/1*a86nX3Bq4GXkfjYnvBPdew.gif"></a></p>
<p><a href="https://webflow.com/ecommerce?kid=MPWBH">Webflow Ecommerce: Visually design, build, and grow online stores</a></p>
<h4><a href="https://blog.figma.com/introducing-figmas-platform-ee681bf861e7">3. Introducing: Figma’s Platform</a> →</h4>
<p><a href="https://medium.com/u/bf1152b11387">Figma</a> have made a large step towards an open design ecosystem with their new API. The Figma Platform helps improve design workflows by opening Figma to other tools, scripts and web apps. <a href="https://medium.com/u/676c5b7acb50">Kris Rasmussen</a>, VPE at Figma introduces it <a href="https://blog.figma.com/introducing-figmas-platform-ee681bf861e7">here</a>.</p>
<p><a href="https://blog.figma.com/introducing-figmas-platform-ee681bf861e7"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*QLzC0uhtrRzm3g_fNtBPtA.gif"></a></p>
<p><em>Here’s 3 more tool updates from a couple new players on the scene:</em></p>
<h4><a href="https://blog.prototypr.io/introducing-supernova-studio-35335de5044c">4. Introducing Supernova Studio</a> →</h4>
<p><a href="https://medium.com/u/47fa49f8e9f4">Supernova</a> is a prototyping tool with a slightly different angle — they call themselves ‘the world’s first true design-to-code platform’ 🚀 Check it out!</p>
<p><a href="https://blog.prototypr.io/introducing-supernova-studio-35335de5044c">Introducing Supernova Studio</a></p>
<h4><a href="https://blog.prototypr.io/flow-0-5-0-408044424ebd">5. Flow 0.5.0</a> →</h4>
<p>Here’s the latest from <a href="https://medium.com/u/b8f907a7d5cb">Flow</a> — they’ve just added a new way to export code 👌🏽</p>
<p><a href="https://blog.prototypr.io/flow-0-5-0-408044424ebd"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*EiV5t8Dd4zH4Wc0nhnCmiQ.png"></a></p>
<h4><a href="https://sympli.io/blog/2018/03/27/introducing-prototyping-support/?ref=prototyprio">6. Sympli Prototyping Support</a> →</h4>
<p><a href="https://medium.com/u/4b4e08d8cbc7">Sympli</a> now handles prototyping information for both Sketch and Adobe XD:</p>
<p><a href="https://sympli.io/blog/2018/03/27/introducing-prototyping-support/?ref=prototyprio">Introducing Prototyping Support</a></p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*PAkiNP4t9_MMXKxqg_CSDA.png"></p>
<h3>💎 4 Sketch and Figma Plugins</h3>
<p><em>With Figma gaining ground on Sketch, it’s time to start including them in this plugins section:</em></p>
<h4><a href="http://framer.com/sketch?ref=prototyprio">1. Framer Plugin for Sketch</a> →</h4>
<p>Working across different design tools can get frustrating — with their latest Sketch plugin, <a href="https://medium.com/u/89a1103c5c78">Framer</a> have made it possible to quickly copy and paste directly from Sketch into Framer 😲!</p>
<p><a href="http://framer.com/sketch?ref=prototyprio"><img alt="" src="https://cdn-images-1.medium.com/max/500/1*F99hlpYvJIFyC9alDtwaOg.png"></a></p>
<h4>2. <a href="https://www.papertiger.com/figma-dark-ui-plugin?&amp;utm_source=prototypr_newsletter&amp;utm_medium=email&amp;utm_campaign=meet_overflow_ladies_can_ux_and_bringing_back_skeuomorphic_design&amp;utm_term=2018-03-08">Figma Dark UI</a> →</h4>
<p>A sleek and beautiful revamp of the existing UI to help you work in low-light conditions in Figma 🌚.</p>
<p><a href="https://www.papertiger.com/figma-dark-ui-plugin?&amp;utm_source=prototypr_newsletter&amp;utm_medium=email&amp;utm_campaign=meet_overflow_ladies_can_ux_and_bringing_back_skeuomorphic_design&amp;utm_term=2018-03-08">Figma &#8211; FigJets Dark UI</a></p>
<h4><a href="https://sketchapp.com/libraries/mac?ref=prototyprio">3. macOS UI Library</a> by Sketch →</h4>
<p>A comprehensive macOS UI Library, brought to you by <a href="https://medium.com/u/d39f69b23aa2">Sketch</a>.</p>
<p><a href="https://sketchapp.com/libraries/mac?ref=prototyprio"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*qEjVFW8zYNz1aCKoQdJR1w.png"></a></p>
<h4><a href="https://blog.prototypr.io/native-web-components-a-free-sketch-library-eaed1a8af936">4. Native Components: A Free Sketch Library</a> →</h4>
<p>Try <a href="https://medium.com/u/2bfc0638905f">Rob Gill</a>’s free Sketch Library of native web components for Sketch.</p>
<p><a href="https://blog.prototypr.io/native-web-components-a-free-sketch-library-eaed1a8af936">Native web components — a free Sketch Library</a></p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*crdNijoNLTAXX-xGM36vog.png"></p>
<h3>🖥 2 macOS Utilities</h3>
<h4><a href="https://www.amie-chen.com/pretzel/?ref=prototypr">1. Pretzel</a> →</h4>
<p>Keyboard shortcuts for the app you’re currently using. Another great tool made by <a href="https://medium.com/u/4bfd3b7234d5">Amie Chen</a>!</p>
<p><a href="https://www.amie-chen.com/pretzel/?ref=prototypr"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*yLi4gYqzjvQUXCJRo0yd9A.png"></a></p>
<h4><a href="https://github.com/chrissimpkins/Crunch">2. Crunch</a> →</h4>
<p>Crunch is a macOS tool for lossy PNG image file optimization. Made by <a href="https://medium.com/u/39fe3caabc0a">Chris Simpkins</a>.</p>
<p><a href="https://github.com/chrissimpkins/Crunch"><img alt="" src="https://cdn-images-1.medium.com/max/428/1*RR8HtFQpAoAAKliAuWfp5w.gif"></a><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*PAkiNP4t9_MMXKxqg_CSDA.png"></p>
<h3>👩🏽‍💻 5 More Useful Apps and Resources</h3>
<h4><a href="http://mobbin.design/?ref=prototyprio">1. Mobbin</a> →</h4>
<p>A hand-picked collection of the best mobile app designs.</p>
<p><a href="http://mobbin.design/?ref=prototyprio"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*faT1u6xmVboi_mXtRoPDWA.png"></a></p>
<h4><a href="https://africanstockphoto.com/?ref=prototyprio">2. African Stock Photo</a> →</h4>
<p>An awesome stock photography platform for and from Africa 🌍.</p>
<p><a href="https://africanstockphoto.com/?ref=prototyprio">AfricanStockPhoto</a></p>
<h4><a href="http://webjets.io/?ref=prototyprio">3. Webjets: Organize Intuitively</a> →</h4>
<p>The creative desktop for all things that matter. Content is collected from the web and automagically turned into interactive cards — use drag and drop, a bookmarklet or even IFTTT to push your data into Webjets.</p>
<p><a href="http://webjets.io/?ref=prototyprio">Webjets.io &#8211; The new way to collect, organize and share anything</a></p>
<h4><a href="https://blog.prototypr.io/launching-photoshop-101-7f645b8dda77">4. Launching Photoshop 101!</a> →</h4>
<p>A free 7-day email course from <a href="https://medium.com/u/45923a477ad7">Design Lab</a> to get you started in Photoshop.</p>
<p><a href="https://blog.prototypr.io/launching-photoshop-101-7f645b8dda77">Launching Photoshop 101!</a></p>
<h4><a href="https://fiftythree.com/paste?ref=prototyprio">5. Paste</a> →</h4>
<p>Paste makes slides simple so you can focus on content and collaboration.</p>
<p><a href="https://fiftythree.com/paste?ref=prototyprio"><img alt="" src="https://cdn-images-1.medium.com/max/650/1*PTA6yc-litAw3fwMFd1-vw.gif"></a></p>
<p><a href="https://fiftythree.com/paste?ref=prototyprio">Paste by FiftyThree | Beautiful Slides for Fast Teams</a></p>
<p>That’s the lot! This was our monthly roundup — join us for <a href="https://upscri.be/f51076/">weekly updates here</a> 💌</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=1175c01a9673" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/magic-design-toolbox-27-new-ux-and-ui-tools-1175c01a9673">Magic Design Toolbox 🧞‍: 27 New UX and UI 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>


Magic Design Toolbox ‍: 27 New UX and UI Tools

Plus the new Prototypr Toolbox ✨

Top Stories