All iOS developers use Xcode and most mobile designers use Sketch, Adobe XD, Illustrator, Photoshop, Figma you name it. Designers are lucky enough to have lots of tools to choose from.
But my opinion is that mobile designers should learn to use one more tool and the name of it is…. you guessed it Xcode and more specifically the Xcode’s Storyboards with their autolayout functionalities.
And why does a designer have to use Xcode? Most designers would say, this is a tool for developers but are they right? Well, I can’t tell you if they are right or wrong, what I can tell you though is that I have started using Xcode Autolayout in my daily work flow and it’s not as hard as many of you might think.
But let’s start from the beginning:
As a mobile UI/UX designer, I use a lot of different tools. I recently started using Xcode in order to upload app icons and by implementing most of my designs myself, I make sure that the designs work across all supported iOS devices. After that I push all my designs and general changes using Git to the developers, who render the designs functional.
Most of you would not consider this as the ideal workflow, but let me tell you that learning Xcode is one of the best things I have ever done in my career. It makes the whole design-to-code process much, much easier and that’s mostly for two reasons:
First: Developers don’t have to implement designs in Xcode anymore, which is a pain in the ass for them and, trust me, it’s a lot harder for them to implement a design in Xcode than it is for you to implement yours. So developers ultimately end up doing the actual job, which is coding, and not moving views around and setting constrains on the storyboard.
Autolayout is amazingly simple after you get the grasp of it. It has a, some would say, steep learning curve, but once you get somewhat close to good at it, from that point on it will become second nature to you!
Second: Designers get to understand how all the mock-ups come to life and furthermore, they get to be the ones that are going to bring them to life. But most importantly they are the sole owners of their designs, they are the ones that make sure the designs are pixel-perfect and work across iOS devices (not very easy if you support iPhone 4S)
And the best thing to come out of all that I mentioned above is that all the back and forth process between designers and developers about:
Make this two pixels taller.
Align this to the right.
Set this color to #F2F2F2.
Or in the worst case:
This has nothing to do with the mock-ups I gave you!
With Xcode is now a thing of the past!
Helpful Videos & Articles
Mysteries of Auto Layout, Part 1 - WWDC 2015 - Videos - Apple Developer
Auto Layout is a powerful constraint-based layout engine that can drive complex and dynamic interfaces on both iOS and…
Mysteries of Auto Layout, Part 2 - WWDC 2015 - Videos - Apple Developer
Continue your pursuit of Auto Layout mastery. Gain high level insight into how Auto Layout works, and strategies for…
What's New in Auto Layout - WWDC 2016 - Videos - Apple Developer
Get details about new features of Auto Layout in Xcode, Cocoa and Cocoa Touch. Explore the new NSGridView, allowing…
Auto Layout Guide: Anatomy of a Constraint
Describes the constraint-based system for laying out user interface elements.
You should really give it a try!