Member-only story
Swift Enums 🤝 Design Systems
Implement design systems with progressive disclosure — utilise the Swift type system for simple, customisable SwiftUI components
I mostly post to Substack these days. Subscribe now to receive non-paywalled, ludicrously in-depth articles on iOS, Swift, and indie projects every 2 weeks.
If you’ve worked on any large development projects, you’ll likely have encountered a design system. A design system is a library that encapsulates your branding into reusable components, colors, fonts, icons, and motifs, to help ensure a consistent style across your products.
In short, they allow us to avoid re-inventing the wheel for every screen of UI design.
Personally, I love working on things to make life easier for my team. Implementing design systems in a clean, straightforward way has huge leverage since your team will work with it every day.
In my career, I’ve implemented various design systems in my apps, and explored many diverse approaches on iOS, such as:
- UIKit Storyboards and Nibs
- Programmatically drawn components for each UIKit subclass
- Protocols to allow composable drawing and animation
- Enums to declaratively define components
Every approach has its place, but in SwiftUI I’ve found the cleanest, most useable approach by far is defining your components using enums.
As you read through this post, I’ve added many code snippets, but feel free to check out my code from Github and follow along.
The Design System
Let’s say your designer has just sent you a link to their designs — it’s the button component they’ve been working on. It might look something like this:
Generally speaking, any designer worthy of their Figma free tier or Sketch license will have a small set of styles, in a small palette of brand colors, and multiple sizes, icons, and alignments.
You might feel the gears turning in your head as you start to realise why Enums might be a strong approach here.
