You need to understand…

Size Classes

When you first open up a storyboard in Xcode 6, you may be a bit confused. Did you miss the announcement for the iPhone Square? Thankfully, no! You are just seeing the idea of size classes in practice. See how it says “wAny hAny” at the bottom?

Go ahead and click it:

Size class in interface builder.

That blue grid represents any size and flavor you can experience iOS — be it the iPad, iPhone 4, all of it. Click around to change the values. Xcode handily shows you which device(s) you would be designing for.

What’s this mean? A universal storyboard, essentially.

When you are editing on any given view controller, those constraints and views trickle down to the other size classes. So when you add a constraint on a view with “wAny hAny”, that will apply to every single size class. Same goes for the other size classes as you select more specific ones.

Think about that for a second.

Need to make that UI just look a little different on that tiny iPhone 4S? Just open up that size class and tweak it out how you want. You can have an entirely different UI from size class to size class. All in one storyboard.

To make life even better, you can open up the assistant editor, choose preview — and like magic: a live rendering of your UI is shown as it would be at run time. Click the “+” at the bottom and you can add as many devices as you want.

You can override prepareForInterfaceBuilder and even give a view some dummy code to display. This method has no effect on a live app, so you can dedicate purely for debugging and design purposes. Xcode even gives you a new debugging option if you navigate to Editor -> Debug Selected Views.

As a bonus, if you add IBDesignable above your custom UI classes they will live render inside interface builder as well. This also applies to properties if they are tagged with the IBInspectable atribute.

© Design Code, all rights reserved. Check out their post on Swift + iOS 8 here.

Want more on the subject? Dig deeper here.