Three reasons why my (Windows+Adobe) team moved from Adobe to Sketch
We’re a 8 people UX team, and we’re all using Windows (working at Raona, a Microsoft Gold Partner company :) ). We’ve been designing our apps using Adobe Photoshop CC for the last 2 years, and were quite happy with it. But tons and tons of resources, plugins, and 3rd party tools are being developed and integrated with Sketch, and Photoshop seems just to be… left behind. The one that last triggered our curiosity for Sketch is the new Invision Inspect feature.
But hey, you’re on Windows… Sketch works only in Mac. Are you gonna change to a Mac? No way. We built a virtual machine with El Capitan that works like a charm, installed Sketch, and started designing (an onboarding process redesign) with it.
Our goal was to decide in a couple of weeks to keep on Photoshop or move to Sketch, so in this two weeks we pushed Sketch (and us) to the limit to see how it responded. And it really did … I’m still shaking.
We built a virtual machine with El Capitan, installed Sketch, and started designing. We’re not moving back to Photoshop.
This are the main 3 reasons why we’re moving to Sketch (and truly believe not coming back to Photoshop).
1. Sketch Symbols&Overrides vs. Photoshop Linked objects
Photoshop has a cool feature called Linked Objects. It’s that idea of having one element, reuse it all over your screens, and when you edit the “base control”, gets automatically synced on every single “instance”.
There are several problems using Linked objects.
- You end up with a lot (A LOT!) of .psb files.
- Only the first parent gets updated when you edit a “base control”. When you have a deep nesting hierarchy (linked objects inside other linked objects, inside other linked objects…), updating everything becomes hell.
- You can’t edit ANYTHING on a linked object “instance”.
With linked objects, you can’t edit anything on an object instance. With Sketch symbols you can override any text, any image, any icon, and any nested symbol in a symbol instance. It’s enormously time-saving.
We use a lot of “floating label” input fields in our apps. This is what we do (in Photoshop) to “reuse” the linked objects. Before you say it… I already feel ashamed for this.
Sketch approach to that very same idea is called Symbols. And everything becomes easy…
- Order — Symbols are placed, ordered, and made visible in a separate page
- Syncing works really well. Change anything on a symbol, and everything updates inmediately.
- You can Override any text, any image, any icon, any nested symbol in a symbol instance.
No more hacks, no more maintainability nightmares. It’s sooo easy.
2. Grouping and Symbols resizing
Let’s say you design a modal window in Photoshop (window background, the close button in the upper right corner, a title and a description in the modal body, and a centered button in the lower part of the modal). You’re so proud when you’ve finished that you create a Linked object of that modal so that anyone in your team can reuse it along their projects.
But… when you embed that very same modal window in another screen, you realise that you’d like it to be wider (same height, but just more width). You can’t use the linked object anymore. So you create a duplicate of the modal, make it larger, and then rearrange everything in the modal manually (the close button , title and description, … everything, moved manually).
Sketch provides a cool feature by which you can decide, for every element inside a Group or a Symbol, which should be its behavior when the group or symbol gets resized.
And there you go. You configure the button to float, the close button to pin on the corner, and the texts to resize. And you can resize the symbol instance as you like, and everything keeps in its place. It’s magic.
3. Populating data and images with Craft
This is not something about Sketch itself, but a cool feature included in the Invision Craft plugin for Sketch.
With Craft you can populate your designs with data from :
- A lot of preset regular data (names, dates, currency, roles, …) and you can even configure your own presets.
- Images from Unsplash, a dropbox folder of yours, or even any image all over the Internet (with the “Web” feature).
- But the one that hits me is that you can import a JSON file and use its data to populate your design.
Every app and Sharepoint we build has a large layer of REST web services that provide data to the apps. And all of them return a JSON response.
We all know that every time you populate your design with “Lorem ipsums” a kitten dies, and that populating with real data makes a REAL difference on your audience. Now you can use a real JSON response to populate your design datagrids or lists in seconds (really, in seconds). It’s super-awesome.
4. Bonus reason — Automatic updates of text styles
We used to work with the Creative Cloud libraries to keep all of our project styles organized, and our designs consistent. The matter with CC Libraries is that you can define a text style, but there’s no way to update it.
Imagine you have two texts in a screen. You create a 16pt-OpenSans-DarkGray text style in the CC Library, and apply it to both texts.
If you now want both texts to be 15pt font size, there’s no way to edit that base style, and have it automatically applied to both texts.
Changing text styles in Photoshop is a nightmare. In Sketch it’s a matter of seconds, cause it works much like CSS.
In Sketch you just need to define that same text style, apply it to both texts, and whenever you decide to change that text style definition, it will update automatically all the texts in your screens that are using that style (like CSS). You may even select any text using that style, change any of the text properties, and re-sync the style so that those modifications are moved to the base text style definition and then automatically all texts using that style get updated.
Conclusion
For us, working with Sketch means running a virtual machine with a Mac, learning a lot of MacOS stuff and shortcuts, and start from ground-zero a lot of designs (because we can’t reuse anything we had in Photoshop), but even with all of this, Sketch is absolutely worth it.
I’m so happy with Sketch and Craft I could dance on a desk and clap with my ears :)
We’ve been using Sketch for a while now (4 projects) and can’t really see any case or situation to move back to Photoshop.
Hope it helps! :)
