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

There is no shortage when it comes to tools for UI/UX designers and web developers to use to create wireframes, mocks, or prototypes. Among the top tools sit three platforms that stand out compared to the rest.

Each application has its own set of pros, cons, functionality, and UI. Our in-house designers have dabbled in all three programs. In this blog we’ll dive into the specifics of each, what you can expect, our take, and why we use Figma over the rest.

What is Figma?

Figma is an interactive UI design tool. Debuted in 2016, it’s one of the newer tools in the UI/UX space. Design and Development are constantly evolving fields. With such a dynamic field, your tool needs to be equally adept and flexible. Since Figma is a relatively newer application, the features, capabilities, and technology powering Figma are more advanced.

We use Figma for a variety of reasons. You can import Sketch files and your layers and groups will stay consistent across platforms.

The vast plugin library. There are a ton of valuable plugins in Figma, anything from Lorem Ipsum to Content Reels, Accessibility, and background removal.

Unique and beneficial widgets. Widgets integrate with anything from GitHub and Asana to tablets, timelines, sticky notes, Giphy stickers, and voting.

Flows are simply shareable. Share your designs and flows with anyone. No Figma account required. Designs update in real time for those viewing the design. When working side by side with a client, it makes communication regarding designs and updates efficient.

Those are only a few of the many reasons we picked Figma for interactive and collaborative designing. Their feature list goes on, many of the features on this list will overlap with other design apps.

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
• plugins for Figma

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.

What is Adobe XD?

Adobe XD is the prototyping and mockup design tool under the Adobe umbrella. Much like Adobe Illustrator, XD deals is vector-based graphics and user experience design for websites, mobile apps, and more.

We’ve used Adobe XD on a few client projects from a few years ago, and for our recent website redesign. Adobe XD integrates directly with the rest of the Adobe suite for full support. Our branding and various other design elements carried over easily, and we were able to create several sharable flows of the same design to ease the development cycle. By creating multiple shareable links with different first page display, our team was able to focus on one section at a time.

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).

Sketch

Sketch is very similar to the previously mentioned design and prototype software applications; however, Sketch is only available on Apple devices. Our team has limited experience with Sketch, as it is only compatible with MacOS. Sketch is the oldest out of the three programs, with an initial release in 2010. Sketch prides itself on it’s comprehensive design functionality. The list of companies who use Sketch is very notable; companies from Meta (Facebook), to Google, to Xbox. So, they must be doing something right. Let’s dive into the available features and the various pros and cons of the Sketch design application.

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.

Our Experience

Our team of designers have experience with each software platform. While we use Adobe XD for our internal projects, we do recommend Figma. Figma allows for the greatest functionality at a reasonable price, is cross-platform compatible and allows for non-user viewers and live editing.

For more information on how we use UI/UX to create unique user interfaces and flexible user experience check out our portfolio page and learn about our various client projects.

Be sure to tweet us your thoughts @Nexrage 👋

‍