WorkWriting

Designing in SwiftUI

SwiftUI is Apple's declarative UI framework. It's also a good design tool. Programmers have mixed opinions on it, but I've found it to be very helpful for prototyping and designing interfaces.

The new M1 machines unlocked SwiftUI. Xcode is a pretty heavy app, but builds are now fast enough that quick iteration is possible. This is critical for anyone working with UI where changes need to be instantly viewable and continually iterated on.

Reasons to Consider using SwiftUI

  1. There's a higher ceiling in SwiftUI than any design tool I've used before. Even if something isn't possible in SwiftUI, it's possible to drop into UIKit. If you can build it, you can prototype it.

  2. You can ship your projects. The ceiling doesn't stop at nice prototypes. You can ship full apps.

  3. The gap between design tool and declarative framework is shrinking. Developer tools are getting easier and easier. Design tools are getting much more robust. The gap isn't as wide as it used to be.

  4. The layout system is straight forward. If you're familiar with flex-box layouts it is very similar. It was a lot easier for me to pickup than the older constraint based system from storyboards.

  5. Native Performance and Effects. Any and all sensor data is available, and you have fully interruptible animations running at a high refresh rate. Even complex prototypes feel lightning fast and snappy. It feels like a real app because it is a real app.

  6. Robust Ecosystem and Tooling. Because there's a huge community of engineers there are lots of open source libraries, tutorials, and resources to learn from. You also benefit from software development tooling which is mature.

A Few Downsides and Caveats

  1. It's not built for design use cases. This means there are features that other design tools have which don't exist yet. An example of this is the absence of a touch cursor for presenting prototypes that exists in other tools.

  2. Sharing prototypes is challenging. The best option is sharing source code on Github and Videos. It would be nice to be able to share a url to a prototype without going through the approval process.


Overall, I've had a very positive experience using SwiftUI to design interfaces and prototype experiments. I've been able to ship an app, and create a number of experiments.

Using the Accelerometer in Airpods to Create a Parallax Effect
Controlling 3D primitives using SwiftUI and Scenekit
Controlling an Interface Element using the Apple Watch
Button to Half Sheet Transition
3D Transform with Drag Gesture
Parallax Effect using the Accelerometer

If you're looking to get started with SwiftUI, I put together this short guide, and have posted some examples. I also post experiments on twitter.