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 l...
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...