As SwiftUI gains popularity in the design community, I thought it would be useful to share my journey of learning it. I started diving into SwiftUI around May 2023. While I’m not yet a SwiftUI master like some of the experts I’ll mention, I’ve reached a point where I can comfortably use it for my needs, primarily prototyping.

Why SwiftUI?

Unlike in the U.S., in Europe, Android still holds a significant market share. So, it makes sense that many of the clients I’ve worked with prefer frameworks like Flutter or React Native over Swift for mobile app development to keep costs down. Because of this, I haven’t had many real chances to design just for native iOS apps. This lack of native iOS design opportunities motivated me to dive into SwiftUI, especially since I’ve been binge-watching Indie Hackers podcasts.

My Coding Experience

Before sharing my journey, here’s a brief overview of my coding background:

I don’t have a computer science degree or coding bootcamp experience. However, I’m comfortable with HTML, CSS, and basic JavaScript, and I’ve written a few Bash and Python scripts during university.

100 Days of SwiftUI

If you know anything about Swift, you’ve probably heard of Paul Hudson, known as "twostraws". His 100 Days of SwiftUI" course is often compared to Blender’s doughnut tutorial in terms of its impact. Just like most, I began my SwiftUI journey with this course.¹

In the first week, I got into the basics of SwiftUI. Each day introduced new concepts like variables, functions, loops, arrays, closures, structs and classes. The course is set up so that each week builds on the last, wrapping up with a project that applies what’s been learned and gradually introduces more complex topics like CoreML, CoreImage, and CoreData.

The 100 days felt pretty long, and, like with any new skill, I hit a few plateaus along the way. The early plateaus were brief, but the last one, focused on CoreData, dragged on for weeks. Even though tutorials from Sean Allen were somewhat helpful, I found myself drifting away from SwiftUI and losing motivation, so I decided it was time to change things up. (By then, I was on day 82 of the 100-day streak.)

I initially planned to build my own expense tracker app after completing the “100 Days of SwiftUI” course. However, I soon realized that I was more excited about experimenting with animations and interactions than about developing full-fledged apps. This new interest pushed me to look for more in-depth resources on SwiftUI animations.

Animating SwiftUI Applications

Seeking a deeper understanding of SwiftUI animations beyond the "100 Days of SwiftUI" course, I explored additional resources such as courses and YouTube tutorials. This led me to the book called Animating SwiftUI Applications.

The book is well-written and explores a range of animation techniques, including gravity, physics, collision, as well as properties like hueRotation, opacity, and scale. It also covers animation concepts such as state variables and time curves, and demonstrates how to combine multiple animations for dynamic effects and use the GeometryReader for cross-platform view alignment. Each chapter guides you through a different technique with step-by-step instructions, building an example project along the way. ²

SwiftUI for Designers

As I was experimenting more an more with animations and interactions, and spending more and more time on twitter, I inevitably stumbled upon Philip Davis and his prototypes.³

They were incredibly fun, elegant, and a pure dose of "eye-candy", just what I needed to boost my motivation. I decided to take the plunge and purchase his SwiftUI for Designers course, confident that my experience so far would be enough to keep up.

Unlike "100 Days of Swift", this course is perfectly tailored for designers, focusing on cool interactions, custom components, and elegant UI. Though shorter, it’s quite intensive in terms of content, packed with valuable tips, tricks, and—yes, math (because math is cool again).

The course sparked numerous ideas and inspired me to start experimenting more on my own.

Recreating Others’ Work

As my Twitter bookmarks piled up with interactions, I began recreating them one by one. One standout was a stunning titanium particle effect created by the incredibly talented Alex Widua.

Since there wasn’t any available source code for this interaction, it was a perfect “learn by doing” opportunity for me. I eventually reached out to Alex, asking him about specifics for using emitter fields. Not only did he respond, but he was also kind enough to share a gist with hints for implementation.

It took me almost two weeks, working on and off, but I managed to pull it off in the end. Below is the final result.

Around that time, Arc Browser released its iOS companion app, Arc Search, featuring a cool fidgety spinner during onboarding. It seemed like the perfect next challenge for me, as I was confident I could recreate it.

Although I came close to the original, I fell short in a few areas. The rotation isn’t as smooth, the rotation direction is occasionally ignored, and I couldn’t determine how to ensure the icon always ends up facing upwards. Hopefully, Adam Stern will reveal how he did it someday.

At that point I gained a deep understanding of SpriteKit, so I decided to take a break and try something new. I didn’t have a specific direction in mind but was certain I wasn’t ready to revisit CoreImage and CoreData just yet.

Soon after, I came across a trending Twitter post featuring horizontal scrolling on the iOS dock, similar to the effect I used to achieve with cydia when overclocking iPhones was popular.

That felt nostalgic, so I decided to make it my next project. While implementing horizontal scrolling with ScrollView was relatively straightforward, I wanted to take it a step further by creating a complete dock interaction, including app shaking, displaying notifications, and deleting them. The biggest challenge was figuring out the app sorting upon deletion. Fortunately, George Elsham stepped in and assisted by adjusting my for loop to use tuples of app names and their indices instead of just indices.

Daniel Korpai from Craft commented on that post. Before that, I wasn't familiar with his work, so I checked his profile. As I browsed through his work, I came across this cool confetti fidget interaction he created with Framer.

Naturally, I had to recreate it using SwifUI.

After nearly a year with SwiftUI, I began to feel a bit saturated and decided to take a break. I shifted my focus to a new project, building this blog with Next.js, and took the opportunity to step away from SwiftUI for a while.

My advice for anyone considering starting with SwiftUI or learning a new programming language is to be patient with yourself. Embrace your curiosity, seek help from others, and don’t hesitate to share your progress on social platforms for feedback. Experiment a lot and enjoy the process.

I highly recommend that every designer try SwiftUI. It’s not only a lot of fun and relatively easy to pick up, but it also enhances your understanding of technical constraints when designing for iOS.

And that’s been my journey with SwiftUI so far. There’s still so much more I want to explore, like Metal shaders, and of course, CoreData and SwiftData remain on my list.

Until next time!

---

Credits and Inspirations

I’ve mentioned several people who have inspired and assisted me throughout this journey, but there are many more worth noting. Though I didn’t highlight them earlier, they are definitely worth exploring.

• Janum Trivedi
• Robb Böhnke
• Daniel Kuntz
• Nitish Khagwal
• Kavsoft - YouTube channel
• DesignCode - Youtube channel

Another noteworthy tool is prototyping app called Play. It’s great for those who’d rather skip the coding and let engineers handle it.⁴

---

Footnotes

Footnotes

1. Paul Hudson is a prominent Swift educator known for his site, Hacking with Swift. It features a comprehensive collection of tutorials, articles, and courses on Swift and SwiftUI. ↩

2. The book also includes a code repository with all the example projects, organized by chapter. This makes it easy to find and check out the code for each example, helping you better understand the material. ↩

3. Philip also offers a library of his prototypes, which is extremely helpful. It’s a bit on the pricier side, but definitely worth it if you want to dive deeper into the details of SwiftUI. ↩

4. Play uses native iOS elements and SwiftUI under the hood, allowing you to quickly share prototypes via App Clips, no web simulations or app installs needed. It’s the easiest and fastest way for anyone to experience your work instantly on their phone. ↩