After years of Adobe being the name for all your design software, Sketch set a new standard for UI design tools. It showed that UI designers have different needs than other creative people. After that a small explosion of design tools took place. Suddenly we designers have choice!
About the comparison
I made this comparison mainly for the kind of work that I and my coworkers at BCG Digital Ventures do. We build new ventures and for those we design digital products: from the earliest product concepts to launch and beyond. We get to work on products for all kinds of different contexts. Because of that, our default design tool has to be a general purpose one. This environment also makes me value tools that support quick design iterations, collaboration in small teams and getting things ready for production fast.
So please note, if you work in a different environment, you may disagree with my conclusions. The objective part of the comparison may still be useful to you though.
With that out of the way: I’m comparing Sketch, Figma, Adobe XD, UXPin and InVision Studio because of what these tools have in common. They all:
- Let you create static user interface screen designs
- Let you define responsive layouts
- Visually structure pages and layers
- Let designers set CSS-inspired properties for layers
- Support nested components.
Where’s Axure? I used Axure a lot and it’s still the main design tool for many large organizations. I didn’t include it, because its approach is different from the others. It’s not really a screen design tool, but more of a prototyping tool and some other things. It hasn’t had a meaningful update in a long time (years?), so I’m hesitant to recommend it to someone who doesn’t know it yet.
In this post I use the word components for the reusable chunks of design that are called symbols in Sketch and Adobe XD.
Feature comparison (updated in April 2019)
|Web, Mac, Windows
|Web, Mac, Windows
|With multiple files via shared library, on one file with Abstract
|Automatic history with manual save points
|Basic, advanced with Abstract
|Video recording of prototypes
|On Mac only
|Only in online prototype with Adobe account
|Export SVG and PNG assets
|Free trial, 30 days
*) InVision Studio has an integration with InVision prototyping, that offers these features.
⁑) InVision developed the Craft plugin for Sketch, that integrates Sketch with InVision. InVision (not to be confused with InVision Studio) is a prototyping tool offering video recording, commenting and presentation mode.
⁂) There are several integrations for Sketch that offer inspector tools, such as InVision Inspect, Zeplin and Avocode.
Looking at the table, you may think that Sketch is the worst and UXPin and Figma are tied for first place. That won’t be my conclusion though!
The excitement around InVision Studio was one my motivations for doing this whole comparison. Unfortunately the feature set of the early access release that I got is so limited that I would not recommend to start using it for professional work yet. I guess that’s sound advice for most beta software, but most of the hyped features are still ‘coming soon’ or are so hidden, that I couldn’t find them:
- Version control
- Design specifications for developers
- Windows version
- Marketplace for extensions (‘apps’)
None of the other applications in the comparison offer all that, but InVision Studio’s current are too limited for my use. For example:
- The set of layer properties is limited:
- Text layers don’t support shadows and blurs
- No dashed borders
- You can’t set the height of a text layer, so there’s also no vertical text alignment.
- No visual overview of components: just an alphabetical list.
- No positioning (other than x and y) of objects inside groups. That means for instance no placement relative from the bottom right of a parent object.
- Zooming and panning performance is so low that it affects the speed at which I can navigate a design.
InVision Studio integrates with InVision prototypes, but so does Sketch with the Craft plugin that InVision developed. You still have to switch between Studio and the InVision prototype, so there’s really no difference there.
InVision Studio offers one thing that otherwise only UXPin has: timeline animations. Upon an interaction, the position and size of layers can be transitioned. That’s just a few properties and it doesn’t seem possible to add keyframes. Having that control over the design in the time dimension is still a lot more than what other tools offer, so for many a designer it can become the reason they will start using InVision Studio.
UXPin is special. It has some project management features to support designers along the whole design process, beyond just designing detailed screens for prototypes and handoff. That’s way beyond the ambitions of the other tools! Strangely, it doesn’t offer a way to export assets though.
Each new UXPin project comes with libraries including several for web design, iOS and Material Design. You can also find such libraries for Sketch, Figma and Adobe XD, but not having to search for them first can speed up going creating first concepts a bit.
UXPin puts design systems central. It promises that you can import a design system by pointing to a website. This was easy and fast, but it captured only a few of the colors of my website. Typography and other styling were ignored. I wanted to test that feature with some other websites, but after a couple minutes of searching, I couldn’t figure out how to do it a second time.
The documentation features surpass those of the competition:
UXPin’s UI stands out from the other tools, but not in a good way. I guess I could get used to some of it, but:
- Zooming does not take the mouse cursor position into account, forcing you to repeat zooming and scrolling all the time.
- I get confused by how the components are linked. Component instances can be edited in place. Text changes are treated as overrides, whereas changes in visual properties are applied to all component instances. All components are added to a nice visual library. So far so good. However, when I added an additional instances of a component, overrides for existing instances were removed.
- The UI does not seem to allow viewing multiple pages at a time!
On the other hand, it has features none of the other tools have:
- You can add custom CSS to elements, although the list of supported properties is limited. No animations for instance!
- You can assign different states to components.
- You can create HTML prototypes with things like real text fields.
- Keyframe animation
According to the documentation, UXPin can add keyframe animations to interactions. After making several 1 week trial accounts I didn’t feel like making yet another one to test it. The animation options seem to be the most advanced of what all the tools offer. In fact only InVision Studio’s features come near it and that’s still in beta.
I appreciate the integration of what could have many different tools for wireframing, testing, handover and presentation. But there’s no real benefit in that when the actual screen design features fall short and I just didn’t like using it. I may have to try it longer, but on with trial of only seven days, that’s not likely going to happen.
Update: in the spring of 2019 a free plan was added and prototyping now includes conditional interactions. As UXPin is still the most different from the other tools, I recommend trying it yourself!
To my surprise, Adobe stopped developing Fireworks after the CS5 version. Of course they wouldn’t just let go of all us UI designers. They started something completely new: Adobe XD. The design process for XD was very open for Adobe’s standards. I believe that was not just a marketing ploy to create awareness for the product, but very much also to get feedback early and often. The result is something that is decidedly different from the other Creative Cloud tools, but to me just feels right. XD’s UI is just all light grey, making the designs being created with it shine. It’s performant: scrolling and zooming is fast, with no perceivable lag.
A coworker of mine likes to say ‘there are two types of screens: lists and detail views’. Adobe XD has a nice approach to making lists. In other tools you usually have two options:
- Copy a bunch of elements over and over again, causing an unmaintainable mess
- Copy a component over and over again and add overrides, which feels finicky and takes time
In addition to the above, Adobe XD has ‘repeat grids’ that are just super fast ways to create lists and grids. Each item in such a repeat grid is editable, showing changes to layout immediately visible in all instances.
Some more other things I appreciate about Adobe XD:
- It works on Mac and Windows
- Basic prototyping with overlays and transitions between screens
- Design changes are visible in realtime on other devices
- Video recording of prototype use
- You can link to images (for instance Photoshop files) and texts in external files. You can combine that with the repeat grid and drop in a bunch of content from image files and return-separated text files.
- Visual overview of components, styles and assets
It has some serious limitations too:
- Components can’t be resized
- Components can only get text overrides
- There’s supposed to be version control in Creative Cloud, but since April it has not been available.
The limitations to how components can be used make it difficult to create designs systematically. It requires repetitive work to create components for different screen size, or just creating copies of elements that can’t be easily updated. Otherwise, to me it comes across as a very decent tool.
Figma is the Google Docs for screen design. It’s a lot like the other tools, but multiplayer! Of all the applications, Figma excited me the most. I was expecting limited functionality like with the other tools, but Figma has all the tools I consider essential in Sketch. It runs in the browser and as an offline Electron app. In both, Figma’s performance feels on par or better than any of the others. The prototyping features are just basic, but enough to do a decent click dummy. In early stages of a project, that’s all I need. I can always sync to InVision at a later stage. There’s also a property inspector that makes it easier to hand over specs to engineers.
Figma shines here:
- It’s a single tool for design, prototyping and specs.
- It works on all OSs: there’s a web app and an Electron app for working offline.
- You can set overrides to components from the layer palette. For large components, that works much faster than Sketch’s overrides panel.
- Figma lets you set component overrides for almost all properties of layers including colors and fonts.
- There’s an automatically created visual overview of components
- When positioning layers, they snap to relevant other layers. This is a relieve coming from Sketch! Update: an April 2019 update of Sketch should include improvements to snapping.
- It can be used by non-designers to leave comments on elements of the design.
It also has some flaws:
- Limited prototyping options. Artboards can be synced to InVision with InVision Sync though.
- Figma’s visual design is inconsistent and lacks hierarchy.
It’s not pretty. There, I said it.Update: it looks a lot better now!
With the free plan and the possibility to easily collaborate, it has become a popular tool for free, open source projects already.
Figma’s approach to nested components and overrides is only a bit more flexible compared to the other tools. The impact of that is huge though! You can create a single source of truth for colors, fonts and other basic variables and easily refer back to these anywhere in the design. That enables you to make true design systems.
Sketch has a large user base and is relatively open: it has an API for third party applications to create things inside Sketch files. Its files are open too. Applications like Framer and Principle can import all the elements you define in Sketch separately. That openness makes it an attractive platform for which many plugins, extensions and libraries are available. That’s also a weakness, as updates to any of the tools can break your stack.
There’s a lot to like about Sketch, but the most important things to me are:
- Ecosystem: many paid and free plugins, templates, symbols, like publishing to Realtimeboard.
- With Abstract: collaboration on a single file, version control
- With Craft and InVision: prototyping without having to draw hotspots
- Performance: UI has become more responsive with the latest updates
Sketch’s main drawbacks are:
- Somewhat limited without third-party tools like Craft, InVision and Abstract.
- Mac only!
For my kind of work, Figma and Sketch are the best tools, with Adobe XD starting to catch up. In fact, if you’re the only UI designer on the team on a project that’s heavy on data and images, Adobe XD may be the best choice. InVision Studio is just not ready yet. Depending on when it delivers the features InVision has promised, it can become the most versatile of them all. UXPin seems to have found a niche, but I can’t say what kind of work it supports better than the others.
To teams with specialized designers relying heavily on plugins, my advice is to use Sketch. Not just on its own, but with Abstract for version control and collaboration, InVision for basic prototyping and a tool like Framer or Principle for animation. That combination is more versatile than what any of the other tools offer on their own. It requires setup time and alignment meetings that are only worth it if your lives depend on certain Sketch plugins. You may think it’s the most reliable because of Sketch’s reputation. In my experience, because of the dependencies, that’s not the case. These setups can break easily, when one plugin requires the latest version of Sketch, where another is not ready for that update yet. In such a situation, a Sketch file can get messed up or can no longer be efficiently updated.
Figma does a lot that the Sketch + InVision + Abstract combo offers, but without setup time and manual file syncing. It has everything in a single application that is faster and easier than that of Sketch. Because of that I think Figma can do a better job than Sketch in most situations. If plugins are not important to your team, the only real benefit of using Sketch with Abstract instead of Figma is that Abstract allows for more explicit acceptance and merging of changes. Figma is a big party where everyone can do what they want at the same time.
Screen design tools have come a long way in the last few years. Sketch and Figma stand out, but all the applications’ feature sets are converging and they all retain their own strengths. I recommend trying one you haven’t used yet for a hobby project. Especially UXPin, just because it’s different.
Even when all the best features of all of them would be combined in one super tool, I would find it far from perfect. The screen-based approach seduces designers to create artifacts in isolation, ignoring the larger product. Because that’s a whole other topic, I wrote another post about how I think design tools could be improved.
If this post inspires you to pick a new tool and just try it yourself, then you may also be interested in the interoperability between design tools.
Thank you, everyone who pointed out mistakes and omissions. Have you found another error, omission or do you disagree with me? Please let me know.
Addendum April 2019
Since I first posted this comparison, all tools have been improved. To do justice to that, I’d have to do a new comparison. Based on release notes, I haven’t changed my tools of choice yet, but here are some things you can factor in:
- In 2019, InVision, Figma and Sketch got some serious funding from investors
- You can now make voice UI prototypes with Adobe UX. Try it: you can make a demo really quick and see how well it works. The voice interactions are still very simple, so at this point, Mechanical Turk/Wizard of Oz prototyping could often work just as well.