From Sketch to Xcode. All the tips and tricks, with tons of screenshots. Xcode downloads included!

The Power of Xcode

Techniques that make iOS design a dream

4 min readDec 31, 2013

There are over600 million iOS devices out in the world. As designers we should not only build new products mobile-first, but we should alsolearn the tools that make mobile designs great. Being informed about the implementation process will allow us to make better design decisions.

After spending 10 hours a day for the past 2 months in Xcode, I’ve learned a number of techniques that completely changed my design workflow. Xcode is a mature tool that is filled with powerful yet often under-utilized features.

If you’re not convinced that Storyboard is the future of CSS or are not directly working with Xcode, this post will at the very least inform you about how to prepare your designs and the limits of what is possible.

Preview Your Design

Just like how you can preview your Web app in a browser across multiple resolutions, you can do so with a powerful feature called Storyboard preview.

In this screen, I’m previewing how the design will look like on an iPhone 4 with a 3.5 inch screen without having to run the Simulator and navigate to the specific page.

Color Your Images

One of the many hurdles for designers is having to create multiple assets for multiple instances in the App. Xcode can tint your images, you just need to know how as it’s not consistently used throughout.

A navigation bar button item can be tinted.

A button image can only be tinted if set to System. Pro tip: System will give you a nice transitioned pressed state. UIImage doesn’t allow you to easily tint your images unless in code, so more often than not, you should use UIButton instead. It has far more options.

Use Hex Colors

Coming from a world of Photoshop andSketch, a lot of designers are used to the Hex code to apply the color. In order to use HEX code, you must downloadHex Color Picker to add to your Colors inspector.

It’s also far more precise that the color picker tool.

Embed and Unembed

Think of Embed asFolders in Photoshop. It allows you to group multiple elements into a UIView or UIScrollView. Since UIViews are super versatile forCanvas animations, organizational or selecting purposes, you may want to embed related elements together.

I love the Embed function so much that I added a custom keyboard shortcut the same as the Sketch shortcut for creating a folder.

As I’m creating multiple queued animations, I grouped those elements into multiple Embeds so I can animate them separately, at different delays.

Autolayouts

This is a feature that scares even the most experienced developers. So let me try to simplify it. It’s a tool that allows you to make your design adaptive. It’s like position: fixed and relative/absolute in CSS.

I want to make the white box horizontally and vertically centered within the canvas. First, let’s open Preview. As we can see here, in the iPhone 4, the white box is automatically resized incorrectly.

By Control dragging the box to the Superview (that’s how they call the canvas), I get the option to Center in Container. Hold Shift and click both Horizontal and Vertical. Then, you must set the width and height of the box.

Yep, that’s basically it. It takes a lot of practice for more complicated scenarios and I would suggest that you watch the WWDC video:Taking Control of Auto Layout in Xcode 5

If you want to save your developer’s time, you should definitely learn Autolayouts.

Dynamic Fonts

iOS 7 introduced the ability to set font sizes based on the user’s preference.

Even with custom fonts, you can set the user’s preferred size using iOS7's Text Styles.

Actions and Dialogs

In Xcode, you can create Action sheets and dialogs very quickly. Why spend so much time on stuff that Apple already perfected for you?

Use already made features so you can focus on the ones that sets your App apart.

Easily Use The Camera

With about 20 lines of codes, you can use the Camera feature in Xcode.

Sounds

Apps are just more fun with sound effects. You can play sounds with one line of code usingSimpleAudioPlayer:

[SimpleAudioPlayer playFile:@”filename.mp3"];

Motion Effects

With one line of code using aSimpleMotionEffects, you create this effect:

[self.myViewaddMotionEffectWithMovement:CGPointMake(15, 15)];

Final Thought

If you start simple, it is possible tobuild an iOS App in 9 days. iOS Appscan be made as fast as Web apps and it’s just a matter of time until more designers come onboard. We tend to follow where the people who uses our products are.