Rule #4: Design elements must be consistent
Converting design elements into components means we can reuse them, helping us speed up our workflow and maintain consistency across our design. Components are a huge time saver and all UI design tools offer this feature (e.g. in Sketch, they're called Symbols). In Studio, we can create components by selecting all of the layers that should make up the component and using the K shortcut.
01. Using components
We can reuse a component by dragging it onto the canvas from Libraries Document on the left-hand side, although bear in mind that this workflow may differ depending on your UI tool.
This method of creating design systems (and eventually creating the design itself) works especially well with modular/card-based layouts, although 'common areas' – such as headers, footers, and navigations – will also be excellent candidates for components. Like we've done with our typographic styles, colours, and buttons, we must remember to organise our components carefully.
02. Establish rules
It's important not to use branded CTA buttons on top of the brand colour, since branded CTA buttons will obviously need to stand out amongst everything else. So how do we go about creating a branded component while still being able to use a branded CTA button? After all, if we're using neutral dark buttons for, say navigational buttons or simply less important buttons, that just wouldn't be an option, right?
This would be an ideal opportunity to go ahead and create a component – specifically, a heading + text + button combination. Notice how we've created a neutral light 'card' backdrop to enable the use of the branded button. Similarly, the neutral light form field (form fields are usually white because of the mental model historically synonymous with paper forms) doesn't look amazing on the neutral light background, so they can only be used on the neutral dark background – either directly, or within a neutral dark component. This is how we make our design flexible, whilst also obeying our rules and maintaining consistency.
03. Stress test
The quickest and most effective way of ensuring robustness in our design system is to stress test it. Putting a design system to the test means, unfortunately, needing to be cruel, putting the system through the wringer. Let's say that we have a navigation with [x] amount of nav items, because that was the requirement; in order to really ensure flexibility, try changing these requirements by adding more nav items. To really throw a spanner in the works, try also adding a nav item with a much higher visual hierarchy than the others.
Do our size, typography, and colour rules allow for something like this, or, in order to offer optimal usability, do we need another rule? Bear in mind that there's a major difference between adding rules and bending the rules. More edge cases means less consistency, so in most cases, it's much better for usability to rethink the component.
Next page: Design systems