Sketch vs Figma vs Photoshop vs Adobe XD vs Invision Studio: The Battle of UI dominance (Framer you’re next)
I have some thoughts and those thoughts are written below. You may agree or disagree with them as you will. LET THE JUDGEMENT BEGIN!!!
Sketch: The workhorse
Sketch has become my new workhorse application for UI / UX design. I can craft a page with wireframes, duplicate it and begin building visuals off of it. I can create symbols, detach symbols, modify quickly, and resave that symbol for new states etc. They’ve recently “figmafied” their symbols and I can edit the text within the symbol (though I can’t modify the child element like you can in Figma. +1 for Figma). Its simple to create SVGs, export in multiple sizes, and all sorts of fun and great things. I can add it quickly in my workflow with adobe illustrator and photoshop when I need it and for the most part I only use those programs for more creative or unique additions (icons, unique photo treatment etc). Sketch meets my needs and is quicker at most of the tasks that I use on every project than the competition. Also, its integration with Invision is profound and amazing. This is probably the reason sketch is so good is that it’s open and integrated with other things. However I fear this will be its downfall because its biggest prototyping prodigy…has turned on its master…greetings Invision Studio…
Sketch is the “generally good at most things” program
Sketch isn’t perfect
It does have its downfalls. Its handling of type is clumsy at best. I get very annoyed each time I have to add in glyphs and other items. It also doesn’t do symbols as well as Figma and I imagine that Invision Studio will probably come out and dominate in that field too because I trust Invision (I’m a bit of a fanboy). I would love to see Sketch add in the ablity to modify children symbols and change things like color, rotation, etc. ***edited, please see overrides***
Sketch has mitigated some of its “symbol in-flexibility” with better overrides. In some says these can be more helpful than the parent/child relationshps Invision Studio and Figma have created. By keeping your symbol artboards the same and using appropriate naming conventions, you can create multiple states of a symbol and dropdown select them to replace each other. Very nifty. This ability is compounded greatly when you begin nesting symbols inside of symbols. However, you still can’t modify the child symbol…just replace it.
The Medium is the Message
One warning I have for all the sketch users out there. 9 out of 10 times I can guess what has been made in Sketch. Its abilities and its limitations tend to create a very certain kind of site design. Its a little trendy with flat design and now flat-gradienty™ design (i just trademarked that word yall) and everyone should be conscious of that.
Photoshop: creative playground
When Dann Petty challenged designers to create a logo, site, or app for a fictional space travel company called Spaced I immediately opened up photoshop to create a website that would be more creative than one I could create in Sketch. I do UX/UI everyday. I focus on UX/UI but I didn’t want to worry about it for this challenge (check out the final design here). I didn’t hesitate in the least bit…I went straight to photoshop. Why? Because photoshop has the least amount of built in boundaries. Sure you can look at it as overkill but for creative exploration there’s nothing easier than bringing all my disparate assets, modifying, deleting, morphing, changing, than right in the tool itself. Its beastly and cumbersome, but they‘ve’ made some good, small enhancements little by little.
(Update Feb 16, 2019): I still hold by this but find that as the other programs ramp up their abilities the gap widens more. It is interesting to note that you’ve been able to animate in photoshop for years. I have proof of this in old Invision prototypes. Adobe still provides the best type features.
It’s a Swiss army knife but its liberating
There’s really nothing stopping you from doing something in photoshop which is both the love and rejection of it. “Why should you use a tool that wont create realistic, code worthy designs?” Ok, how about you take your machine brain out of your head for a while and remember…we’re humans and creativity is part of the game. We push ourselves to new heights and possibilities all the time so I don’t care much for the “boundaries” argument. That being said…Sketch is my workhorse so I do appreciate a streamlined experience.
I’m not saying you can’t achieve the same creativity in Sketch, I know that you can but the fact that photoshop has less boundaries built into it means that you’re not naturally held back by the medium.
Thats just one reason I find myself going back to it…That and for my illustrations. It still works well with Invision…double plus.
Figma: Product design
I used Figma when it was free and was constantly sending the dev team bugs and issues we found. It was buggy but it was fantastic and there was a lot of really good things going on in it. I found that it made the most sense for product design. It hadn’t been integrated for Invision at this point and though they were touting their own prototyping ability in the future…it just couldn’t fill my need as I HAD to present prototypes to clients and allow for on page commenting.
Oh the symbols…THE SYMBOLS. Figma you dirty genius you. You figured out how symbols should work. The parent to child relationships…the families just worked. Worked. Worked. The best feature outside of the multi-team design capabililties, cloud based projects, design libraries etc. It just screams product design and product team interactions.
OH THE SYMBOL MUTINY!!
It was a nightmare! Symbols scattered across the…they’re not called artboards….frames? I dont even know what they’re called but symbols had exploded out of a canon and peppered the ground like cayenne in a chili bowl. I mean it was insane. You learn very quickly in Figma to find some method to the symbol madness…and the frames drove me insane. I couldn’t figure out what the benefit to one was and why I would put a frame in a frame. Sometimes it makes sense with the responsive additions to the designs and….yeah. You have to learn a few new concepts but will sombody please figure out how to organize the symbols.
Figma’s big claim to fame is the ability to have multiple people workign in a single document which shouldn’t be understated. This ability works well and I didn’t run into many issues while we were both moving things around, adding symbols etc. It was nice to share design elements, not worry about overlapped savings etc. Very useful for designer to dev handoffs as well.
Built for Systems and Teams
Out of all the programs Figma seems the most team friendly and design library friendly. It has a visual compilation, ability to share quickly and easily. In this way Figma may well take the reigns from the more established UI builders. Only time will tell as they lack in other areas.
***Newly Added Content*** Oct 23, 2018
Adobe XD: Furiously catching up and voice UI?
I have to quickly add in my thoughts on Adobe XD as I have had a small and brief opportunity to use and play with it. Adobe XD is joining the game in the homogeny of UI design tools. Yes they are all starting to look alike as they compete to win your admiration and support. It has most of the tools you need to get the job done and some that the others don’t have yet.
XD joins the ranks of Invision Studio (coming next) and Principle.io in that its offering basic animation. Served up much like Principle does with the “copy the artboard and move/change elments between the two to animate them” it relies on the elements maintaining their layer names and will essentially keyframe out the changes between the two. Its great for micro-interactions. Going too far will cause you lots of headaches so keep it simple. I would also encourage you to try out the prototyping “drag” features for fun.
As expected, one perk for this application is how easy and nice it works with all your other favorite applications from Adobe. Its handshakes with Illustrator with the new update are especially nice. There are also some nice integrations with other apps and third party plugins.
This is something they’ve decided to hedge their bets on. Creating prototyped voice experiences. Could be cool, I haven’t used it much yet but there is definitely some opportunity there. Keep this in mind if you need this feature as there aren’t many other if any other tools adding this at this point.
Symbols and Design Systems
This is where things begin to break down for me. Adobe XDs asset panel just seems clunky and unorganized. I need my type styles somewhere else and easier to use and apply. I need colors somewhere else as well. Keep my symbols, components, etc in one place and easy to get to. Its actually better than Sketches ridiculous dropdown menu but for some reason it doesnt seem as focused and Sketch seems easier to manage if naming conventions are used appropriately. It would need more time to think about how I would set up a system with XD as base that spreads out to everyone. Its possible, I’m not saying its not but I cant see additional limitations without diving in.
The biggest thing Invision has going for it is it’s already industry leading prototyping tool that you can leverage. All they need to do is keep pace with the other tools, take the best of whats currently been built and not screw it up and I see them staying relevant. That being said…we have new social media platform syndrome. Path was one of my favorite social media apps, it had an innovative UI, interesting social additions to the conversation, but it was one of the last players to the party and died. Sure there may have been other issues but their biggest hurdle was convincing people they needed a new social media platform which did the same thing as all the other social platforms. I digress.
All the things you love…from everyone else
Yes, so far Studio has all the things you love about all the other platforms. It has the appropriate understanding of symbols like Figma does. Though its symbols panel has no “visual preview” which seems not very helpful and you can’t group symbols or components in “folder” like structures. Basically what I’m saying is that they are moving very quickly to get you where you want to be building better prototypes with animation and such. Again, keep it simple because trying to go too far will result in lots of headaches. Thats just my personal opinion of course. I wont listen to it either I imagine. They’ve had the opportunity to see how other people are solving problems and so can take the best of what’s around and offer something similar to the competition.
This one is no surprise. If you don’t know what Invision is capable of from a prototyping standpoint then you’re already behind. Its industry leading, its great. Nuff said. They do it best and everyone else is trying to catch up or build support.
All these things are my opinions
By far I’ve spent the most time in Photoshop and Sketch. Figma I used for about 3 months and it has been rapidly changing since I stopped using it. I’m sure that it has improved and probably vastly so. I would keep my eye on it for sure, it has a lot of benefits that the other programs don’t and its collaboration feature is probably a deal breaker for most. I am interested in how they’re going to introduce animation into their tool, if at all. At the end of the day these are just my opinions and some of the things that I’ve experienced. Nothing crazy or new here. Those orders aren’t set in stone either. I am probably due to use Figma again sometime soon to check out all the latest featurs as it was largely in an MVP state. For my current needs though Skethc and photoshop with a combination of illustrator and/or aftereffects seems to be keeping me busy.
Its any person’s game at this point
Its hard for me to say who is doing it all right. If I had to guess who is going to stay relevant looking to the future…
Adobe XD will stay around…Adobe should just purchase Invision honestly…or Figma. That would give them a better innovative viewpoint. Voice UI is interesting and useful but…bread and butter is visual interfaces especially when voice based tools are adding screens…yes….screens. Sooo….
Invision Studio may be too late to the game but their prototyping tools will make them a viable contender. Especially if they keep grabbing from everyone else.
Figma should become the standard product design tool for organizations. It just makes sense to me that a team would use it to maintain a library and work together on things. This may propel it to the forefront as large organizations make the switch.
Photoshop will fade away most likely as a UI tool though it will be used to create things that go in UI tools.
Sketch…boy I just don’t know. They started this whole thing by rethinking the field and have sparked the minds of others who are seeking its demise. They will need to stay on their toes and add relevant features to keep their forerunner dominace. It’ll be all about continuing value. They’ve been doing pretty good so far but some of the core principles may not scale well from here. Thats where Figma is excelling and Studio followed many of their thinking paths.
I hope I’m right! Give me all your thoughts below! Tell me I’m wrong, tell me I’m right. Curse me, praise me. Lets just keep it above the belt and all in good fun :)