In late 2019 we revealed an exciting new look and brand identity for Moneybox. 🎨 This was a huge project worked on by every team at Moneybox, however with over 500 screen updates, our iOS and Android developers were key to bringing our new look to life.
Learn how our iOS Lead, Valerio, and his team, delivered on the project by developing a quick process that applied styles to UI components when writing code.
When designing new screens, we needed to have a simple way to apply different styles to UI components. New screens with components such as labels and buttons are developed on a daily basis – working on the rebranded app and the introduction of dark mode on iOS meant we needed a process which is both fast and effective.
The style guide
We decided to create a style guide, whereby every font size and weight is defined by a name and a number:
Headline (3) – ModernEra, Bold, size: 24px, line height: 28px
Body1 (7) – ModernEra, Regular, size: 17px, line height: 24px
The style guide is described in a specific page in Zeplin, which the team use to share their designs.
All labels in any Zeplin screen have a related style, visible on the right side of the interface:
Defining the styles
In the enum we define 3 functions: returning the font, the kern, and the lineSpacing for each style:
We then define a function returning NSMutableAttributedString, where we set the attributes of that text style that are needed – the font, kern, and alignment.
Applying the styles to labels
We can then implement MBLabel, as a subclass of UILabel. We override the text variable, calling setText on the didSet, resulting in setting the attributesText of the label, returned by fontStyle.stringForFontStyle IBInspectable allows us to set the style directly in the storyboard:
Once everything is in place, whenever we add a new label in a XIB file, or in a Storyboard, we just set the class of the label to be ‘MBLabel’, then set the number of the font style. And that’s all – a quick and easy way to manage your styles in any iOS application.
For anyone interested, the code can be downloaded here.