35 New Design Tools in 2019 💎
Welcome to Toolbox #7, the first of our design tool roundups for 2019. This issue contains 35 new tools to explore, including:
📱5 mockup tools
👩💻5 design to code tools
💎7 prototyping resources
🎵2 sound resources
✨4 icon packs
🤩2 Augmented Reality Tools
💠2 Collaborative Workspaces
✏️4 Fun Tools
🖋️3 Font ToolsSince it’s the first issue of 2019, let’s start with this curated collection of design conferences that will run through the year:
📆 Design Conferences 2019 →
Find this year’s top conferences with Design Conferences 2019, curated by Marcel van Remmerden. Filter conferences by your location, date, price and duration preferences.
Now onto the collection:
📱5 Mockup Tools
These tools take the effort out of presenting your designs beautifully:
1. Angle for Adobe XD →
Angle for Adobe XD is a free plugin that allows you to place your screen into perspective mockups. It’s also available for Sketch.
2. Design Camera →
Design Camera is an app for your Mac that lets you create, capture, and animate 3D mockups for your digital designs in a matter of seconds. This is a product made by Morten Just of Google — you can find him on twitter to ask him questions.
3. Shotsnapp V2 →
A simple tool to quickly create beautiful mockup presentations for your digital app and website design, by Gaddafi Rusli. Fun fact: Shotsnapp was used to create all the product images in this article!
4. Cleanmock →
Create stunning mockups that make your mobile or website design standout, right from your browser quickly & for free. By Johny Vino and Tekeste Kidanu.
“Spend your time on product thinking, not on resizing and masking.”
5. Screen Guru →
Take clean screenshots of any website, simply by pasting in a link. Made by Baptiste Adrien.
👩💻 Design to Code
The question of the year is ‘should design tools code’? Here are a few that do:
1. uizard →
The first of our 5 design to code recommendations is uizard, a unique tool that can amazingly help you go from paper sketches to code. Transform your hand-drawn wireframes into digital design files and front-end code automatically!
2. Sketch2React →
Sketch2React is a framework that lets you alter your Sketch design files with the super powers of Bootstrap and React. That gives you high fidelity HTML5 code right from scratch.
3. Yotako →
Yotako helps seamlessly translate a range of design files into code. Start by uploading your Adobe XD or Sketch designs (other tools are supported), selecting the software stack you want your app to work with, and then generate real code.
4. Shots.ai →
Shots is one of the latest tools to turn designs into code. Shots comes with a hand-picked collection of design patterns from mobile apps that you can transform into code in just one click.
5. Vue.js for Designers →
If you’ve explored all these design to code tools, and still can’t find something that works for you — why not just learn to code as a designer? Designcode.io is one of the best resources out there for this. Their latest course is ‘Vue.js for designers’, a brand new tutorial series tailored specifically to help designers explore Vue.js:
💎 7 Prototyping Resources
Resources for Webflow, Figma, Adobe XD, Sketch, InVision and more:
1. Felipe for Sketch →
Speed up your Sketch workflow by visually turning basic layers into symbols. Draw simple shapes in Sketch, and transform them into UI elements based on the symbols in your library. Felipe also works with any design system.
2. Stark →
Here’s the plugin to help you design and build products that are accessible, ethical, and inclusive. Stark is available for both Adobe XD and Sketch.
3. InVision Studio Pocketbook →
Learn how to use Studio, the new screen design tool by InVision. The book is free, so is Studio.
4. Flowbase →
Flowbase is a collection of clonable resources from the Webflow community. The templates found here can be a great base for any new Webflow project, helping you save time and avoid reinventing the wheel.
5. Figma Freebies →
A website to download a whole host of Figma design files, created by designers across the All files are 100% free and we don’t require any signups or payment for If you have any freebies please submit them and make Figma Freebies even.
6. Interfacer →
Interfacer is a list of top quality free design resources for your next project. All the resources listed on the website are free for commercial use.
7. CoolHue 2.0 Sketch Plugin →
Handpicked Gradient Palette and Swatch for your next project.
🎵 2 Sound Resources
The sounds used in your app can have a large impact on the end product and experience. Here are 2 resources to get you started with sounds:
1. UI Sounds →
Learn sound design for user interfaces by example
UI Sounds is a library of user interface sounds from popular apps to help you think and learn more about sound when designing and building products.
2. Fugue 2.0 →
Fugue is a library of audio tracks for video creators, made by Icons8. Version 2 is an upgraded version with a brand new UI, sound player, and controls.
Fugue presents a big (and constantly growing) collection of unique music tracks created by professional composers and classified for fast and easy search. The track you need can be chosen from the sets organized along three global parameters: themes, genres, and moods.
✨ 4 Icon Packs
Here are 4 huge and free icon collections for use in your projects:
1. Essentials Icon Pack by InVision →
The most commonly used icons in one place
2. Eva Icons →
Eva Icons is a pack of more than 480 beautifully crafted Open Source icons for common actions and items. Download our set on the desktop to use them in your digital products for Web, iOS and Android.
3. Essential Glyphs →
A basic pack of solid glyphs to use in your designs — adapted for small and large sizes.
4. Evericons →
Evericons is a collection of 460+ well-crafted icons for your next project. It’s free for personal and commercial usage.
🤩 2 Augmented Reality Tools
Since Pokemon Go, the Apple ARKit, and Ikea’s Place App, we’ve seen some great use cases of Augmented Reality. Now you can prototype your own:
1. Torch AR →
Torch is a cloud-based 3D design and prototyping app focused on mobile AR. Torch is like InVision or Framer, but for 3D.
The Torch Design Environment lets you import assets, create complex interactions, arrange multiple scenes, and add real-time collaborators — all without ever leaving 3D or your mobile device.
2. wiARFrame →
Prototype AR content in minutes, then share those creations with the rest of the wiARFrame community to remix and learn from.
💠 2 Collaborative Workspaces
Brainstorm and collaborate in these 2 workspaces:
1. Whimsical Sticky Notes →
Whimsical, a visual workspace for teams, also appeared in Toolbox #5. This time though, Whimsical introduced a new feature that reimagines the concept of sticky notes but with collaboration, speed, and delightfulness in mind.
2. Mind Map by RealtimeBoard →
Here’s another great tool for your collaboration and brainstorming. Mind Map by RealtimeBoard helps you capture, organize, and structure ideas together as a team (or just on your own).
4 Fun Tools 🎨✏️
Drawing, color tools, and more fun:
1. Canvas for Chrome →
Canvas for Chrome enables you to draw from anywhere, right inside your Chrome browser. Furthermore, it syncs up with your Google Account so you can easily continue on any device.
“Type “canvas.apps.chrome” into a Chrome browser on any computer, and pull up a basic drawing app without having to download any programs” (The Verge)
2. ColorBox by Lyft Design →
Lyft Design open-sourced their color algorithm, sharing their learnings about working with color through a web tool called ColorBox.
3. Blobmaker →
Ever needed to create awesome blob shapes for a design or background? Blobmaker is the perfect tool — a simple web app that lets you create, tweak and download organic SVG shapes in no time at all.
4. It’s Centred That →
Here’s a fun design game to test your designer’s eye. Guess whether dots are really in the middle of shapes. Win the game by guessing all 10 correctly! Can you do it?
🖋️ 3 Font Tools
Create logomarks with Google Fonts, and discover some new fonts:
1. Picas →
Picas helps you create a logomark with minimal effort through the use of Google Fonts. Simply type in a brand name, choose a font, and hit generate!
2. FontSpark →
Quickly discover the best fonts for your next design project. Check it out:
3. Optician Sans →
A free font based on the historical eye charts and optotypes used by opticians world wide.
“The LogMAR Chart is used by ophtalmologist, optometrists and vision scientist to estimate visual acuity. The chart consists of 10 letters and was developed at the National Vision Research Institute of Australia. Optician Sans is based on the same visual principles as the LogMAR chart, adjusted to be used as a fully functional display typeface.”
That’s all of them!
Hope you enjoyed this issue of Toolbox. You can easily browse and filter all the tools listed in this article over on the Prototypr Toolbox app👇
Also, stay up to date every week with Prototypr Weekly:
✍️ Written and curated with 💙 by Graeme.
