It’s been an interesting time for UX/UI designers. Over the last few years, there’s been some great design tools emerge to help interface designers work more efficiently and with higher fidelity.
When Sketch was released, Bohemian introduced us to a very light-weight and fast way of getting our ideas to design and their progress on new innovative features hasn’t slowed down. This has cause a massive share of Interface designers to jump ship from Adobe Photoshop or Fireworks to Sketch.
Because Sketch was still very new and really, the only true competitive player in interface design, the market was still wide open for competitors. We now find Adobe and Figma entering the market with their own unique approach to design. Each of these design tools has a feature set that makes them stand out on their own but the big question everyone asks when considering UX design or making the switch from one to another is: Which tool is the most efficient for my workflow?
This is a comprehensive review of each design feature and how/if each program solves it. So, let’s get started!
• • •
Organizing Pages and Layers
Sketch – With Sketch you can organize elements by Layers and Pages. When working with hundreds of artboards, it’s handy to store 5–10 relevant artboards in a page and tuck it away while I focus on another area of design. It also reduces the amount of layers you’re working with at one time making the organization feel a lot cleaner and more approachable.
Also, grouping artboards into pages seems to help the entire document be much faster/smoother than trying to scroll/pan and edit hundreds of artboards on one page.
Figma – Figma only has Layers which is grouped by “Frames” (artboards), nested groups, and elements. Figma seems to run faster/smoother than sketch during the design process so loading hundreds of artboards in one canvas isn’t as big of a worry.
Adobe XD – Although Sketch is the only app with Pages, Adobe has a unique approach to the layers panel. It has the same Artboard / groups / elements hierarchy as Sketch and Figma but it tries to be smart in what layers it shows you as you are working.
When you click on artboard one, the layers on other artboards are hidden and it shows you elements at the group level, by drilling down through an element, more layers present themselves.
You still have the ability to manually expand or compress layer groups as you’re working on them to eliminate the cumbersome task of of drilling through groups. I think they’ve introduced a great balance here and hope figma and sketch will adopt a similar feature.
Winner — Sketch
Due to Sketch’s added “Pages” panel, I find navigating and editing layers to be much more intuitive and cleaner although, I’m kind of liking where XD is going with their “smart” layers.
• • •
Smart Guides and Snapping
Sketch – For everything else sketch has going with it, I’m still frustrated by the fact that they haven’t taken the time to fix their Smart Guides. Most times, I’ll find the element I’m dragging wants to snap to something off the page before those elements that are closest to it and snapping seems to misalign making me have to resort to nudging element positions with the arrow keys.
Sketch also has an interesting quirk with sub-pixels. While dragging objects around, I often find sketch wanting to place my objects on sub-pixels which ads another step for me going into the menu and selecting Round to nearest pixel.
Figma – Figma snaps as you’d expect. Snap to edges, center, snap to even distributions, etc. Features are same as sketch. The difference is it just works.
Adobe XD – Very similar behavior as Figma and just as dependable. The only other added feature I love with XD is how the guide shows you a different indicator for snapping to an even distribution. Very easy to see how snapping is working.
Winner – Adobe XD
This is really more of a tie between Figma and XD, the only cherry on top is that I get a purple spacing highlight when my object matches the same spacing as other elements in Adobe XD.
• • •
Sketch – Has built-in responsive design functionality which means you can constrain an object to pin to an edge or corner of the parent group and you can also constrain objects and symbols to a static width or pin the width to stretch with parent objects or groups. About the only thing missing here is constraining objects to page grids, or, constraining objects to fixed margins.
Figma – has incredibly powerful constraint tools for responsive design. Best I’ve seen. The one feature that makes this stand out above Sketch, is the ability to constrain components to frame columns and rows. As you can see in this Gif, stretching the artboard will stretch the elements but the margins between each element will always stay at 20px and that’s because I set the page columns with a 20px margin. As hard as I tried, I could not reproduce this same beauty in sketch.
Adobe XD – No.
Winner – Figma
Because of the ability to create multiple layout grids in your frames (artboards) and the ability to constrain the layout of your layers and components directly in that grid space, you can accomplish responsive behaviors that are just not possible, yet, in Sketch.
• • •
Sketch – Sketch doesn’t have prototyping built in, but because of plugin support, it feels like a built in feature! Before the Craft Prototyping plugin came along, my process for prototyping with Sketch and Invision was:
Export the artboards to images in dropbox
Connect dropbox to invision
Log into invision to link up the prototype.
It was a cumbersome process every time your design was updated. Now with Craft plugin, I can link the prototype directly in Sketch, click the Sync button and when I go to Invision, it just all works.
The biggest benefit to prototyping with InVision is the major simplicity and power. For example, creating sticky headers and footers, creating hot-spot templates so you don’t have to link up a nav bar 100 times, linking to image overlays, etc.
For what InVision does, there’s nothing else out there that can quite compete and Sketch has the most seamless integration of all design tools.
Figma – Figma is a powerful design tool but it is still missing much desired features for prototyping. Just last month, they announced built-in prototyping but it comes with the bare basics. You can link elements and components to artboards and preview the prototype. There are no overlay features, sticky header footers, or animations. It’s just a start but I anticipate great things in the future.
Figma also has an integration with Framer (a code based prototyping tool) and importing is easy, it is not as popular or simple to use as Invision because it’s code based and a much steeper learning curve.
Framer’s main strength is in prototyping animations to show how a page animation flows and elements animate when you tap or swipe something. It wouldn’t really be a good choice for linking up dozens of artboards to simply show a complete navigation flow.
Adobe XD – Adobe got the entire design community excited when it was announced and it’s for one big reason. It was the only true competitor at that time that had design and prototyping built into one software out of the box.
Right within Adobe XD, you can design a few artboards, switch to prototype mode, link them up, and navigate the design in real time using your phone or the built in viewer. There are also basic animation and easing effects giving the prototype a more realistic feel.
Winner — Sketch
Some might ask, “Why didn’t Adobe XD win if they have the best built-in prototyping?” Well, remember we’re judging these features based off productivity. Yes, you can design and prototype directly in XD but with some key missing features like linking overlays, hotspot templates, and sticky footers, headers, that means I have to spend more time duplicating artboards to get the same results which ultimately would take much more time in the process.
I would not be able to get away with the limited Adobe XD prototyping features but for more simple apps, if the features work, the implementation is lightning fast and just a little faster than Sketch + Invision.
• • •
Winner – Figma
Figma is the only true competitor here. Think google docs for Design. In real time, I can see my designers changes. Imagine, as I’m dragging a component from one artboard to another, before I let go of the mouse, my colleague is changing the style of a nested component and I’m seeing that change!
• • •
Sketch – In sketch, there’s no built in ability for commenting. In my workflow, I have to rely on Invision’s commenting features online for clients and colleagues or Craft’s “freehand” plugin to share pages that can enable commenting. Comments in each solution are stored somewhere different than sketch.
Figma – Commenting is built in and just as nice as design collaborating. Comment anywhere on the screen and mention teammates. If they’re offline, they will receive an email with a link to the comment. If they’re in Figma, they will see the comment live.
Imagine designing a few artboards for a presentation. The product owner is presenting the design and during the presentation, he adds a comment. Back in my office, while I have the design open, I will see his comment immediately and I can make that change within seconds which will change live during the presentation and REALLY impress the stakeholders… Yes, this has happened before and my ego got a boost!
Adobe XD – XD has a commenting feature, but it’s not really built-in commenting and can only be done once you share your project online through Adobe Creative Cloud services.
I also found the commenting feature to not be as intuitive. It took me a while to discover that you can actually pin a comment to the artboard. This is because you have to type the comment first on the side and then click on the pin to artboard link.
Winner – Figma
Because you can comment directly in-app with the fewest steps possible and whoever you mention get’s an email, the process is seamless and super effective!
• • •
Text style options
Sketch – Sketch has the basic features you’d expect when styling text. Underlines, strikethrough, list type, text transformation, and a toggle between fixed and auto width.
Some text features that would be nice is subscript and superscript options, and the option to toggle between top, middle, or bottom of a text box area.
Another bonus feature in sketch is the Text Styles box where you can save and apply text styles to multiple text elements. This makes it super useful when changing the color or size of a header that lives on a hundred pages. Just a few clicks and the style is applied everywhere!
Figma – I absolutely ❤ all the options I have for text styles in Figma! They’ve thought of quite a bit here and I believe they’ll have more in the future. About the only thing I found lacking, that sketch has is list types or the ability to generate numbered or bulleted lists.
Adobe XD – Very very VERY basic text styling in XD. There are simple character and line spacing options but no ability for bullets, numbers, all caps, no caps.
One missing feature that frustrates me is the lack of an option to toggle between fixed width text and auto-width text. When you click on the text tool and click inside an artboard to type text, it automatically assumes you want the width to increase as you type. When you click and drag a text area, this is a fixed width text box. They’re both handy in their own ways but if you later decide you want a fixed width text box to be auto-width, you have to copy and paste that text into an auto-width box. Very annoying.
Winner — Figma
Because of all the advanced type features in figma, I’ve found I was able to control my styling more than with Sketch and FAR more than the basic features found in Adobe XD.
About the only thing that made this decision tough was Sketch’s save and apply text styles feature. While Figma doesn’t exactly have this, the way they handle components and nested components is very similar and could be just as nice of a solution if you use it right.
• • •
Sketch – Repeat grid doesn’t come built in with sketch but with the Craft plugin, it behaves as if it were. Simply select an element, click on the duplicate icon and you have all the controls to create a vertical grid, horizontal grid, or both. The bonus feature here is that you can use craft to auto generate content like images, and relevant text from sources like unsplash, google, the web, locally, etc. And after you populate the first element, when you use the duplicate tool, craft will go back and pull additional media from the same source you chose to populate any additional element. HUGE timesaver!
Adobe XD – Repeat Grid works great with Adobe XD. Everything is real time, in place, and buttery smooth. You can easily change grid element layout and it will change live on the rest. Changing the padding couldn’t be easier and funner, too. Although, there’s no way to pull content from the web like with craft and Sketch, you can drag and drop local files to populate elements in the grid after you’ve created the repeat grid.
Figma – No
Winner — Sketch
Although creating and editing spacing in Adobe XD is more smooth and faster, where it stops short is auto populating images, text, and lack of symbol overrides. Because 99% of the time you use a feature like this, it will likely have unique content and graphics, Sketch comes out on top when you use Craft’s Content Generator. You can already have one symbol set up with an image and text populated from craft and the second you duplicate the content into a grid, you can see unique content in each symbol much like you’d expect in the working product.
• • •
Styling Objects and Layers
Sketch – With any object you can add a fill, border, shadow, inner shadow, gaussian blur, motion blur, zoom blur, and background blur. But that’s not all. Imagine having all these effects and being able to layer multiple borders or fills for some amazing compounded effects!
Adding multiple styles to one layer means you don’t have to manage as many layers. The GIF below shows me accomplishing the same styling in each program, yet I could accomplish everything in sketch using 3 layers as opposed to 4 with Figma and 8 with Adobe XD.
Sketch also has a unique Shared Styles panel that lets you save custom styles and reuse on other objects in the project.
Figma – Although Figma comes built in with compound styling and effects similar to Sketch, I found them to be more limited than Sketch. For example, I can add multiple strokes to one object but I don’t have individual control over each stroke weight and alignment, which means to add 2 strokes with different sizes and alignments, I had to duplicate the object. Which caused me to have to add one more layer than Sketch for the design below.
Adobe XD – adobe comes with the basics like fill, border, shadow, background blur, and object blur. There is no option for inner shadows or even aligning your borders outside, center, or inside. There is also no option for adding multiple styles on top of each other as with Figma and Sketch. I found this very limiting when trying to accomplish the artboard below and resulted in me using at least twice as many layers as the other 2 programs.
Winner – Sketch
Because Sketch has the most control over object styles, adding multiple styles over each other, and the ability to save and reuse shared styles, your options are almost endless.
• • •
Icon Creation and the Boolean Tool
Sketch – Has quite a few bugs when it comes to creating icons. For example, using the Boolean tools to combine and subtract some shapes works okay for basic merging of 2 or 3 shapes but if you start to combine 4 or more layers deep, the boolean effects start to break and produce unexpected results (as you can see in the GIF below). Because of this, there are times I have to open Adobe illustrator to edit and paste back into sketch. I don’t find this to get in the way of my workflow too much because most of my icons come from my all time favorite icons8 app.
Figma – Has some pretty impressive and the most unique features for icon creation. While you can combine, divide, exclude, or subtract shapes as you can with the others (and is very stable at that), they have pioneered a new smart shape creator. So even with separate shapes being drawn with the pen tool, if the ends of a line connect with any line edges, Figma treats this as the same shape which makes shape shifting much easier and faster. You can see an example of this in the GIF where I design the folded corner of a paper and can quickly adjust the size and position without that fold disconnecting.
Adobe XD – Seems to be very stable and fast when creating icons, which isn’t surprising as their experience with the leading vector design software, AI has given them the vector know how.
Winner – Figma
While all programs have non-destructive icon creation (meaning you can combine shapes and edit the shapes and sizes after the fact), Figma stands out above the rest due to the ability to connect lines of separate vectors to make it behave as one shape.
• • •
Masking with shape
Sketch – The mask button in sketch is very powerful and behaves almost without limits. You can mask a vector inside another vector, or an image inside a vector. The layer that is set to mask still retains it’s visual properties meaning if you mask a blue image over a red circle and you change the transparency of that image to 50%, your image will be purple as it will show some of the red circle underneath. Also, a unique feature I found is the way the mask still works with strokes and styling options.
Figma – Behaves almost the same as sketch but as soon as an object is used as a mask, the visual elements of that mask disappears. The underlying object is turned exclusively into a mask meaning you can’t see the color or opacity of that object any more. This isn’t a deal breaker in most cases but it would make reduce the amount of layers used for some effects.
One annoying thing I’ve found with Figma’s masking, is the unpredictable way it handles strokes. I tried applying a stroke to the grouped shape, the shape that made the mask, and the image that was being masked. In all cases, I couldn’t get the green stroke to wrap around the custom organic shape I created. To accomplish this, I had to duplicate the masking layer as a simple shape layer, disable the fill and turn on stroke.
Adobe XD – Although you can crop an image and apply rounded rectangles to an image and move the image around the crop boundaries, it’s not the same as masking. You cannot apply an image mask to a custom shape or edit the shape that’s cropping the image.
In order to get the same effect I accomplished in Figma and Sketch, I would have to exit adobe XD, apply the effect in adobe photoshop or illustrator and then paste that custom PNG image back into adobe XD.
Winner – Sketch
With Sketch I’m able to use a shape as a mask and still retain styles for that shape. Creating styles on the new masked image is a breeze, too. I can add borders, inner shadows, fills, etc to a masked group reducing the amount of layers I need to work with and speeding up my design flow.
• • •
Symbols & Components
There is a different name and behavior for this feature depending on which app you’re using, but they’re meant to accomplish something similar: Reusing elements in your design while still allowing you the freedom to make tweaks without having to manually updating the same style on similar elements.
Figma –Components in Figma is the best I’ve seen. One of the most exciting features I love is the color, text and opacity overrides. Instead of having to create a new components for each state of an icon, you can do it all with one component and tweak the master component whenever you want to update all the instances.
Sketch – When sketch pioneered the symbol, it was a huge time saver, but the lack of style overrides has always made symbols libraries quite messy. Compare this GIF of Eleven symbols compared to the One I can get away with using Figma (see GIF above).
Adobe XD – Symbols only have the bare bones features that allow it to actually be called a symbol. Every symbol shares same properties. No overrides. You make a change to one anywhere and they’re all going to adopt those changes unless you break the link to that symbol.
Winner — Figma!
I wish, wish, WISH Sketch and Adobe adopts the features found in Figma’s components. One of the most difficult things to organize in my design flow is symbols and Figma has engeniously solved this problem.
• • •
Exporting to Code
Sketch – Right-click on any element and you can copy CSS or SVG attributes. Although Sketch doesn’t come with any more robust code gathering than that, there is a plugin, Launchpad, that enables you to quickly publish websites based off sketch designs. This is great if you want to publish simple pages and aren’t worried about code structure and functionality.
Figma – Figma introduced a new Code tab about a month ago that shows you CSS, iOS, or Android attributes. You can also right-click on any element and copy the same CSS or SVG code as you can in Sketch.
Winner – Figma
Sketch and Figma basically have the same code exporting features, and that’s copying styling code. What makes Figma come ahead is the ability to hand off your design to developers within the app without forking over more money for an additional licenses just so your developers can view the code.
While you can accomplish something similar by using Invision Inspect with Sketch, it’s more clicks to accomplish the same thing.
• • •
Sketch – Plugins are a great way to increase your productivity with unique features you can add to your workflow. There are hundreds of examples of plugins you can install, I’ll just stick with the one I cannot live without. Craft — by invision. Craft dramatically expands on Sketch’s abilities by integrating solutions like, auto generating content, duplicating rows or columns, creating a freehand session to share with others outside of Sketch, prototyping in-app and much more.
Although Sketch doesn’t come with built in prototyping out of the box, with the craft plugin, it’s almost as seamless as if it were. Simply update your designs, switch to prototype mode, and start dragging buttons to the pages you want them to go. With this plugin alone, prototyping works very much like Adobe XD.
Figma – No support for plugins. What you get out of the box is what you have to work with. Which is very impressive on it’s own, even without plugin support.
Adobe XD – No support for plugins and a very basic built-in feature set.
Winner – Sketch
Because of plugin support, people don’t have to wait for sketch to introduce most features they want. They can incorporate it into the program on their own.
Sidenote: There is discussion in the Sketch community about the fear that sketch might be relying too heavily on plugins for basic feature add-ons and then there’s the fear of plugin support breaking as Sketch updates so this could be a good or bad thing, depending on what plugins you’re relying on.
• • •
Sketch – Sketch is a Mac only product, leaving the only options for windows users to go with Figma or Adobe XD.
Figma – Because Figma can work inside a browser, it is compatible with almost any device. The biggest con with having a browser based app is no support for offline editing. You will always need an internet connection to use it.
Adobe XD – Adobe XD started out as a Mac First application during preview but has quickly released a windows version. They’ve been working steadily to introduce the same features for windows as they have on the mac.
Winner – Figma
While Figma has their own standalone app you can download, you can also design in a browser making the app accessible on almost any device out there. If you have a team set on their preferred windows, Linux, or Mac machines; There’s no need to try to convert them 🙂
• • •
Overall Winner is Sketch
Mainly because of my percentage of time spent in prototyping and the amount of time Sketch and Invision saves me, the winner for me is still Sketch.
In my design process, I work back and forth between prototyping and designing quite frequently. As soon as a few artboards are wireframed, they are immediately connected with Craft prototyping and synced to invision. I’ve become very reliant on the feature set in Invision for linking up navigation in almost no time at all.
This doesn’t mean sketch is going to be the true winner for everyone. If you have a team with 3+ designers collaborating on one project, or if you work primarily with design and your prototyping needs are basic; that might be enough to turn the tables on what program works for you.
After working on my first project using Figma, I found myself almost in tears loving the components, responsive design features, and collaboration features, and knowing how limiting it still is without a true rapid prototyping solution.
In the middle of working on this article, Figma released their introduction to prototyping and given the rate Figma is going on releases, it’s likely that before this article reaches 2 or 3 months old, their prototyping featuresmay be enough to be the true winner for me as well.