15 tools every web designer needs in 2017

We run through the hottest new tools for web design professionals.

The web design and development tools landscape is booming. That might be the understatement of the year, every year! It’s great to have plenty of options, but it does make it difficult to weed through all the web design inspiration and figure out what isn’t very useful and what has quality and staying power.

In this feature I’ve carefully selected a list of tools that I feel are not only practical and useful, but also pleasantly diverse. These options cover many aspects of the design and development process, from the planning stages of a prototype to the final code written on the frontend.

With that, let’s get right into 15 of the best web design and development tools that you can try out today.

01. Anime

Spice up your apps with this animation engine

Although web page animations have at times got a bad rap, developers are always looking for ways to make things easier. CSS animations and transitions have been a huge step forward, but more complex interactions often require a library. Anime is a new animation engine you’ll want to take a look at if you need to add complex animated components to your apps.

Here’s an example to demonstrate the super-simple API:

var myAnimation = anime({
 targets: ['.box1', '.box2'],
 translateX: '5rem',
 rotate: 180,
 duration: 3000,
 loop: true
});

This code defines the objects you want to animate, along with specifics of the animations. The API allows you to target elements using CSS selectors, DOM elements or even JavaScript objects.

The author, Julian Garnier, has provided a CodePen collection that demonstrates what the library can do, as well as thorough documentation on GitHub.

02. Figma

Realtime collaboration web app Figma has been winning over critics

Figma recently burst onto the design tools landscape claiming to be ‘the first interface design tool with realtime collaboration’. It’s a web app that has some key differences from other design tools. Here are some of its outstanding features:

  • Drag Sketch files into the app and Figma will convert them
  • Set precise constraints on elements to build fluid, multi-device layouts
  • A pen tool that promises to be simpler and more powerful than other ones you’ve used
  • Make collaboration notes right inside your design files
  • Share projects in real time with others, with the ability to control permissions on the files
  • File version history
  • A file browser to organise your projects

 Some of the early reviews on Figma have been positive. Designer Meng To raved: “Everything is extremely responsive, works as expected and the software is almost every bit as powerful as its native counterpart Sketch”.

03. Type Nugget

Type Nugget gives you greater control over your typesets

Type Nugget addresses a need you’ll have on just about every frontend project: dealing with CSS typography. Still in beta with more features in the works, it’s an online typesetting tool that gives you fine control of type styles. The tool displays a diverse set of text samples on the page, which can be live-tweaked in a panel on the right. The panel lets you select font size, weight, style, colour, letter spacing, text decoration and more for individual aspects of the page (global styles, headings, paragraphs, links and HTML lists).

Usefully, this tool allows you to register for an account, log in and save your progress. After specifying all your settings, you can hit the ‘Generate Code’ button and Type Nugget will produce a link to a style sheet hosted on its CDN. If you find CSS typography tedious and repetitive, you’ll benefit greatly from adding this tool to your workflow.

04. Vue.js

Not used to complex JavaScript libraries? Vue.js is perfect for you

What would a list of new web tools be without the hottest new JavaScript framework? Vue.js, like React, is a framework for building user interfaces, and utilises a virtual DOM. As the name suggests, Vue’s core library is focused on the view layer.

Look at a code example, taken from Vue’s docs, that utilises user input and demonstrates the library’s elegance. We’ll start with the HTML:

<div id="example">
 <p>{{ message }}</p>
 <button
v-on:click="reverseMessage">Reverse
Message</button>
</div>

Notice the custom v-on handler that calls the reverseMessage method. Here’s the JavaScript:

var myApp = new Vue({
 el: '#example',
 data: {
  message: 'Hello Vue.js!'
 },
 methods: {
  reverseMessage: function () {
   this.message = this.message.split('').
reverse().join('')
  }
 }
});

In that example, I’m populating the paragraph with data and defining the reverseMessage method. Vue is great for those less experienced with complex libraries, but also has a number of plugins to help with development of complex single-page web apps.

05. Scout-App

Scout-App touts itself as the "simplest Sass processor"

There are a number of good preprocessor GUI workflow tool options. Progress on Scout-App had gone stagnant, but Jared Wilcurt and the development team recently relaunched the project and it’s going strong once again.

As with many such tools, Scout- App allows you to compile your ‘.sass’ and ‘.scss’ files without touching the command line. It’s advertised as ‘the simplest Sass processor’ , which is a great draw for those who aren’t comfortable with the command line.

This app is so simple that you don’t need to install anything else on your OS; you just run Scout-App, choose your input/output folders and write your code. If you love the simplicity of writing Sass inside something like CodePen or JS Bin, then you’ll love this.

06. Adobe Experience Design

Adobe dips a toe into the world of prototyping with XD

Adobe XD, one of the newest additions to Creative Cloud, is Adobe’s splash into the prototyping market. It’s currently in a Preview release for Mac, with Windows on the way.

XD includes drawing tools, tools that enable you to define non-static interactions, mobile and desktop previews, and sharing tools for giving feedback on designs. It allows you to select a device-specific artboard size for starting a project, and you can even import a popular UI kit, for example Google’s Material Design.

As mentioned, XD is still in relatively early development but Adobe has set up a page detailing new features as they’re rolled out. Some of the most recent ones include zoom to selection, animations, linear gradients, and hex shorthand for colours. If you’d like a quick primer on XD’s basics, Lukas Steyer has written a multi-part article series, or you can check out this tutorial from Demian Borba.

07. ProtoPie

This code-free prototyping tool lets users interact easily

ProtoPie, currently a native Mac app with a Windows version in the works, is a code-free prototyping tool. It’s aimed at designers that want to communicate complex mobile interactions to the developers on their team without having to write any code. The app has many of the features you’d expect to see in any prototyping tool. However, its most compelling detail is the interaction panel, which lets you build sophisticated interactions that would normally only be possible via programming.

Another related feature is the ability to test your interactions on a mobile device using the ProtoPie Player, which can be connected via Wi-Fi to the ProtoPie app. Other useful features include the ability to divide the interactions into ‘scenes’ for simpler communication of ideas, a timeline interface that enables you to make fine-grained changes, and the ability to include interactions that use multi-finger gestures.

08. Quill

Quill is a flexible rich text editor with a powerful API

Quill is billed as a WYSIWYG rich text editor ‘for the modern web’. There are lots of different contexts in applications where a rich text editor is needed, so it’s no wonder Quill has exploded in popularity since its version 1.0 beta release in mid-2016.

Now a stable product, Quill lets you convert a basic div element into a powerful rich text editor with a few lines of JavaScript:

var quill = new Quill('#editor', {
 theme: 'snow'
});

But the most powerful features in Quill are its flexibility and extensibility by means of modules and a powerful API. Quill offers themes and modules that include toolbar, keyboard, clipboard and history. You can test-drive many of these features in the Quill playground and of course the documentation is a must-read if you intend to use its advanced features.

Next page: 7 more web design tools you need to know