Continuing our Senior UX Designer’s investigation of leading UI design tools: Adobe XD vs Figma vs Sketch
We recently delved into Sketch, one of the most utilized tools for UI/UX design, by creating a sample app to illustrate how it compares to other platforms. Today, I’m looking at Figma and Adobe XD as we continue debating the pros and cons of these leading design apps.
Figma UI Design Process
The Logo
Since I do not want to spend time and find the same icon by searching the Noun project app, I decide to copy and paste my already found symbol from Sketch to Figma. Not so fast, cowboy! The result is disappointing — Figma converts the logo to a raster format. Not good. Let me try and paste the logo from Sketch into Illustrator, then paste it into Figma.
The result is more than disappointing. I just get a collection of light orange rectangles that are unusable as a logo. I open Affinity Designer, my goto vector pasting helper (from various vector formats into Sketch and back) but when I paste from Affinity Designer into Figma, I get, again, a bitmap instead of the vector version of it. I’m wasting way too much time on this task – I’m exporting the logo as SVG, and then I import it into Figma as a file. Finally, I get the full logo into Figma.
I’m now trying to replicate the logo background image. Figma has support for multiple backgrounds, so that’s awesome.
The logo background
With Figma, whenever you paste an image, it automatically creates a layer and it assigns the pasted image as a fill image to that particular layer. I find this very helpful, and Figma gets a point from me for this. It saves quite a few steps in creating background images. Combined with multiple fills, this is a powerful way to handle images in my design file. I think this works better than in Sketch. Great job Figma team!
I’m now moving on to the Attraction Cards where I need to recreate the star rating, background layer, and the text layers.
I was able to replicate the Featured Attractions layout in Figma, but it was much slower than working with Sketch. While Figma has support for symbols (components), they are not multi-level components. In Sketch, I can embed as many symbols as I want in another symbol, being able to swap them with other symbols as needed. Working with images is a lot slower too. While in Sketch, I can select an image in my document, and paste it to override an existing image or image fill for a symbol. With Figma, this is not possible. This workflow only works in Figma with external files — click on a component, select the layer from the layer list in the component that I want to replace the image for, then select a new image from my file system. I get the same result, but it just takes longer.
On the positive side, I like how components are treated more like groups that can be edited in line. I like how components are highlighted in the layers panel, while still retaining the ability to easily select any layer of your component. I can also override the text layer content in component instances. I simply select the layer, add my new text, and I’m done.
I’ve quickly moved on to the Explore by Region section, and I must admit, having the symbols (components) exposed and having access to the layers inside them, is remarkably handy. It took about 2 minutes to update this part of the app. I also like that Figma is quite fast and there’s no lag when working with the app.
I have now finished with most of the home screen. I was looking for a Figma template for tabbed navigation, but I could not find any. I’ll start from scratch and see what happens.
I’m trying again to paste from Illustrator, Affinity Designer or Sketch, but it seems Figma does not like pasting vector objects. While this is not a show stopper, it is slowing down my progress quite a bit.
Here is my completed first screen. The result is the same as in Sketch: 100% match.
Figma Conclusion
Figma came a long way since the last time I’ve checked the app. It’s now more mature and stable and considerably feature-rich. When I initially started my experiment, I shared with one of my colleagues that I am glad I don’t have to work with Figma on a daily basis. However, now, after taking the time to get around the interface and learn how things work in Figma, I must say, I would not mind spending some more time with the app.
Pros
Performance: Figma is fast and it backs up to the cloud all the time.
Components: Figma’s version of the symbols, while not as powerful as Sketch symbols, are nicely displayed in the layer list, and they are easy to manipulate.
Working with images: Pasting images creates a layer with the image set as a background image, giving you the advantage of being able to perform layer tasks (radius, multiple backgrounds, etc.) while retaining basic image editing options (contrast, transparency, saturation, etc.)
Prototyping: Figma has basic prototyping tools built into the app. While I did not try this feature, It’s somehow similar to how Sketch integrates with the Craft plugin from Invision.
Collaboration: Having files synced online all the time improves the ability to collaborate with others. It’s great for visual feedback and notes. While Figma does support real-time collaboration, the feature mostly gets in the way when working on a design.
Powerful but limited vector tools: Compared to Sketch and Adobe XD, Figma has some pretty powerful vector editing tools and handy shortcuts. However, for UI, I don’t find it necessarily useful since I always rely on a 3rd party app (Illustrator or Affinity Designer) for serious vector work, where I can be more efficient creating icons and illustrations.
Cons
Components: While they are nicely displayed in the layers list, they are not too powerful and not very intuitive to work with.
Pasting from other vector applications seems quite limited, and this sort of breaks the creative process.
Lack of plugins: When using Figma, you are locked into using the default tools the app currently has.
Odd interface that gets in the way, sometimes. The app feels more like a web app than a real standalone app.
Lack of predefined libraries for iOS, Android, etc. While not a deal breaker, it takes longer to start a project in Figma than in Sketch.
Collaboration: Figma is the only app that has real-time collaboration as of now. The idea has merits, but based on my tests so far, it’s almost useless in a real-life scenario.
Adobe XD UI Design Process
The Logo
As with Sketch and Figma, I’ve started working on the logo area first. I have high expectations, at least for the vector pasting. As I’ve expected, the vectors paste flawlessly into XD. Great! Finally! But… once converted into a symbol, I cannot resize the logo. Not only that, once you convert something into a symbol, that’s pretty much it. You can reuse it anywhere in the app, sync your changes, etc., but you cannot override the symbol in any way.
Besides that, it seems Adobe XD does not support multiple backgrounds. This means trying to recreate the look of my image-based backgrounds will require a LOT of layers!
Great success! I’ve managed to recreate the logo part, but it was quite tedious — I find that the way layers work (they get hidden every time I click outside the artboard) and their size in the layer list, lowers my efficiency with the app. Also, not having multiple background support means a LOT of layers to achieve the same result. Drop shadows don’t apply to groups — one can only add a drop shadow to an object — this, again, wastes too much time.
Attraction Cards
I’m starting to work on the attraction cards, but I get a nasty surprise. The only way to set an image as the background of a layer is to drag the image, from Finder, into that particular layer. There’s no copy and pasting nor selecting the layer and browsing for an image or a replacement image. I have recreated part of the cards, and now I find it extremely tedious to replace my images, buried under two other layers. So far, the way Adobe XD works with images is the worst from the three apps. I ended up hiding my top layers, dragging and dropping my image into the correct layer, then making the hidden layers visible again. I’ve had to repeat this process for each card in my design. Not cool.
One nice feature though is the repeat grid option. I selected my group containing the background images, transparent black layers, stars & texts and quickly created a horizontal grid with them. It takes very little time to do it, and it is very accurate. However, good luck replacing the buried images under all those layers.
The Result
I have finally managed to finish the first screen with Adobe XD. However, I cheated when I got to the last two sections (Explore by Region and Hot Topics). I have just pasted from Sketch the final result, and surprisingly, it pasted perfectly. I have to say though, compared to either Figma or Sketch, Adobe XD painfully lacks essential features, thus making my workflow notably slow.
Adobe XD Conclusion
I was hoping for Adobe XD to change my mind about Adobe’s ability to deliver something ground-breaking. Apart from the repeat grid feature, which is very good, I feel like the app lacks some basic functionality (having layers visible all the time, no multiple backgrounds, etc.) but it is very fast, getting the “fastest app” award from me in this comparison.
Pros
Integration with the rest of the Adobe products: While I did not test it, this could be a nice feature for people using Photoshop & Illustrator.
Speed: The app is blazing fast. It almost makes up for the lack of features.
Repeat grid: A very helpful native feature to create grids.
Prototyping: Adobe XD comes with basic tools included – similar to Figma, Invision, Marvel, etc. Nothing groundbreaking here, but it is certainly helpful to stay in the app and quickly come up with a prototype based on your screens.
Cons
It still feels like an alpha version. While Adobe is selling access to the app, I don’t think the app is on the same level with Sketch or Figma. It has great potential, but it’s not there yet.
Buggy measuring tools: It happened to me for quite a few times — layers within a group would not show measurements when clicking the ALT key— it would show values in a few other places, but not on all the sides of the object, rendering the feature almost useless.
Buggy overall: The app crashed on me a few times when I was trying to paste some vector objects.
Symbols, in the current form, are pretty useless.
Lack of plugins: As with Figma, the default app features are quite limited and there is no way for anybody to extend it.
Adobe XD vs Figma vs Sketch Comparison Conclusion
While this was not an exhaustive exploration of Figma or Adobe XD, it helped me get a feel of what’s new in the UI/UX design application landscape. My tests reaffirmed that Sketch is, for now, the best choice for a UX/UI designer. But it also confirmed that competition is very good for the end users. I am eagerly watching both Figma and Adobe XD for updates and app improvements.
