UX Design Tools for Mac & PC

Okay, so there are a lot of design tools out there these days. A significant amount of discussion is happening around the topic of ‘Design Systems’. It’s a wanky name (It is. Seriously), but it’s a super important topic for both designers and for companies.

I work with a large team of designers, developers, and business members. As a designer, I take on a number of personal and freelance projects. These various tasks all have different needs when it comes to tools and systems, so it’s vitalto know what works well for which task.

I work on both PC and Mac, so all the tools on this list are multi platform, or have a great alternative. Please keep in mind that I’m not endorsing the alternatives — I haven’t tried most of them, so your mileage may vary.

Before we start, let me say something important: I’m not representing any of these companies or products, and I haven’t been endorsed in any way. These are my personal favourites, and the opinions here are my honest experiences with the products.

So, without further ado, take a look at my tools of choice for my personal and professional design system:

I know, I know. You come here expecting some great new tools to use and the first thing I want to talk about is Pen and Paper. I’m sorry. But hear me out, because I think this is the best way to start any idea.

Starting on paper lets you stay rough, iterate quickly, and not get stuck on the little things. There’s no such thing as pixel-perfect ideas, so freeing yourself from smart guides and snapping tools means that you literally can’t slow yourself down with details.

And by the way, I said Pen for a reason. Don’t use something you can erase. If you stuff something up, move on and keep going. This is a tip someone gave me mid last year and it’s changed my life — it’s led to a much scrappier looking notebook, but much faster and more creative iteration.

Another key part of any UX concept is the user journey, and for that I love Whimsical(Browser). Whimsical has a flowchart design tool that’s both easy to use and look great.

I will warn you, at $10 per month it’s an extremely pricey tool, but there is just something about it that feels really easy to use.

The flowchart on the left was made in probably 15 minutes in Whimsical, thanks to some really smart design decisions they made in the UI and shortcut keys.

I don’t want to sell this to you too hard, so just go and check it out yourself. It’s a keeper. The flowcharts in this article are made in Whimsical, and we’ll talk about them a little later when we get to wireframes.

If Whimsical doesn’t suit you, than this sort of flowchart design can be done pretty easily in your design tool of choice, or in pen and paper.

For inspiration, my two go-to sites are Dribbble and Muzli.

Dribble is great for really quick discovery of new ideas, especially if you’re looking for simple visual inspiration rather than system or product ideas. It’s a great idea to favourite a few designers or projects you love so you can come back to them when you’re looking for more. It’s a well curated community, so you don’t have to spend time trawling through bad ideas.

The Muzli chrome app is okay, but I find it to be a little hit and miss. What I really love from Muzli are their Weekly Inspiration and UX Interactionroundups here on Medium. There’s usually a really interesting and diverse range of designs in these articles, and they’re regular enough that there’s always something new to discover.

There’s also some phenomenal designers here on Medium that are worth a follow.

If you’re working on a project in any sort of team, you’re going to want to share your work at some point. Popping JPG’s in an email is one thing, but let’s take that process to the next level.

First up is Zeplin (Mac, PC, Browser). Zeplin does a lot of really cool stuff, but lets just focus on a few key features.

Firstly, Zeplin is great for sharing your work. You can add collaborators who can view screens, download individual assets, and leave comments and feedback on the designs. It’s a great way to start a project if you’ve got some key team members you want involved in the design process. We’ll talk more about it when we talk about developer hand off.

Secondly, it can generate style-guides as you work on the design. This makes it easy for collaborators to grab hex values for colours, or type styles.

Lastly, Zeplin is built from the ground up to export designs as code. We’ll touch on this later when we talk about hand off.

Zeplin is great for stakeholders, but what if you’re working with other designers? You’ll wantversion control. This might not be a term you’ve heard before — it’s much more common in programming — but it’s basically the concept of maintaining a history of changes to an asset.

For this, I really, really like Trunk (Mac App, Browser).

Trunk is essentially Github for designers. You tell Trunk which files you’d like it to look after, and it will monitor those files for any changes. When changes are made, Trunk records a log of who made the change and what the change was. The person making changes can comment on the update, letting users know what they did and why.

Trunk makes it easy for designers to work together, because there’s no more confusion about what changes were made or why. You can even roll back changes or handle conflicting changes in a non-destructive way, and view the entire history of the file (Which is super fun).

Note: Trunk is only compatible with Sketch and Photoshop files. For Figma users, figma actually has some light version control features built in.

Alternatives: Abstract, Kactus (Sketch files only)

Okay, so you’ve got your next big idea, and you’ve shared it with the team. They’re ready to see some sweet designs. What’s next?

Well, I start with some really basic wireframes. The goal here is to just blockout what the app might look like, so you can get quick, early feedback.

Hey, it’s our friend Whimsical again. They don’t just do great flowcharts, Whimsical also has a cool new wire framing tool. It’s worth noting that this is probably the application on this list I’ve had the least experience with, so your experience might be slightly different.

So, in truth, you don’t actually need a dedicated wireframing app. Our old friend Pen and Paper would do the trick nicely, and design tools like Sketch or Figma will also do the job. So why use Whimsical?

Well, in short, it’s really quick and really fun. Whimsical has a built in library of low-fidelity components; everything from buttons, to toggles, to check boxes, to text entry fields, to sliders, to tab bars, to- well, you get the point.

Everything runs on smart guides, so it’s a bit like building a lego puzzle. Grab a few basic components, pop them together and you’ve got a rough layout in no time. It’s a great way to really, really quickly build a rough idea of what your app is going to look and work like.

Whimsical also allows you to share your work with others and leave comments, so you can grab some quick feedback.

I’m sure you recognise the pretty diamond — that’s right, it’s Sketch o’ clock. And Figma o’ clock, actually. And Adobe XD time, and InVision Studio PM, and so on, and so forth.

I can’t imagine anyone needs to know more about these programs— they’re everywhere now. However, for wireframing, here’s a nice big tip: make (or download) a wireframe kit. This one by Nicolaj Reck is really great for Sketch, but making your own can be a really fun exercise.

We’ll talk more about these programs later, but the best tool in this case is the one you can work quickly in — it’s all about fast, iterative design.

Prototypes are a great way to show how your product acts and reacts when used, even in the early stages of development. There are so many different prototyping apps out there, but let me talk about a few of my favorites:

I’ve tried not to sound like I’m selling any of the products on this list, but I think this is going to be the statement that labels me as a complete shill: I think Atomic (Browser)is the next big thing in prototyping apps.

I believe this for one particular reason: Atomic allows you to program actual logic into your prototypes. This means you don’t have a prototype that just looks like your app, it also acts like your app.

It’s hard to explain in words, so if you click one link in this article, click that Atomic link. This app deserves your attention.

Next up, it’s Flinto (Mac). Flinto sells itself as a bit of everything, and that’s fine, but what it’s really good at is animating interactions. Things like scrolling interactions, complex transitions, and micro interactions are quick and easy in Flinto. It also allows you to embed videos or GIF’s, so you can use your existing animated assets in your prototypes.

The best thing about Flinto is it’s simulator. It’s really snappy and fast, and it’s the closest I’ve ever had a prototype pass as the real deal. It’s a great tool if you want really high fidelity interactions and animations.

Finally, reluctantly, it’s InVision’s (Browser) time to shine. I’m not a huge fan of InVision, and I think they spend a little too much on marketing, and not enough on product support. That being said, it does do a really solid job of generating quick HTML prototypes that can be shared and commented on, and be modified on the fly.

InVision deserves to be here, but I prefer Atomic in most scenarios. In fact, if you don’t want to use Atomic, and are leaning toward InVision, consider Figma or Sketch’s built-in tools first — They both support basic clickable prototypes that can be shared to users and commented on. They both miss things like scroll groups and advanced, custom animation, but should be more than enough for a simple prototype.

There’s a few heavy-hitters I haven’t touched on here, so let me make some quick notes:

Principle (Mac): I found Principle really hard to use, and just didn’t really ‘get’ the hype around it. That being said, it’s hugely popular, and surely for a good reason.

Marvel (Browser): I haven’t got much experience with Marvel, but it’s one of the few apps on the list that can be used on PC, and it integrates some cool collaboration and hand off features. Depending on what you’re after, might be worth a look!

Edit: Axure (Mac, PC): I originally wrote off Axure in this article as a little outdated, and stated I didn’t personally have a usecase for it. A few people have commented that Axure is actually their go-to tool, so I wanted to give it it’s proper dues. I’m going to qoute a great comment by Robert Mion that sums it up nicely:

[Axure] is an all-in-one tool. In fact, several large companies — who maintain a highly controlled list of software — offer it as the only tool for designers to leverage. Luckily, Axure is — as you mention — equally as powerful as nearly all the other tools described here…as long as you become an advanced user you can prototype just about anything.

In summary, you may not use it because you work in an environment where the other tools are available to you and you’re already skilled in using them, but don’t let that fool you into de-valuing the power of Axure.

Balsamiq (Apple 2, Windows XP): I’m going to be honest here, I just don’t really have a place in my lineup for Balsamiq. It has been the defacto low-fidelity prototype app for a long time, but I feel that you can find the functionality and features in most of the other apps mentioned here. On top of this, the work you put into Balsamiq won’t come with you to other apps when you move into high fidelity design.

Okay, this section could get really big, really quickly. I’m gonna try and keep it succinct, because there’s already so much written about these programs.

Figma (Browser, PC, Mac)has become my unequivocal design tool of choice. More than any other reason, it’s because I can use it on PC. However, I believe it also has some really great features regardless of platform.

I love Figma’s pen tool. It’s a little thing, but it my favourite tool to draw in, especially when I want to draw to pixel scale.

I also love how Figma handles component overrides. Rather than endless lists of text boxes in a dialogue panel, Figma lets you simply modify the layer and treats your changes as overrides. It’s easier than Sketch, and also allows you to make more complex changes. Brilliant.

On top of that, Figma’s got great collaboration tools. In fact, I wouldn’t even call them ‘tools’. Collaborating in Figma is literally as simple as opening the file and making your changes. Because it’s cloud based, everyone in the document sees what’s happening on the fly. It’s totally seamless and kind of magical.

Lastly, Figma’s prototyping and sharing tools are really great for a program that isn’t built for that. The prototypes are HTML based so you can share them with anyone.

Did I mention Figma is free for a single user?

The big boy — Sketch (Mac). There’s no secret as to why Sketch is so incredibly popular for screen design. When Bohemian launched the product there was simply nothing like it on the market. Thanks to massive plugin and resource support, Sketch is the undisputed king of UX software.

More recently, Sketch’s development has slowed down considerably. The last major update introduced an InVision based prototyping functionality that, while well implemented, sticks you firmly in InVision’s pocket. Furthermore, after years and years Sketch is still restricted to the Mac platform, meaning that you‘re pretty out of luck if anyone wants to use a PC in the office.

Thankfully, Lunacy (PC) by Icons8 is able to open Sketch files. It’s not perfect — actually, it’s pretty broken — but it’s great in a snap and if you started your design in Lunacy you’ll never have a problem. Lunacy has a public feature request list, so you can see what’s likely to be next up in terms of features.

Once Lunacy has symbol support, it could be a really viable alternative.

Adobe XD (Mac, PC): I am always skeptical about Adobe products. Some of my favorite apps ever are Adobe built, such as Photoshop and After Effects. However, many of their newer apps release in very early forms, missing major features.

Adobe XD did launch in a pretty lightweight state, but is starting to get really, really good. It’s super fast, has some great tools, and Adobe has some great design kits ready to go.

It also supports some complex animations in it’s prototyping tools, which is nice. Really importantly, it’s got flawless importing from other Adobe products (And pretty good Sketch imports, too).

Edit: It’s also worth mentioning that Adobe XD supports some basic handoff and version control features through Creative Cloud, and (As Hollveticakindly pointed out in the comments) fully supports exporting to Zeplin (It even maintains it’s clickability if you’ve set up a prototype). I’d still recommend purpose-made tools for these tasks, but if you’re already paying for CC, you might find it helpful!

I haven’t spent enough time with it to truly endorse it, but it’s certainly worth checking out, especially if you’re already an Adobe Creative Cloud customer.

InVision Studio: Imagine Sketch, but with great marketing and kinda no features. Actually, that’s harsh — for a new comer, InVision Studio has made a really promising start.

It’s the app that promises to do everything: design, prototype, handover, all in one neat space-black package. It’s still in early access, and just not quite there yet. Watch this space.

So you’ve got a great idea with some good thinking behind it, and some awesome artwork to match. Great!

Whether you’re doing contract work, working in a design studio, or in an embedded team in a company, the next step is to sell your idea.

To be fair, a lot of designers don’t worry so much about this. Maybe you have someone who will present it for you, or maybe you just think your work speaks for itself. Eventually, however, you’re going to have that really great idea that only you can sell. So let’s talk about how.

To generate some hype and get buy-in from stakeholders, my go to tool is Apple’s Keynote (Mac). Here’s a little tip from someone working inside a corporate: business people love slide decks.

Keynote separates itself from PowerPoint and Google Slides by having some really easy, really powerful animation tools. You can use these to your advantage and really tell the story behind your designs.

Alternatives: PowerPoint (PC, Mac), Google Slides (Browser), Prezi (Browser)

Just like version control, documentation is something that’s more and more commonly requested in design work. This is the act of recording all the necessary details about your design, either for prosperity or for other teams.

For that, my team uses Atlassian’s Confluence. It’s essentially an internal wiki with advanced permissions features. The designer can drop in screens and user flows, the business team can add acceptance criteria, and the developers can use the page as a resource to further understand the logic and intentions of your designs.

I don’t love Confluence. It’s probably my least liked product in this article, due to a clunky user interface and tricky navigation. That being said, it really does the job we need it to do and fills an important role in our process.

I’d be remiss to talk about documentation without mentioning my personal favourite: Coda.io (Browser).

Coda’s mission is to replace all your various documentation apps with a one-stop shop that can support rich text documents, formulas, tables, graphs, sprint boards, you name it. It’s become my go-to for personal projects, and once it’s out of it’s closed beta stage, I think it’s going to be a huge hit.

Rather than offer specific alternatives, I’ll just say this: documentation is a really important part of working in a team. It means that your ideas, thoughts, and intentions live on when you’re not there to represent them. It also creates less friction during hand off to other team members. There’s a million ways to do it, but what’s important is that you do.

While we’re here, just a few quick honourable mentions:

Overflow: I haven’t spent a lot of time with Overflow yet, but it’s a really promising app that can do some really cool stuff. The premise of the app is to take your screens and help you build them into a user flow diagram that can be easily presented to stake holders, or used as a design resource. It’s worth checking out!

Hey, we made it! We’ve done the hard yards, built something awesome, and our key stakeholders have said the magic words: “When can we have it?”

Firstly, let’s go back to our old friend Zeplin.

Depending on the project, there’s a few ways your team might use Zeplin. It might be an easy way to keep a team styleguide, or a good place to store and retrieve key assets.

If you start looking into Zeplin’s more advanced developer features, it really starts to shine; things like exporting code snippets for design assets, or exporting assets in multiple resolutions, can really speed up the development process, and it means developers don’t have to chase you up to get resources they need.

The other returning app is InVision. InVision’s implementation is a little simpler than Zeplin — you can simply highlight any object or group and InVision will give you the properties of that object or group.

It’s a nice way to determine sizes, text styling, and colours.

You can also export assets, however the export settings need to have been specified in Sketch beforehand (Zeplin has this same limitation). InVision also supports some code exporting features, but you’d probably need to ask a developer if you want to compare between Zeplin and InVision in this regard.

Avocode: Avocode deserves a quick shoutout because it supports more than just Sketch; it also supports Figma, Adobe XD, and Photoshop. It’s also purpose built for generating code out of your designs. My experience with Avocode is limited, but if developer handoff is a big part of what you do, Avocode is probably worth looking into.

You made it! We’ve covered the entire design process from early concept to final delivery. Cool stuff! Hopefully you’ve discovered a few apps that will enhance your workflow in some way.