How to boost your Design System with extendable Master Screens
Integrating repeating elements such as navigation bars into a design system is tricky, as these elements usually need a slight modification in each screen. To ease this task, we introduced Extendable Master Screens in Quant-UX.
Screen designs often share the same design elements across multiple screens. Examples are for instance navigation bars or visual styles for text and buttons. The simplest way to share the elements is to copy them from one screen to another. This approach has a significant drawback. Once you want to change the style of the elements, you have to apply the changes on all screens.
All modern design tools support therefore symbols, components or so-called design systems. An element is converted into a symbol, and the symbol is used across the entire design. Changes to a symbol are automatically updated on all screens. This approach is very powerful; however, it has some shortcomings with regards to elements that should be at the same position on all screens. Imagine you designed a top navigation bar that is present on all screens. If you decided to move that bar to the bottom, you have to change it in all screens.
For such scenarios, we introduced Master Screens in Quant-UX.com. A master screen is a kind of symbol for screens that the different screens in your app can extend. Changes to the master screen are automatically updated in all screens. It’s basically like a master slide in PowerPoint, but we extended the concept to boost productivity further. In Quant-UX you can extend (or overrule) the master screen for selected elements, for instance, to highlight the current position in the screen flow.
Let’s look at the example of a navigation bar. Such a bar has several buttons and allows the user to switch between different views easily. It is a common practice to indicate visually which button in the nav bar has been selected. This practice helps the user to understand his position in the app flow.
Symbols or office like master screen are not enough to effectively build a design system for such scenarios, as the visual indication would be the same for all screen. A simple solution is to draw over the highlighted element, but this approach stops you from having a clean design system. If you change for example the font-size in the symbol, you would also have to change in the visual indicator.
Quant-UX solves this issue and allows you to override the style of specific elements of the master screen. In the case of our navigation bar, you can overwrite the style of a navigation button to add the visual indication. Of course changes to the bar, e.g., color, size or font-family are still updated on all screens when the master screen is changed. This smart behavior of the master screens in Quant-UX enables you to build a robust and customizable design system.
In the following section, I will show shortly how the extendable master screen can be used to build a navigation bar. First, you have to create a master screen. To this screen, we add the navigation bar with three buttons. Afterward, we create three (child) screens, one for each button in the navigation bar, and set the master screen.
Now we can select the first button on the first child screen. In the properties panel on the right side, you have to enable editing. Once editing is enabled, you can change the font color to give the visual indication. We repeat this step for the two other child screens as well. That’s all. Of course, you can still wire the screens to create a fully functional prototype.
The difference to classic symbols becomes visible when you change elements in the master screen. If you adjust for instance the font-size, the font is automatically is updated on all other screens, but the highlight is still preserved. If you move navigation at the bottom of the master screen, it is also updated in the other screens.
I also created a short video tutorial to show the required steps in detail. You can try out the prototype at Quant-UX.
