Skip to main content

Master the golden rules of incredible UI design

Rule #5: Design systems must be organised

Designing systems means deciding and documenting when and where various styles are allowed to be used. Bold text for example can be used for extra emphasis, but... headings are already bold, so what happens in this case? Can we highlight specific words? When do we need to left-align, and when to center-align? 

As you create your rules, you need to document them for our own use or for anybody else who might work with the design system. Designers of all types know about design principles, but these rules are unique to our app or website, and even our brand as a whole. Choosing Title Case over sentence case, for instance, can be the difference between formality and informality. But most importantly, these rules help us make meaningful but quick decisions that result in total clarity.

Stay flexible and expect to make a number of changes as new elements, colours, and use-cases emerge. A design system is not a one-and-done task — it's normal to be updating it constantly. In order for it to be useful, your design system needs to be well organised. 

01. Colours

Colour swatches

Create swatches of all your scheme's colours (Image credit: Daniel Schwarz / InVision)

Step one is to save all of the colours to the 'Document Colors' swatch if you haven't done so already – this will make them easier to access when we need to apply them in our design.

To do this, open the colour chooser widget from the inspector, choose 'Document Colors' from the drop-down, and then simply click the + icon to add the colour to the swatch – this workflow is the same (or very similar) in all UI design tools.

02. Shared libraries

Next, we need to convert our document – complete with typographic styles, colours, buttons, common areas, and basic components – into a shared library. Essentially, this means that every element needs to be a component, even if it consists of only one layer. After doing this, it's simply a case of clicking the +‌ button in the left-hand side Libraries sidebar and importing this very document into a new document. The very document we're working on right now is the library itself.

Right now, InVision Studio is limited in the sense that it doesn't yet sync with InVision's official Design System Manager tool, but it's easy enough to house the library in Dropbox. When a change is made (either locally or remotely), every Studio file that uses the library will ask if you would like to update the colours and components. This is exactly how the design system is used across teams.

03. Design systems at scale

As a design system expands, managing it inevitably becomes harder. There are various adjustments that we might want to make to our design system to make it more efficient, especially since InVision's Design System Manager doesn't work with Studio yet. 

For instance, we might want to use text layers to annotate our design system as a means of explaining the rules and use-cases of various elements. For the typographic styles, we could even edit the text to be more descriptive (e.g. <h1> / 1.3 / 44px).

04. Design handoff

Design handoff tools display the various styles used by every element in the design so that developers can build the app or website. These tools include an overview of styles, and also a copy of the 'document colors' swatch. Developers can copy these styles as code, which is excellent if you've created written documentation for your design system, and like to include code snippet representations of the components.

InVision's design handoff tool is called Inspect, and to utilise it, all we need to do is click the 'Publish to InVision' button/icon in InVision Studio, open the resulting URL, and then tap to it switch to 'Inspect Mode'. It's really convenient.

This article originally appeared in Web Designer magazine. 

Read more: