Ux Design Tools For Mac

UX Design Tools for 2019 (Mac & Windows)

Has it really been a year already?

In June last year, I wrote about what I felt were the top UX design tools at that time. At the time, it felt like an important topic, because there were simply so many options for new designers who are looking to find the right tool for the job.

I'd thought that the landscape of UX tools would se t tle, and that's somewhat true — last year we had the arrival of big-name software like Adobe UX and InVision Studio, and the ascension of new tools like Figma, that really changed the game. That's not the case in the last 12 months — there haven't been any real heavy hitters from big companies.

That being said, there's certainly been growth, movement and change. Unlike last years article, which focused on finding the cream of the crop, this year I want to spend more time talking about the tools that have had a meaningful impact on the way I work.

As with last year, I've focused on tools that are available on both Mac and Windows. I've also steered clear of expensive, enterprise-only tools and preferred that which most designers should be able to reasonably take advantage of. I don't have any relationship with the companies or products listed here, and this certainly isn't a definitive list of the best software — it's simply my favourites, and why.

One quick note for those returning from last year: I've added a small ! indicator to any software that's new to the list, so feel free to skip through the rest if you're just looking for the delicious new stuff.

Can't be bothered reading and just want to see my top picks? Skip to the bottom of the article for a full list.

Pen and Paper

Our first featured tool is one you'll all be familiar with — Pen and Paper. I felt a bit silly including it in 2018's list, but it's actually turned out to be one of the most discussed entries.

Sketching on paper is messy, quick, and a great way to avoid perfectionist, detail-oriented design. It's a direct download from your brain to the paper, and I've found that — at least in my experience — there's no scenario that gives me more creative freedom than simply scribbling ideas.

My top-tip: use something you can't erase. If you make a mistake, and you can't erase it, you simply have to try again. It forces you to become iterative, to move quickly, and to not dwell on small errors.

I was lucky enough to hear Eva-Lotta Lamm speak at UX Australia last year, and I personally find her system for creative thinking with sketching is a really effective, simple method. If you're keen to up your sketching game, I'd highly recommend looking into her work.

Whimsical

Another returning product is Whimsical (Web). This is a browser-based tool that I've really fallen in love with over the last year for its simplicity, ease of use, and great presentation. Last year I spoke about Whimsical's flowchart tools. When it comes to quickly producing user journeys or flow diagrams they're still the reigning champ as far as I'm concerned.

However, there's a little more going on with Whimsical in 2019 — they've added not one, but two new features to the product suite: Wireframes and Sticky Notes.

I can't show you my sticky notes board, because it's full of secret company information. So instead, here's one from Whimsical themselves.

We'll talk about Wireframes down in the Wireframes & Early Design segment (go figure), but I will just quickly mention that Sticky Notes is a great substitute for the real thing.

It's a quick and easy way to drop notes onto an artboard and organise them for your team. In particular, it's a great tool for remote teams looking to informally plan a project or simply share ideas.

It's hard to explain in words why Whimsical is such a favourite of mine, so I highly recommend trying it yourself. In short, however, I think great tools are the ones that get out of the way and just let you work. Whimsical is designed in a way that doesn't just let you work, but lets you work faster.

Checklist Design, Daily UI, and Dribbble

Checklist Design is a simple idea, but it's a great way to kick off a design.

I think a key part of any successful project is putting in the work to be inspired. For that reason, I want to include a few resources I use to help me start thinking creatively.

This year, I was really surprised by how much I've used Checklist Design. It's a great little website by George Hatzis that provides a checklist of considerations and elements to consider in common UI patterns.

I've found myself going back to this site again and again as I start up a new idea, and each time it helps me consider things I might've otherwise forgotten.

I've found myself using it very frequently as I've been completing the Daily UI series of design challenges. I started the Daily UI series because I wanted to flex my UI design muscles beyond what my day-to-day job required of me. They send you a prompt for a UI design each day, and the rest is up to you. I've found it a really effective method to keep me thinking creatively and to try new things.

The real secret with Daily UI, however, is that it's a great source of inspiration. For example, if you're looking to design a calculator, simply check out the hashtag #DailyUI004 on Instagram — there are 641 designs (as of writing) for calculators.

Why yes, that IS a Fortnite themed calculator in the top right. Where else are you going to find a Fortnite calculator, huh?

Whimsical

For the early design phase, our old friend Whimsical is back. We've talked about Whimsical Flowcharts, now let's talk about Wireframes (Web).

Wireframes allows you to quickly put together low-fidelity designs for screens by using a really intuitive menu system. By either searching for the element you want using keywords or tapping the hotkey, you can really rapidly place elements together.

There are roughly 100 elements on this screen, but it took only a few minutes to throw together.

In my opinion, the real brilliance in Wireframes is the constraints it places upon you.

You can only pick from a limited colour palette, you can't control things like corner rounding or opacity, and you're stuck with only the components they've included (Although the library available is impressively comprehensive)

If you're familiar with a 'proper' design tool, like Sketch or Figma, you might find that Whimsical's constraints annoy you. However, I often find myself getting stuck into the detail when using fully featured tools, and Wireframe forces me not to worry about being pixel-perfect and to simply look at the broad design.

My primary complaint about Whimsical last year was the price — $10 per user, per month. A year of Whimsical costs more than a year of Sketch, which is ludicrous. That being said, if you can swing it (or your company can), I think you'll like what you find.

Miro

Previously known as RealTimeBoard, Miro (Web) is a browser-based, real-time collaboration app that essentially tries to replace the office whiteboard. By default, it's set up to handle story mapping, mind maps, kanbans, retros, flowcharts, product roadmaps, and more.

The truth about Miro is that there's a number of tools that try to serve this purpose already; Figma has similar features, InVision's Freehand is a close second, and even a Google Doc or Notion page can fit the bill for some of the use cases that Miro tries to solve. However, Freehand and Figma require quite a bit of software knowledge to use. Google Doc's or Notion, on the other hand, lack the freedom of movement that you might be looking for when you're freewheeling around a Kanban board.

Fun Fact! Miro documents are infinite. Agile planning as far as the eye can see.

Miro answers both these issues, with a simple user interface and a really rich set of features. Miro goes the extra step in the usability of the product — it's dead simple for anyone to jump on and use. Freehand and Figma are great, but you need to know how to use those tools.

I don't think it's a great tool for conceptual design or wireframing, but if you're looking to replicate that huddled-around-a-whiteboard experience in your early conception phase, Miro is the way to go.

Figma

I want to give Figma (Windows, Mac, Web) a quick mention, specifically for its collaboration tools. If you're working with a team of designers, you might want to be able to get together in a file and go to that extra step of fidelity that Whismical and Miro don't provide. If that's the case, you can't do better than Figma.

Collaborating in Figma is 100% real-time, and extremely simple to use. Simply send someone a link to the file, set their permissions, and they're in. It's a great feeling working on something collaboratively in Figma when you can see who's making changes, what they're changing, as they're changing it.

When it comes to concept work and early design iteration, the best tool is the one that lets you work quickly and efficiently. For me, that's Figma.

Before we get into this category, I want to point out that since last year Figma has added both version history and commenting to its platform. If you're using Figma as your primary tool, you might find you don't need any of these platforms listed below. That being said, there are still some great options:

Zeplin

I talked quite a lot about Zeplin (Windows, Mac, Web) last year, and everything I said back then is still true today; it's a phenomenal tool for storing, sharing, and commenting on your screen designs.

In the last 12 months, there have been some impressive updates: Only a week after my article went out, Zeplin 2.0 released, bringing with it full support for components alongside a few smaller updated. Adobe XD has been integrated, an extension framework is on the way, and most impressively; dark mode.

Is there anything quite as appealing as a well-executed Dark Mode? No. There isn't.

It remains a great, affordable option for any team that wants to share and collaborate files.

Miro

We just talked about Miro, so I'll spare you a second round of praise-singing. Miro won't help you with version control, but it's a really great space for loose collaboration. Mainly because you can scribble all over your screens, together. It's the equivalent of sitting around a bunch of printouts with red markers.

Notion

Rich text, screenshots, video, tables, formula-driven data, and a Figma prototype all in one document. With tools like this, how could you not keep a diary of your make-believe soccer career?

Last year, I mentioned both Confluence and Coda.io as tools for collaboration and documentation. When it came to Confluence, I felt the UI was overly cumbersome and complex, and it was trying to do too much at once. Coda.io, on the other hand, did what it said on the box but not much else. I was using the two tools in tandem — Confluence for formal documentation that required a mix of different data types, and Coda.io for table-driven documents and my own personal notes.

Notion (Windows, Mac, Web), for me, feels like a great combination of the two. At surface level, it's a perfectly adequate text editor for notes or documents that can be easily collaborated on. You can paste in images, video, links, whatever. It does these basic features in a much easier way than Confluence, and just generally feels lighter and quicker to use.

For the more advanced user, it has full support for complex tables and databases, much like what I loved about Coda.io. You could put your task lists and Gantt charts in here, and it won't miss a beat. It's not as flexible as an actual excel spreadsheet, but it's a great in-between if you're just looking to build a universal document for your team.

The real killer feature for Notion is it's embedding ability. You can embed just about anything, including InVision, Framer, and Figma prototypes. You can leave comments on documents, reply to comments, view version history, and send public and private links. And all of that is in a UI so simple that it just feels great to use.

Notion has basically taken over my life. I use it for everything; shopping lists, meeting notes, even my FIFA career player database.

Everyone has one of those, right?

No?

Figma

Figma (Windows, Mac, Web) makes a triumphant return to the prototyping category, and it's even better than it was last year. The Figma team have made some fantastic improvements, including really well-executed overlay support and proper control over anchored items in scrolling pages.

Furthermore, Figma prototypes remain blissfully fast even with a large number of complex elements on the screen. If your prototype doesn't include complex logic or animation, Figma should have everything you need. Figma's prototypes also embed into web pages (Or Notion documents) really nicely. You can check out a recent Figma prototype of mine below:

InVision

For the low-fidelity side of things, InVision (Web) does a capable job and has HTML export capability, which is really handy for offline testing. I'm not a big fan of InVision, and it's not priced particularly competitively ($13USD per month) if you're not using its full suite of features.

Protopie

After the extremely sad demise of Atomic (RIP), I was forced to find a new prototyping tool. My requirements were pretty specific: it had to be Mac and Windows, must have the ability to handle basic logic (In particular, I needed to store and display variables), and had to have a relatively high level of animation fidelity.

Organic animations like pull-zooms are only a button press away!

I tried everything. Apps like Flinto, Principle and Framer almost fit the bill, but were Mac only. Axure was almost there, but I just didn't like it that much.

Protopie (Windows, Mac) might actually be my dream app. Multiplatform, great animation tools, and full logic support. Not only that, it's got great documentation and is easy enough to learn that I had built a few basic prototypes within the first few hours of trying the software.

The animation suite is surprisingly deep — simple transitions and movements are simple presets that you select when animating states, but a full animation engine underneath allows you to customise every element of an animation.

Likewise, the logic engine allows for storing and displaying variables as a basic feature, but advanced users can dive in and write expressions and algorithms to enable advanced functionality. This can all be tied together too, so animations can use data stored in your variables, and animations can be manipulated using mathematic equations.

If you're bored, that's fair. You probably should be. But what I'm trying to say is; Protopie is really good. I'd recommend checking out their gallery of examples to see just how powerful this software is.

As UI/UX Designers, our available software options are tremendous: Photoshop, Illustrator, Xd, Sketch, Figma, InVision Studio, UXPin, Framer, Affinity. The easy way to compare these tools would be to do some enormous breakdown of what features are and are not available in each, and how those features that are available compare.

But that's boring. Instead, let me just tell you what I like (and dislike) about each:

Sketch

I still use Sketch (Mac) every day in my job, and as much as I lament what it doesn't do well, it's worth saying that it's still a great piece of software.

Sketch isn't the gamechanger it was a few years ago, but they're still iterating in all the right places; symbol support has vastly improved in the last update, and prototyping tools are better than ever. Sketch Cloud has made it significantly easier to share your work around, and I really appreciate the UI refresh from update 52. Oh, and they added Dark Mode. Dark Mode.

Whilst not as exciting as dark mode, the data feature in Sketch is second-to-none.

Beyond all that, Sketch still offers the best support for plugins by a mile. Some plugins are simply nice-to-haves — like Sketch Runner or RenameIt — but others — like Google Sheets Content Sync — give Sketch brand new capability that other applications simply can't match.

Sketch isn't my personal favourite; performance can be poor at times, file management and libraries aren't as easy as I'd like them to be, and its vector tools feel limited when compared to its contemporaries. That being said, there's a number of good reasons it remains the #1 for many designers.

Still no Windows version, though.

Adobe Xd

As a business, Adobe is in a very strange place at the moment. There's never been more competition in the creative software space, and their pricing for Creative Cloud continues to divide the creative community.

In some ways, Adobe Xd (Windows, Mac) is a great example of what Adobe could be. It's free, for a start. It's also produced by a smaller, passionate team that regularly engages with the community. While Adobe is working hard to shed their big-evil-corporate visage, Xd is paving the way of a new, exciting Adobe.

Xd has some really unique features, such as Gamepad, Keyboard, and Voice input support.

Xd isn't up to scratch when it comes to features — it's missing a lot of the finer features of Sketch, Figma, or even InVision Studio. That being said, they've done a phenomenal job with their prototyping and animation tools. Furthermore, if you're deep in the Adobe ecosystem, it's well integrated into that workflow.

It's free, getting better every day, and has a great team behind it.

Figma

Anyone who follows me on Twitter knows I'm a complete shill for Figma (Windows, Mac, Web) — it's my absolute favourite piece of software on my machine.

There are so many things I like about Figma — it's got phenomenal design tools that feel great to use. Its responsive behaviours are easy to implement and very consistent in their execution. The prototyping tools, while basic, keep getting better and allow easy low-fi prototyping in just a few clicks. The prototypes themselves are so easily embedded into a webpage or document, it feels like magic. Most importantly, performance is stunning.

Figma just feels great to use — where other software (specifically, Sketch) sometimes feels like it's getting in the way, Figma feels like it's doing the heavy lifting for me.

An arc tool. Are you seeing this? An arc tool!

Since last year, they've added some great functionality to the already cutting-edge component system, they've implemented more advanced plugin integration through Figma API, and added a laundry list of quality of life features that really give genuine surprise and delight moments as a designer.

I actually want to give more time to learning new software like Xd or InVision Studio, but every time the chance comes up I simply can't resist going back to Figma.

Although nobody tells you this when you do your design course, selling your ideas is still one of the most important skills you'll need as a UX designer. To be a true advocate for the customer, you need to be able to present their point of view and convince a business how to best serve their users.

Since medieval times, project managers have used slide decks to sell their ideas to the masses. You should have seen the deck Alexander the Great presented to his troops before they conquered half the known world — it was a ripper.

I'm a big fan of Keynote, but sometimes I just need to slap something together quickly that looks great. For that, I've really found Beautiful.ai (Web) to be a phenomenal tool.

Simply put, Beautiful.ai is a series of templates for your slide deck. Each slide is customisable, but that customisation is limited in such a way that you can make minor changes to layout and presentation without the full control that you'd be afforded in other similar applications.

While there are options for layouts, you can't drag and drop elements like you would in Keynote or Powerpoint. And that's a good thing.

Some people might find that lack of full creative control frustrating, but it's also somewhat liberating. Instead of spending hours pouring over the finer details of your layouts, visuals, and animation, you just put a slide together and move on.

Initially, The web-based nature of Beautiful.ai was a concern. However, the desktop application allows you to save the presentations offline, giving you the best of both worlds.

It won't work for presentations where you need really bespoke, custom design. But for something quick, easy, and impressive, Beautiful.au is perfect.

Artboard Studio

You know those really fancy product shots you see from other designers, where a phone sits on a pristine desk with a tasteful pot plant and an artsy array of markers scattered nearby in a way that nobody's desk ever actually looks?

Ever wanted to make one without any need for a nice desk, cute props, or photography skills? Artboard Studio (Web) is for you. At it's core, it's a drag-and-drop image compositor with a ton of high-resolution objects and scenery provided for your mockups. You drag in a background, a device or two, some screen designs of your own, and some ephemera to spruce up the image.

I wrote about Artboard Studio back in June last year, and I was really impressed by the early-access beta that was running at the time.

It's in full release now, and it's only gotten better. The Artboard Studio team is regularly adding new assets for your mockups, alongside feature improvements and new devices.

Although it's quite expensive ($24 USD a month for the cheapest plan), the basic features are completely free and will give you a great taste for whether or not this product is for you.

Notion

I spoke about Notion in the Collaboration & Version Control section, and the same strengths I mentioned — easy collaboration, great integration with media and 3rd part data — make it equally great at documentation and even low-fidelity presentation or distribution.

Zeplin

As a handoff tool, Zeplin (Windows, Mac, Web) continues to get better and better. For Web, iOS, and Android, it generates spec sheets on the fly for developers to pull assets, colours, text styles, and even code snippets from.

Since last year, they've added some really great features specifically for handoff workflows. You can pop designs out of Zeplin into a standalone window to do side-by-side comparison with your simulator, and you can now view the full design system and pull assets or snippets from anywhere.

Simply put, Zeplin adds real value for both designers and developers, and even significant features for wider business units who want to collaborate or stay informed. It's a great tool that continues to get better.

InVision

My draft document of this article originally said: " Invision (Web) is awesome if you literally have no other options.". That's an unfair statement, but there's truth to it. InVision's UI is bloated and inefficient. It's developer tools are substandard compared to other similar solutions. There's little to no support for design systems or component repositories.

If you're not working with a large, multifunctional team, and you're working with a small number of screens, then I think InVision will work for you. At large scale with multiple stakeholders, however, I think it falls short.

The full list

Ordered somewhat loosely by how much I use them, here's every tool mentioned on this list:

Figma (Screen Design — Windows, Mac, Web)

The best screen design tool there is. Available on all platforms, fully featured, blazingly fast. Also a great tool for simple prototypes, and has the best collaboration features of any design tool.

Whimsical (Flowcharts & Wireframes — Web)

Awesome for conceiving new ideas, wireframing concepts, and sharing your early thoughts with others.

Notion (Documentation — Windows, Mac, Web)

A fantastic note-taking app that does so much more. Great for planning, great for documentation, great for collaboration. Ditch Confluence, uninstall Microsoft Word, set your notebook on fire, purge your hard drive, forget everything you ever knew, and just get Notion.

Protopie (Prototyping — Windows, Mac, Web)

The prototyping tool to end all prototyping tools, and by far the most impressive newcomer on this list. Protopie can do everything — rich animation, complex logic, and great performance. It's a slightly steeper learning curve than something like Flinto or InVision, but the effort is well and truly worth the result.

Artboard Studio (Mockups — Web)

By far the easiest way to put together great looking product photos. Saves me hours of tinkering in Photoshop and always produces great results. Updated frequently.

Beautiful.ai (Slide Presentations — Web)

Clean, gorgeous slide templates with great transitions and a good level of customisation. It won't replace Keynote/PowerPoint entirely, but it will save you gallons of time and make you look great.

Miro (Whiteboarding — Web)

A digital recreation of the classic agile whiteboard that absolutely nails its key features. Great collaboration tools, completely real-time, and strikes a perfect balance between messy and organised.

Zeplin (Collaboration — Windows, Mac)

A repository for all your design resources. Works with whatever design tool you want to use, available on all platforms, has version history, commenting, public linking and a really powerful inspect mode for developers.

Sketch (Screen Design — Mac)

Still the king of design tools from a market share point of view. Starting to feel a little outdated, but still a phenomenal tool with great support and a strong community. Extremely versatile thanks to the best plugin support of any design application.

Adobe XD (Screen Design— Windows, Mac)

Young, but hitting real maturity. Great for designers still working in the Adobe ecosystem. Missing a few key features when compared to Sketch or Figma, but still a great choice for both design and prototyping.

InVision (Prototyping — Web)

InVision is rapidly falling behind the alternatives but has value for creating quick, simple prototypes that don't need logic or animation. The ability to export your prototypes to offline HTML files is also a value-add for teams looking to work offline.

Dribbble (Inspiration — Web)

The invite-only nature of Dribbble has kept the quality of work high, and good filtering and search tools make it an awesome place to find inspiration for your next masterpiece.

DailyUI (Inspiration — Web)

Whether you use DailyUI as a fun design exercise, or simply as another source of design inspiration, it's a great place to find really diverse ideas growing from basic briefs.

Checklist Design (Inspiration — Web)

A great place to both get inspired and simply make sure you've covered all your bases. Checklist Design is still very new but already has made an impact on my design process.

Honourable Mentions & Omissions from 2018

Dribbble & Muzli

These are still good sources of inspiration, but I wanted to save space for some new entries this year. For this reason, they just missed out.

Atomic

It's dead, Jim. 😢

Flinto

I still like Flinto, but Protopie has the same functionality with significantly more features. With Protopie, you can have your pie and eat it (Sorry).

Confluence

Sure, it's the industry standard. And yes, it's probably the most comprehensive documentation tool out there for large teams and companies. But the mid-2000's Microsoft-suite style UI make it a big meh for me.

Coda.io

Coda is the best choice for cloud based tables, but Notion does everything else just a little bit better.

Overflow

Promising, but early versions were buggy and unreliable. I haven't tried the 1.0 release, but it's looking really good.

Trunk

Acquired by InVision and — as far as I can tell — no longer seeing significant updates.

InVision Studio

InVision Studio has gone from promising in 2018 to…well, promising in 2019. Improvements have been slow and underwhelming. Good animation tools, though.

Abstract

Alongside excellent version control features, Abstract's hand-off features are also great. That being said, it's Mac and Web only, and only works with Sketch. For that reason, it just doesn't make my list.

If you got this far; great job. You did a very brave thing today. Thanks so much for reading, I hope you found something you love!