? Tool of the month: Sizzy

? Top collection: Really Good Emails

This issue contains 25 of the best picks from the Prototypr Toolbox. Notable mention goes out to Kitze, the creator “an actual browser for designers and developers”. His tool, Sizzy, wins our pick of the month, having solved a problem that’s been going on for years.

I’m *extremely* excited to announce – The Responsive Design Browser ? ? ? ? ? ?

YES! An actual browser for designers and developers ?

Tons of amazing features and even more coming soon! ?

3 random people who RT will get a lifetime license ? ?

— Kitze (@thekitze) June 27, 2019

Last month also saw the launch of Really Good Emails 2.0. The RGE team have been sending out a beautiful newsletter every week with the best tips on designing entertaining and accessible emails. In July, they launched version 2.0 of their site – a carefully curated and well categorised of the best emails around.


This issue contains 25 resources to explore – from the latest illustration libraries, to :

? 4 Design Collections

? 4 New Illustration Libraries

? 4 for Prototyping

2 for Productivity

? 5 for Coding

? 4 UI Kits and Design Systems

? 2 Mockup Tools

From email design to flowcharts, wireframes and web kits, find what you need:

1. Really Good Emails 2.0 →

From a blog/newsletter to a full grown email hub. The web’s best, and most attractive ? curated collection of over 4206 emails, showing off both design and code.

What’s new in Really Good Emails 2.0?

? Collecting

? Smiling (aka “likes”)

?‍? Live Code View & Editing

? Profiles

? Search & Recommendations

? Third-party integrations

— Really Good Emails (@reallygoodemail) July 17, 2019

2. Brutalist Web Kit →

70 free brutalist templates for Sketch and Figma, from All boards use Google fonts and are fully editable ?

3. Icons8 Photos 2.0 →

What do you get when you cross professional photography with machine learning? I don’t know, but Icons8 Photos is probably the closest answer. Use a variety of models, objects, and backgrounds and customize photos together with other creators.

4. Greyhound Flowcharts →

A free library by Denis Shepovalov that includes over 200 customizable flowcharts. Compatible with both Figma and Sketch, so you can easily create beautiful sitemaps and wireframes.

Illustrations we meet again! Last month saw the emergence of 4 promising new libraries that can add some personality to your projects. With all these new libraries coming out, be sure to check out Katerina’s UnDraw collection – the first and most complete illustration set available.

Surpassed 800 illustrations on unDraw!!! ??? Awesome sauce!!! ? Started as a way to find more projects, but it became a pleasure to design for so many creative people and friends! Thank you so much for all the motivation! ❤️?? #illustration

— Katerina Limpitsouni (@NinaLimpi) August 1, 2019

1. Paaatterns →

This library gives you 22 colorful patterns, available for all vector formats. Great for when you need an extra dash of creativity in your designs. Besides that, it’s entirely free!

2. Huge Illustration Pack & Creator →

More than just a pack, Huge also includes a creator tool, so you can build and edit your own illustrations. It’s got over 300 Illustrations, 50 Scenes, 100 Web and Mobile UI Templates. So, let your creative juices flow!

3. Isometric Illustrations →

A break in your usual illustration style. This MIT licensed pack gives you free SVG isometric illustrations to add to your projects.

4. Delesign →

Royalty-free custom landing page designs and email templates (HTML and CSS included), illustrations, graphic design, social media designs, and more!

This month was marked by the introduction of voice to prototyping with Alexa and Adobe XD. But there’s also more… Find out with the next 5:

1. Amazon Alexa for Adobe XD →

Export voice-enabled prototypes from XD to Alexa! Open and interact with your designs directly on Alexa-enabled devices, such as an Amazon Echo, Echo Show, Sonos One, etc.

Excited to launch @AdobeXD‘s integration with Amazon Alexa, allowing designers to talk to their XD voice prototypes on any Alexa-enabled device, no code required.

Our team has been planning this since we came to Adobe, and we can’t wait for the creative community to try it out.

— Mark C. Webster (@markcwebster) July 22, 2019

2. Sketch Manager →

A useful plugin to improve your design workflow. Sketch Manager helps you organize your Sketch symbols, text styles and other assets.

3. Lunacy 4.0 →

Lunacy 4.0 is out! This graphic editor for Windows now brings new features like integrated design assets, effects, GPU rendering, and more. Check it out!

4. Axure 9 →

Axure RP 9 is the upgrade to plan, prototype, and hand off designs to developers, all without code.

Improve your productivity whether it’s responsive design or auditing the visual hierarchy of your site.

1. Sizzy →

Sizzy is built to save time and increase productivity for designers and developers. This new browser packs tons of helpful features. It makes it easy to instantly preview changes on multiple devices all at once while working on websites.

2. VisualSitemaps →

Quickly create visual sitemaps from URLs! Visualsitemaps instantly gives you thumbnail based visual maps, thus you can easily audit your sites. Perfect for UX, UI, SEO and marketing research.

The design-to-code domain keeps growing. And the fine line between the two keeps blurring.

1. Prototyping with React Framer →

A great way to start! Hop on the train and learn to use React and Framer: 10 modules, 15 projects, hand-picked coding topics. ?

2. Gapplin →

View and edit your SVG images with Gapplin. Using webkit as the rendering engine, this simple tool not only reads SVG but also SVGZ and animation SVG. Worth a try!

3. Balloon.css →

Balloon.css lets you add tooltips to elements without JavaScript and in just a few lines of CSS.

4. Bulma Builder →

The first ever advanced theme editor for Bulma CSS framework. Bulma Builder enables you to easily and quickly create and launch templates.

5. Cookies by Axeptio →

Bring out the cookies because we love this! A game changing cookie solution by Axeptio. This tool gives you a new way to store, manage and present cookies on your website!

These 4 UI Kits and design systems can help enhance your team’s efficiency:

1. Elements For Sketch →

A resource by Envato that gives you exclusive access to free UI kits. Besides that, you can also get royalty-free photos from Envato Elements.

2. Flawwwless UI →

An open source React.js components library. Easily create and update your apps, while keeping quality high.

3. Ant Design System for Figma →

A large React based UI library for Figma. Ant Design System includes over 2100 UI components, 600 icons, as well as customizable styles and screens. A great solution for Figma users to create well-documented products!

4. Atomize React →

A design system for React.js that facilitates designer-developer collaboration.

Don’t find customers for your products, find products for your customers. – Seth Godin

1. Screenzy →

Screenzy is a simple picture and screenshot beautifier, inspired by Screely.

2. Stacc →

Stacc is an application to convert video files into high quality Gifs. It uses FFMPEG with complex filters to make more aware decisions about your conversion, meaning the filesize can stay down, but the quality can still look like the input video.

For times when, you just need a .gif.

? You have reached the bottom of the page. If you’re looking for more, browse the Prototypr Toolbox app, which contains over a year’s worth of tools.

Author: Sofia

Curation/editorial: Graeme