What are the best UI design tools to use in 2018? Let's take a look!
What you'll learn
- Which UI tools are best
- Breakdown of the features
Standard Features for UI Design Tools
It’s almost an unspoken agreement that UI tools need to be a quadruple-threat to compete in today’s design industry, offering drawing tools, prototyping, and design handoff features all in a single app (or at the very least, integrate with third-party services to make this full-featured workflow available). As we’re starting to see benefits of a lean design workflow, it’s clear that UI design tools also need to be collaborative.
Let’s compare the best UI design tools on the market today.
Sketch App (macOS only)
Photoshop lost its crown to Sketch as the most-used UI design tool back in 2015. Sketch App revolutionized UI design, inspiring a whole new wave of UI design tools that saw the clear benefits of smart guides, symbols, asset exports, and artboards.
While Sketch has become a victim of its own success, being “the first” has had it’s advantages, since it’s still the most commonly used, and one of the best UI design tools for macOS users today. It’s certainly the cleanest and most intuitive, and can be a mighty force for those willing to extend their workflow with third-party integrations.
For design handoff, the options are Sympli, Zeplin, Avocode 3, and Marvel App, all of which allow UI designers to handoff design specs (including fonts and image assets) to developers. These design handoff tools also enable stakeholders to offer feedback.
Prototyping with Sketch can be achieved with:
- Flinto (includes advanced interactions)
- Principle (includes advanced interactions)
- Origami (includes advanced interactions)
- Sketch App alone (only simple user flows)
- Overflow App (only user flow diagramming)
- Marvel App (includes design handoff, and user testing with Lookback)
- InVision App (includes design handoff, and user testing with UserTesting)
Marvel App vs. InVision App
Sketch and Marvel are a terrific tag team combination, since Marvel extends Sketch with not only prototyping functionality, but design handoff and design collaboration tools as well. While InVision App also ships with the same feature set, their Studio app also has drawing tools, so UI designers taking the InVision route may as well adopt InVision Studio as their sole design app, especially since it enables advanced animation.
Sketch App by itself is $99/year, InVision Studio is free for individuals.
InVision Studio (macOS only)
InVision recently announced InVision Studio: everything a UI designer needs in a single app subscription—drawing tools, prototyping, design handoff, collaboration—even advanced animation tools, making it the most complete UI design tool available today.
Other InVision features:
- Ability to collaborate on ideas in realtime with InVision Freehand
- Boards (for collecting ideas and inspiration)
- Design System Manager (for complete design consistency)
- Full accountability with task tracking and commenting features
- Integration with UserTesting, for…well…user testing (and usability testing)
- Workflow extension with third-party apps like Trello, Slack, JIRA, and Dropbox
Oh, did we mention that InVision Studio is also free? Comparing InVision Studio vs. Sketch, InVision boldly leads the way with cheaper costs and more native features 👏.
Adobe XD CC (macOS, Windows)
Based on the success of Sketch App, Adobe XD CC ships with many of the same features (and more: repeat grids, design specs, et cetera), but still feels somewhat familiar for veteran Adobe designers. Plus, like InVision Studio, Adobe XD looks to invest funds in third-party integrations to make the app stronger and more versatile.
Comparing Adobe XD vs. Sketch, not only does Adobe XD offer more features right out of the box, it’s arguably the best UI design tool for Windows users, and even macOS users who delight in being familiar with Creative Cloud and the Adobe ecosystem.
Plus, there’s a free “Starter Plan” 👌.
Figma (Web, macOS, Linux, Windows)
Figma boldly introduced their browser-based design tool with impressive multiplayer design functionality, which essentially enables designers to collaborate in realtime (with minimal lag, btw). Figma is an excellent Sketch alternative for Windows, although there are now macOS (and even Linux) versions available, making it an excellent collaboration tool for teams spread across different operating systems.
Like most UI design tools, Figma enables prototyping, live testing on real devices, commenting, but massively excels when it comes to adaptive layouts and design systems. Figma integrates with Zeplin and Sympli for design handoff functionality, although ships with its own design handoff tool for designers who’d rather contain their design workflow in a single subscription. A true, solid contender. We recommend.
Figma is free for solo designers 👏.
Comparing Figma vs. InVision Studio is a tough one, since they’re both offering mighty features. Ultimately, if your team needs multiplayer design/live collaboration, Figma is the better option, although InVision Studio is better for larger, feedback-driven teams.
Figma vs. Adobe XD? Figma has more features and it’s also more dynamic, but for UI designers already ingrained into the Adobe ecoystem, Adobe XD is the safer choice.
Framer Studio (macOS)
Historically touted as an app that enables designers to design with code (CoffeeScript), Framer has since entered the ring with a visual editor, introducing Framer Studio.
While it compares well with Adobe XD and InVision Studio in terms of features and usability, it’s also a brilliant option for data-driven designers that enjoy prototyping using real data. Some knowledge of code (JS and JSON) is helpful, but not necessary.
Although not as mainstream as the likes of Sketch, InVision, or Adobe XD, Proto.io is one of the few design tools that take designers from wireframe to high-fidelity interactive prototype, with design handoff and collaboration features, and still manages to attain wonderful usability as a multifunctional design tool. Proto.io is also the team behind new user flow diagramming tool, Overflow App, also well worth a try!
It “feels” like Adobe XD.
UXPin is an extremely full-featured design app with added wireframe tools and the ability to maintain design systems and documentation—the downside is that all of this is crammed into a browser-based web application, which can be slow and buggy at times. While it’s an impressive tool for enterprise-level teams with enough CPU and RAM, it may seem visually and functionally excessive for the everyday UI designer.
Webflow lacks design handoff features because it’s a WYSIWYG editor, allowing web designers to leap straight from design to a live website. Taking care of any hosting and CMS needs, Webflow exports clean, responsive code, and even allows for beautiful interactions that work in every browser (the code can also be exported and used elsewhere). Although Webflow takes the time and effort out of developing a website, it lacks the ability to maintain design systems and collaborate within teams.
New & Noteworthy
Subform is still early-stage, but it’s looking like a top contender as an app that makes it super easy to switch up layouts with direct manipulation (i.e. less pixel nudging!).
Phase (will be) a UI design tool enabling adaptive layout design (much like Figma), sophisticated design systems, live collaboration, commenting, user testing, version control, web and mobile app code export, and the ability to design with real data.
Wireframe & Lo-Fi Prototyping Tools
Wireframe and low-fidelity prototyping tools play a vital hand in how we learn, fail, iterate, and improve. High-fidelity UI design takes the same approach, however more care is taken as we gradually start to leave behind our rapid approach to prototyping. As our needs change, so do the tools, although in our wireframe and low-fidelity prototyping tools roundup, you may see some of the tools also outlined in this article.
For example, Sketch can take us from wireframe to high-fidelity because of its hackability, making it one of the most versatile UI design tools on the market today.
For best results, make use of their free trials and see what works for you!
Download our ebook, A Beginner’s Guide to Designing UX, to learn how to design astonishing UX from the ground up, including how to conduct a 5-day design sprint.
Daniel Schwarz is a digital designer, web developer, and maker by background, but a writer, editor, 3x author, and teacher at heart. Currently a design blog editor at Toptal and SitePoint, writer at .net Magazine and Web Designer Magazine, but occasionally a collaborator with top design companies such as Adobe and InVision.