UI/UX Design Tools: Figma, Adobe XD, Sketch

Features

With Figma being the newest of the bunch, you can expect many of your favorite design features consolidated with increased efficiency. Figma was also designed for both a software application and a web-based application. You can create or edit your designs on the web rather than downloading a program to your physical device, making your work infinitely more flexible.

One of the biggest features is real-time collaboration. Team up with your fellow designers to allow multiple pages or screens are designed in tandem, speeding up design efficiency. This feature doesn’t have to be solely used for designing. Many users take advantage of the collaboration capabilities and apply Figma as more of a whiteboard. Being able to add ideas and work through problems together online. Users can click their team member’s avatars in the top right-hand corner to view where and what they are working on.

Prototyping is an important feature of UI/UX design. Allowing customers or clients to see and interact with a mock can be game changing. When clients can see how their website, software, or mobile app is going to function and how different buttons, screens, or modules interact with each other you have a much higher customer satisfaction rate. From hover effects to page transitions, to scrolling effects, Figma has a wide range of options for their prototyping tool.

Download the Figma companion app to view your design on a mobile application. Adobe XD and Figma allows this feature, their app is available on Android, iOS, and iPadOS.

Use real data to populate content in components with the help of plugins. Google Sheets Sync integrates with Figma allowing designers to use real data to test layout and responsiveness.

Pros and Cons

To determine which tool will work best for your business and needs, we created a pros and cons list for each of the three applications discussed here. We typically use Figma for our client mocks and user flows. It’s easy to use, the sharing feature is more flexible than other programs, and we can monitor and view where the client is on the artboard.

Pros

• Ease of use and beginner friendly

• Highly shareable, no account necessary to view a design

• Save files locally or in the cloud

• Free plan

• Vast libraries of functional plugins

• Additional functionality with widgets

• Import Sketch files with relative ease

• Collaborative designing

• Vector based

• Easy hand-off to developers with CSS available

• Have multiple files open at once

• Web based browser application (available to any computer with a web browser)

• Windows and Mac desktop apps

• Mobile companion app for responsiveness testing

Cons

• Limited capabilities with the free plan

• If you save a file locally, you must open it with the desktop app rather than the web browser app

• No Adobe XD file import support

• No direct integration with image or vector editor

• If you do not have internet access, you cannot use Figma

• You may have to clear your cache to see teammates design changes

Pricing

Figma offers four pricing options. The starter option is free forever, however only allows 3 Figma files to be saved, unlimited personal files, plugin capabilities, and access to the mobile app for viewing. The professional plan upgrades storage to unlimited, giving you free rein over the number of Figma files, as well as adds version history and team libraries. The organization option adds a multitude of collaborative tools and features ensuring an efficient workflow between team members. The enterprise plan includes everything across the various plans as well as hands-on trainings, additional security and administration settings.

Features

Easily duplicate common elements across your interface with components. Change the color, prototype function, or alignment of the main component and the change will be automatically implemented across the various instances. Each component can also have multiple states, whether you’re creating a button that will change color on hover, or a cycling carousel that will adjust the highlighted image on a tap, control how the user will interact with your module.

Resizing dynamic content has never been easier with content aware padding. If enabled, space between your content and the outrebounds or background will remain consistent. Creating grid content in your design is also very easy in XD. Create the card you’d like repeated and simply click “Repeat Grid”, drag the outer boundary and drag it to your desired length.

Use scroll groups to create interactive sections on your website. Anything from maps, graphs, product listings, photos and more. Anchor links give an additional form of scrolling or navigation to your mock. Navigate to any section of element on your design by selecting a trigger and action from the prototyping tool.

One of our favorite tools of Adobe XD is the real time preview. Test your design across devices with and see edits in real time. Use the mobile apps to test the responsiveness of your design.

When designing an application, it is best to create designs with accessibility and new technologies in mind. One of the new advances in accessibility and search engines are voice recognition and assistants. Whether it be Google, Siri, or Alexa. Adobe XD integrates with Amazon Alexa and Google Assistant to allow testing and design of virtual assistants or apps which complement such services.

Pros and Cons

Pros

• Vector based

• Have multiple files open at once

• Easy hand-off to developers with CSS available

• Free 7-day trial

• If you have the Creative Cloud suite, XD directly integrates with Photoshop

• If you have the Creative Cloud suite, you can save files to the cloud and work on the from any device

• Beginner Friendly

• Tons of tutorials and resources online

• Auto animate features

• Adobe libraries support

• Available on Mac, Windows, Android, and iOS

• Mobile companion app for responsiveness testing

• Collaborate simultaneously on cloud documents

• Intuitive grid and group styling features

Cons

• Pricey, no free plan

• You must update the shared link every time you edit something

• Components are a tad bit tricky to work with compared to other programs

• Teammates can only collaborate simultaneously on cloud documents

• Limited plugins, no integrations with business apps (Asana, Github, Giphy)

• Limited Typography features

• No web application

Pricing

Adobe XD offers a free 7-day trial, once the trial ends you will be charged $9.99/month for the single app (Adobe XD), or $54.99/month (per license) for the creative cloud (Creative Cloud license is currently on sale for $39.99/month).

Features

As with Figma, online collaborative editing is available. Work with team members to bring concepts to life with design centric tools. Although the design functions of Sketch are only accessible on Mac, PC users may view, download assets and make comments via the web application.

Create complex and large flows with an infinite canvas. No need to break your project down into multiple files. Keep your screens organized and design how you want. Utilize components to scale and build your project out, reuse designs and update all instances simultaneously. Sketch offers Smart Layout, similar to the Repeat Grid function on Adobe XD.

Use the math operators to quickly scale your objects or layers. Sketch was created with designers in mind, many of their features were outlined by designers for designers.

Typography is an issue with Adobe XD, Sketch blows the competition out of the water. With OpenType fonts and infinite control over typography, unlock alternate characters and ligatures.

While Sketch has been around the longest, both Figma and Adobe XD have a longer list of design features. There are no templates, animation controls, publishing options, or prototyping available.

Pros and Cons

Pros

• Universal libraries for colors, styles, and components

• Easy Export for development teams

• Vast library of plugins

• Auto-save function

• Integration with external applications

• Intuitive grid and group styling features

• Optimized for screen designs

• Cloud based storage

• Generate multiple exports with one click

• Affordable licenses for teams

• Free 30-day trial

Cons

• No PC support, if you have a cross-platform team this would not be ideal

• No support for animation assets

• Does not import vector assets from Adobe products intuitively

• Limited functionality without plugins

• Software slows with complex and multiple artboards

• No design web application

• Struggles with complex SVGs

• Smaller community online

• No free version

• No companion mobile app

Pricing

Sketch starts at $9 per editor monthly or $99 per editor annually. Organizations get customized pricing, however, at least 25 editors are required.