No designer wants to spend a week putting together something only to be told that it can’t be done.
Knowing how to use Storyboard, Auto Layout and a little bit of Swift will not only allow you to build your own app, but also share the workload with your developer. You don’t work in a silo, you iterate at the same pace as your team. A project can only move as fast as its slowest process. Development takes 80% of the time; the first 20% is attributed to visual design. There is 30% up for grab. Since designers are especially trained for that part, there is a huge win.
In this chapter, we’re going to learn how to own that missing 30%. It’ll be written from the perspective of a designer.
While Xcode allows to do really powerful stuff, it can also do simple prototypes. And without writing a single line of code.
There are 6 types of transitions between screens in iOS: Cover Vertical, Flip Horizontal, Cross Dissolve, Partial Curl, None and Push (requires Navigation Controller).
Bonus: if you want to download the Xcode project for this demo, get it here. Made entirely in Storyboard.
Designing in Storyboard
The Storyboard works very similarly to Artboards in Sketch. It’s incredibly intuitive once you get past that fear of Xcode. In Storyboard, you manipulate your UI in a very visual way. It’s even easier than HTML and CSS because you don’t need to code.
As a designer, to be able to implement your own design is empowering, not to mention fun as well. We’re fortunate to have a functional visual tool like Storyboard that even developers use. Not only can you prototype with it, but also you can create production-quality layouts that co-exist with production code.
Adaptive Layouts is one of the most important skills you can develop. In a future where there is a growing number of mobile devices and screen sizes, we can no longer afford to focus on just static designs.
Auto Layout requires 2 things: position and size. As long as you set those constraints, Auto Layout will be happy. There are 2 ways to respect those requirements: Align and Pin.
- Align allows you to center things and align elements with each other.
- Pin lets you set the size and the spacing from the edges.
Setting constraints between two objects
Remember the smart guides and the distances in Sketch? Well, constraints are sort of like that, but made for adapting your layout.
With the Assistant Editor’s Preview, you can quickly check how your layout looks on the iPhone 3.5’, 4’, 4.7’, 5.5’ and iPad in portrait and landscape modes, without having to run the app every time.
This neat tool allows you to set specific Auto Layout constraints and content based on groups of devices. You can decide to add an extra menu or make some content bigger based on the device that you’re on.
Working With Colors
As a designer with a Web background, I typically work with HEX colors. These tools will help you do the conversion efficiently from Sketch to Xcode.
- HEX Color Picker – A dead-simple HEX color picker. Very useful when you work with the Mac’s color picker that exist both in Sketch and Storyboard’s Color Picker.
- Sip Color – A great tool for collecting colors and converting them to Swift code.
- Skala Color Picker – A nice alternative to the first two.
Instead of generating 3 images (1x, 2x, 3x) per asset, you only need one single file. In Sketch, you need to export them in PDF. However, there are 3 things to note.
- The resolution matters. You must export at 1x to make sure it looks good in Storyboard.
- You cannot resize the vector image in Storyboard as you please.
- Xcode re-renders them to PNG files to 1x, 2x and 3x.
A year ago, I released Canvas, an iOS animation library meant to make it far easier to do animations using Runtime Attributes in Storyboard. It was simple enough that any designer without a coding background could come in and play with these animations.
A lot has happened since. Swift took over and Xcode 6 made things much easier. Runtime Attributes can now be set using IBInspectables. Instead of writing manually a few attributes such as animation type, delay and duration, you can just set the values directly in the Attribute Inspector.
So I decided to go back to the drawing board and work on a new animation library called Spring, with the help of two iOS developers. This project started when I released my book’s Swift Chapter to help designers and beginners learn Swift by shortening some of the animation code and allowing them to set layer properties that aren’t readily available in the Attribute Inspector such as cornerRadius, shadowColor, shadowOpacity, etc. It has grown into a full-blown animation library that supports every View, Transitions, Loading Animation and a lot more.
Just drop in the Spring folder to your Project Navigator like shown in the video.
Using Spring, you can quickly animate any layer without a single line of code. You have access to over 25 preset animations like slideDown, zoomIn,squeezeUp, etc. You even have the flexibility to play with x, y, scale androtation properties. For your animation, you can experiment with curve,damping and velocity values.
For simple animations:
- In Identity Inspector, set the Spring Class to your layer.
- Play with Spring attributes.
Play with the Spring App
Animations In Code
With code, you can do a lot more. Spring was built so that you can trigger animations or a chain of animations with any event.
You can trigger this during viewDidAppear() or in an IBAction.
layer.animation = "squeezeDown" layer.animate()
I suggest storing all the animation properties in Storyboard and just call theanimate() or animateTo() function in code. Like this, you avoid putting too much UI code in the Class files.
Learning Swift as a Designer
With Swift Playground, you can experiment with code in real-time. It’s a perfect place to experiment with all the possibilities without the limitations of a GUI. Learning how to use functions, classes and working with UIKit can make your app infinitely more powerful.
I like to think of code as another design tool. Software is made of code, it is unavoidable.
This book was written in a way that it respects all the latest standards encouraged by Apple. I consulted two iOS engineers in the process and they kindly reviewed all the code to make sure that I respected the best practices.
As a designer learning code, you can:
- Perform any animation or UI change based on events.
- Work with real data from any database or API.
- Collaborate better with engineers by understanding their constraints, and pushing beyond those constraints.
Building your Swift App
In this updated chapter, we won’t skip any step. You’ll learn everything in great detail: the Xcode UI, Storyboard, Auto Layout, Animation, the Swift language and a lot more. Each section is extremely visual and has videos with voice as well as downloadable Xcode projects. The whole process has been simplified for designers and beginners who have never touched code in their entire life.
Tweet “Build a Swift App”
Now that you’ve read “Build a Swift App”, let’s learn more about Swift in the next section.
You’re at the first section of Chapter 3
Introduction to Xcode 6’s Layout
Create your first Xcode Project