Skip to main content

Atomic Design Pattern in SwiftUI

By

Atomic Design is a methodology for creating design systems with a clear, consistent hierarchy. It was introduced by Brad Frost and is inspired by chemistry. The core idea is to break down UI components into the smallest possible parts (atoms) and compose them to build more complex components and pages.

Atomic Design Hierarchy

1. Atoms

The basic building blocks of UI — buttons, labels, text fields, icons, colors, spacing units.
Example: PrimaryButton, AppText, Icon

2. Molecules

Groupings of atoms that form simple components.
Example: SearchBar = TextField + Icon, LabeledSwitch

3. Organisms

Relatively complex, standalone components made of atoms and molecules.
Example: LoginForm, UserCard, HeaderView

4. Templates

Layouts or skeletons that define the structure of pages using organisms.
Example: AuthScreenTemplate, DashboardTemplate

5. Pages

Final screens with real data/content, composed of templates.
Example: LoginScreen, SettingsScreen.

Here is how an example folders structure looks like in iOS app powered by SwiftUI. 

MySwiftUIApp/

│

├── Resources/                 // Assets, Localization, etc.

│   ├── Assets.xcassets

│   ├── Localizable.strings

│   └── Colors.swift

│

├── App/                       // Entry point and configuration

│   ├── MySwiftUIAppApp.swift

│   └── AppRouter.swift

│

├── Core/                      // Shared reusable logic

│   ├── Network/

│   ├── Extensions/

│   ├── Utils/

│   └── Models/

│

├── DesignSystem/              // Atomic Design Pattern folder

│   ├── Atoms/                 // Basic UI elements

│   │   ├── PrimaryButton.swift

│   │   ├── AppText.swift

│   │   ├── Icon.swift

│   │   └── Spacing.swift

│   │

│   ├── Molecules/             // Small component combinations

│   │   ├── TextFieldWithIcon.swift

│   │   ├── LabeledSwitch.swift

│   │   └── ProfileImageWithName.swift

│   │

│   ├── Organisms/             // Large UI blocks

│   │   ├── LoginForm.swift

│   │   ├── UserProfileSection.swift

│   │   └── ProductCard.swift

│   │

│   ├── Templates/             // Layout structures with placeholder content

│   │   ├── AuthScreenTemplate.swift

│   │   ├── FeedPageTemplate.swift

│   │   └── SettingsPageTemplate.swift

│   │

│   └── Pages/                 // Final UI Screens

│       ├── LoginScreen.swift

│       ├── HomeScreen.swift

│       └── SettingsScreen.swift

│

├── ViewModels/                // All SwiftUI ViewModels (MVVM)

│   ├── LoginViewModel.swift

│   ├── HomeViewModel.swift

│   └── SettingsViewModel.swift

│

└── Tests/                     // Unit and UI Tests

    ├── MySwiftUIAppTests/

    └── MySwiftUIAppUITests/

 

Advantages:

  • Reusability: Components are small and self-contained, encouraging reuse.
  • Consistency: Promotes a unified design language across your app.
  • Scalability: Easily scale design systems by combining existing components.
  • Testability: Smaller atomic components are easier to unit test.
  • Clear Structure: Developers and designers have a shared, understandable component hierarchy.
  • Collaboration Friendly: Makes handoff between design and development smoother.

Limitations:

  • Overhead for Small Projects: May feel too heavy for very simple apps or MVPs.
  • Naming Complexity: Distinguishing between molecules, organisms, templates can become ambiguous.
  • Learning Curve: Developers unfamiliar with the pattern might find the structure over-engineered.
  • Increased Boilerplate: Can lead to many files and folders, even for small features.
  • Not Always a Natural Fit: Sometimes, trying to "force" components into the hierarchy doesn't make sense.
Labels:

Popular posts from this blog

Animating label text update - choosing a better way

By
Recently I published a countdown app .  At one point of development - I have to show a timer on a UILabel which ticks on each seconds. As usual I started  setting text to a label object - self .timerLabel.text = someString Easy piece of cake right !?   But wait ... it won't take much user attention when timer ticks on every seconds. So I decided to make use of a simple animation while label gets text update. I found there are dozens of ways to animate a label. In this short article, I listed 3 best way you can animate text on a label. ( Spoiler Alert 👀- I decided to go with 3rd option)  1. Fade In - Fade out animation : CATransition class has got transition type `fade`. With timing function of CATransition - I was able to see the below result. let animation: CATransition = CATransition () animation.timingFunction = CAMediaTimingFunction (name: CAMediaTimingFunctionName .easeInEaseOut) animation.type = CATransitionType .fade animation.subtype = C...
Read more

Implementing autocompletion OTP field in iOS

By
Long waiting is over. !!  iOS 12 brings Autofill for OTP text field which is close to Android provided a decade back. Previously in iOS we used to toggle between OTP text screen and message inbox.  Which was hard to remember and time consuming resulting a bad user experience. Personally, I have been asked from the client/customer couple of times to implement autocompletion for OTP field and took me a lot of time to convey that it is not possible in iOS. Why Autofill was not possible previously?  We all know that Apple gives at most care for user privacy. When we see iOS architecture, each individual app is like a separate island. There is no inter-app bridge between apps (exception for Keychain and URLSchemes APIs which gives very limited scope). Thus we cannot read message content from inbox. Where to start Autofilling? First of all, the target SMS need to have the OTP Code with prefix string "Code" or "Passcode"on its message content. Beware of OTP c...
Read more

Prevent Navigationbar or Tabbar overlapping Subview - solved for Card view

By
Recently, I started with a Card view added as a subview of UIView in a view-controller. When a view controller created along subviews, it tends to use entire screen bounds and also slips behind Tab bar or Navigation bar. In my current situation, it's second case. Casually new iOS developers will write a patch by additional value for coordinate y and subtracting bar height from its size. A lot of them posted in SO threads too : How to prevent UINavigationBar from covering top of view? View got hidden below UINavigationBar iOS 7 Navigation Bar covers some part of view at Top So, how I got solved ? self.edgesForExtendedLayout = [] This  will avoid all subviews in a view controller get behind any bars. Read full apple  documentation on here. Full Source code below :  //Simple view controller where its view layed-out as a card. class WidgetCardViewController : UIViewController { var containerView = UIView () //MARK:- View Controller Life Cyc...
Read more

UICollectionViewCell shows with wrong size on First time - Solved

By
We commonly use Collection view where its cell size calculated run time. The flow layout delegate is responsible to return individual cell sizes. BUT in most of the cases, delegate method `collectionView: layout sizeForItem:` expects cell size too early. Before generating actual cell size. extension YourViewController : UICollectionViewDelegateFlowLayout { func collectionView ( _ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize { return CGSize (width: externalWidth, height: externalHeight) } } For instance, if a cell size depends on external view and its frame is not yet ready - results with wrong (or outdated) cell size. Typically happens for the first time view controller laid out all views. You can find similar queries in StackOverflow community : Collection view sizeForItemNotWorking UICollectionViewCell content wrong size on first load How to refresh UICollec...
Read more

Cached Async Image in SwiftUI

By
 SwiftUI’s AsyncImage is handy, but every time your view appears, it refetches the image—leading to flicker, delays, and unnecessary network use. What if you could fetch once, then reuse instantly? That's exactly what the Cached Async Image  delivers: a memory-powered caching layer that keeps SwiftUI image loading smooth, snappy, and resilient. First a simple in-memory cache without disk persistence. This will be thread-safe and auto-purges under memory pressure. A Singleton wrapping NSCache for URL → UIImage caching as follows : final class ImageCache {   static let shared = ImageCache()   private init() {}   private let cache = NSCache<NSURL, UIImage>()   func image(for url: URL) -> UIImage? {     cache.object(forKey: url as NSURL)   }   func insertImage(_ image: UIImage?, for url: URL) {     guard let image else { return }     cache.setObject(image, forKey: url as NSURL)   }   func clearAll() { ...
Read more