Incredible Design Tools & Resources, August 2017

Keeping up to date with the latest design tools, resources, apps, books and trends is tough, and sieving through the things that are relevant, useful and interesting to us is even tougher. Which is why we’ve started a Product Hunt collection showcasing the absolute best design tools and resources that we’ve discovered, some of which we use here at SitePoint!

Follow the collection on Product Hunt to receive a notification when we (editors Alex Walker, and myself, Daniel Schwarz) add something to the collection that you really, really must check out. Plus, we’ll personally handpick the best of the best to talk about in a monthly article, like we’re doing right now! Welcome to Best Design Products: August Edition!

Rage Grade by FullStory

  • Summary: benchmark your customer frustration

Rage Grade by FullStory uses machine learning to detect negative signals in the customer experience as they use your app or website, and awards the overall experience a grade between -C and A. It also brings the top ten key moments of frustration to your attention, and lets you rewind the session to the exact moment of rage. It’ll detect signals such as error clicks, mouse thrashing and form abandonment, and even benchmark the customer experience against industry competition.

FullStory doesn’t tell you what you want to hear, it tells you the full story (sorry, I had to!).


Figma 2.0

  • Summary: design tool for handoff and prototyping

Figma has been boldly leading the charge in the realtime-multiplayer design collaboration space, allowing multiple designers to work on the same design file at the same time, and it works on macOS, Windows and in the browser.

Version 2.0 makes Figma a triple-threat, as it now offers prototyping and design handoff features alongside the standard design tools we’ve come to love. We even use it at SitePoint! Design handoff can be used in a “view only” mode so that developers don’t accidentally mess up design files, and they don’t need to be a paying team member either. Win win!


Figma design app

Gravity Sketch VR

  • Summary: bring VR into your design workflow

Prepare yourselves, this stuff is…well…there are no words, really. Gravity Sketch is an immersive 3D design tool for creating models, scenes and other 3D objects using virtual reality headgear like the Oculus Rift. Gravity Sketch VR co-founder Daniela Paredes claims that you can totally spend 8 hours sketching 3D objects in the virtual reality world.

You really have to see the video to appreciate its beauty.


Freehand 2.0 by InVision App

  • Summary: collaborative, freehand sketching and wireframing

InVision App have been adding some really amazing new features to their Craft Sketch Plugin recently (Craft Stock, Craft Prototype, etc), but one that’s really stood out for designers has been Craft Freehand, now on its 2nd version. Freehand works in the core InVision App (as well as in Sketch) and is accessible to collaborators of all types (designers and stakeholders) on a multitude of devices, allowing them to collaborate in realtime on rough digital sketches in a way that’s both fun and easy.

Sketch alongside your high-fidelity mockups, or start from scratch and iterate fresh concepts with your team.

Multiple cursors + unlimited canvas + unlimited creativity = win.



  • Summary: create dynamic colour relations in Sketch

Inspired by SASS functions, chain allows designers to create dynamic colour relations in Sketch. For example, you could reduce the saturation of [x] amount of layers by 80% all at once, even if all of those layers were a different colour.


Smartmockups 2.0

  • Summary: create stunning mockups without using Photoshop

Mockups were very trendy at one stage, although really they should have been called product screenshots as “mockup” is already a design term. Traditionally, we used Photoshop to insert our website/app screenshot into a real image of an actual device using Smart Objects, but now that a multitude of design tools are now becoming mainstream, Photoshop is becoming much less trendy as a design tool for user interface design. So…how do we create these mockups now?

Smartmockups. Version 2 delivers us GIF functionality, so we can now create animated mockups using the latest device previews, and there’s also a bunch of new options that allow for better tweaking of the final output (cropping, zooming, etc).


Smartmockups design tool

Keys for Sketch

  • Summary: advanced keyboard shortcut manager for Sketch

Not every feature in Sketch has a shortcut. Granted, these are usually less-common features, but it’s still annoying when you have to scurry through the menu bar to find certain things. Plus, not all keyboard shortcuts are intuitive, and some may conflict with Sketch Plugins. Designers coming over from Photoshop may also want to reassign keyboard shortcuts.

Enter Keys For Sketch.


Keys For Sketch Plugin

Continue reading %Incredible Design Tools & Resources, August 2017%

Source: Sitepoint