A BIG decade has wrapped for UX disciplines – “The Decade of Design” where we witnessed the rise of mobile and the “reshaping of customer preferences and the designs that powers them”. Although UX design has been around for a while now (nearly 3 decades), it is still in the infancy stages of its development when it comes to design tools.
Before 2010, designers used Photoshop (sometimes Illustrator) as their tool to create websites and apps mockups. After years of Adobe domination in large areas of design (photo-retouching/digital art by Photoshop, vector art by Illustrator, motion design by After Effects, editorial design by InDesign, etc.), Sketch came around and set a new standard for UI design by addressing different creative needs.
To set the stage a little, it’s important to make one point clear: design and prototyping tools are not the same. Many tools have evolved to become the all-in-one inclusive tool from designing to prototyping and collaboration. Some of these tools include Framer X, Figma, ProtoPie, Studio, UX Pin, and Adobe XD.
For the purpose of this article, we’ll be looking at 3 UI design tools that have been dominating the market: Sketch, Figma, and Adobe XD. UI design is where users spend the most amount of time and all of these tools have the following in common:
- Ability to create static UI screen designs
- Ability to define responsive layouts
- Visually structure pages and layers
- Ability to set CSS-inspired properties for layers
- Support for nested components* (Sketch stopped supporting nested artboards)
Sketch was the first to emerge as a well-established design tool when it was introduced in 2010. The idea behind the software was a simple drawing application, which was well-received by designers. Its popularity grew constantly and many designers left Photoshop for their UX/UI design projects. Sketch’s phenomenal growth – crossing 1,00,000 paying customers, has dominated the market by allowing users to upload and share Libraries via Sketch Cloud, and introducing shared prototyping.
Sketch is relatively open: it has an API for third-party applications to create things inside Sketch files allowing for plenty of user customizations. This openness makes for a very attractive platform for designers and developers alike with the many plugins, extensions, and libraries available. For UX designers specifically, we’re seeing that Sketch is becoming the complete UX design tool because of its addition of UX deliverables. There have been added features for users to create user flows, personas, and journey maps as well as design handoffs and specifications.
Unfortunately, it’s only available on Mac (you can find a way around this) and it doesn’t integrate with the Adobe Suite products.
Similar to Sketch in functionality and features, Figma launched in 2016 as a cloud-based design tool; in other words, it runs in the browser. This is super appealing because everyone can open, share, and edit Figma files regardless of the user’s operating system. As such, Figma is more accessible than Sketch especially when designers and developers are often on mac and windows respectively. During the handoff process, Figma brings designers and developers together by easily making design work available for everyone.
In addition to easy-open files, Figma uses Slack as it’s communication channel; when any comments or design edits are made in Figma, the team is pinged in Slack. Figma allows for permission-based sharing of files, pages, or frames by creating a link for users to open (similar to Google Drive). When files are open, they are edited in real-time and you are able to see who is working on which portion of the project.
Before Figma, there were several tools required to facilitate the exchanges of design mockups and updates but since then, third-party tools are no longer needed. This new approach from Figma could be a major contribution to its already amassed 1 million paying customers as of 2019 in comparison to its elder, Sketch.
While the first generation of designers began with Adobe Photoshop as their design tool of choice, this tool was not built for user interface design. When Sketch was released, it drew many users over from Adobe. Because of this, Adobe released a beta version of Adobe XD in 2016. At this time, Sketch was six years established with a wide user base and a whole ecosystem of plugins for easy working. Figma had also launched a few months prior so as a new contender, Adobe XD had their work cut out for them.
As a product in their long-known award-winning design software, Adobe leveraged their deep ties with the design community to take off. Their approach was to offer XD in their already established design plans. For individuals, there is a free limited share feature and an unlimited user plan for $9.99/month per user.
For many veteran Adobe users (like myself!), XD joined the Creative Cloud suite becoming readily available for use and offering seamless integrations of vector-design tools such as Illustrator. While nothing says that complex vector artwork cannot be created in Sketch and Figma, there are various design limitations in all apps on their own.
To keep up with its two great cousins, XD has been continually making changes and adding features to its program. In November 2019, they added a bunch of functionality: coediting, document history, component states, and more; yet, it is still simple to use.
For many UX career-changers and self-learners, XD is their go-to tool because starting is easy. Adobe excels in insuring minimum user learnability by keeping XD similar to Sketch’s UI and maintaining known keyboard shortcuts from other Adobe programs. There’s no doubt that XD could rule UI design tools one day, but are all designers willing to fall into similar Adobe monopolies (such as Photoshop, Illustrator, and InDesign)?
Other design tools
Aside from Sketch, Figma and Adobe XD, there are other known UI design tools and many new-contenders joining the list.
Invision Studio, a potential spinoff of the 2016 Macaw from InVision, is a standalone app for UI design, prototypes, and animations. Not to be confused with InVision (a prototyping tool), Invision Studio is still in its primitive phases as many features such as commenting, presentation mode, and prototypes require the integration of InVision.
Framer X began as a code-based tool for creating prototypes but they’ve been steadily integrating design capabilities. In its latest integration, Framer X can be termed as a UI design tool with the ability to code interactions and animations for better control and flexibility.
Axure is an awesome tool more commonly used in enterprises (larger companies). Its approach is not in screen design but more-so rapid prototyping, documentation and specifications, and hand-off. Also, their release history has primarily consisted of bug fixes instead of meaningful updates. Here’s a previous UXB post on why Axure is a great tool.
Gravit is a product bought by Adobe competitor, Corel, in 2018 that has been slowly making subtle improvements in the background. While this tool hasn’t climbed to top trendings yet, we might be seeing more features and traction within the community soon!
Which One Is Right for You?
In the past decade, screen design tools have come a long way – we saw Sketch, Figma, and Adobe XD rise up and dominate the design tool industry with their unique approaches but that doesn’t mean that there aren’t other great design tools that are coming, going, or staying stagnant. If you’re a UI designer, you can’t go wrong with choosing between Sketch, Figma, or XD (or any of the others mentioned for that matter). All 3 have feature sets that are converging and retain their own strengths. I’d recommend trying a tool you haven’t experienced as a hobby project.
While it might seem that if all the design tools joined forces and created a super-tool, designers would have the “ultimate” tool, I think that it would be far from perfect. The “perfect” tool is defined by the user and there are plenty of resources to help you get started on finding your toolkit:
As a designer, ask yourself and your team what pain points need to be addressed when it comes to picking the right tool. Are you looking for heavy collaboration? Are you looking for easy customization? Are you targeting a UX tool that is a Jack-of-all-trades (UI design, wireframes, prototype, etc.)?
If you haven’t quite figured it out yet, maybe this tweet from Meng To will help:
“My thoughts on design tools and why you should pick them.
Figma: collabroation and all-in-on
Sketch: maturity and plugins
Framer: code and advanced prototyping
Studio: free and animation
XD: speed and adobe platform“Meng To
Further Readings & Resources
- Adobe XD vs Sketch, Invision Studio & Figma (2019’s In-depth Comparison) Which one?
- Design Code Downloads