Creating a flexible design system

Much is being written today on design systems, pattern libraries and guides, yet many teams find it hard to follow style and interface guidelines consistently for a prolonged period of time. As the product evolves, design system often clutters with increasing exceptions, and haunts the team with rudimental rules till they give up on maintaining it.

Why does this happen? Designing a digital product we often do not know where exactly it will evolve over time. And while we easily maintain the neat and shiny look of our UI kit, problems arise when we apply our guidelines in a variety of contexts, many of which we can’t envision designing the system initially.

How do we create a flexible design system which evolves with the product and yet is easy to maintain? Here are some rules I found universal.

Don’t formalize too early

Start small

Make exceptions part of your system

In my experience, the key to designing a lasting system is not in settling on a tiny numbers of styles, but rather in organizing styles in a way which will make it easy to continiously make changes, adding, removing and merging styles together without losing control over the system.

Create a flexible spacing system & set a grid

Image for post
Image for post

A blank space, essentially, is just another reusable UI component, and it can be nested, or stacked to other components. As long as you stick to the module of choice, there’s often no need to formalize design further — the goal here is not in having as less types of spaces as possible, but is to create rules for spacing and organize the spaces used throughout the system.

The next step I take is setting a grid with columns and gutters-multiples of the base module. I often use 12, 16 and 24-column grid in my work, even if the current design requires less, to allow more flexibility in future.

While grids are essential to organize the layout, they often fail as the complexity grows — and that’s where a good spacing system comes in handy. Nested grids is the other solution I found useful, especially when working with responsive layouts.

Image for post
Image for post

One of the tricks which in many design systems would be an exception, is applying different rules to align labels next to squares and circles.

To balance the visual weight of a circle and a square, the circle usually needs to be slightly bigger. It also required less spacing to the label:

Image for post
Image for post
The size of the square is %12.5 bigger than the square, yet they look the same

Using a 4px module, we can set our circle two modules bigger than the square, and make it’s distance to label one module less. The result is consistent within the spacing system and is easy to scale.

Formalize Typographic Scale

I usually don’t align text sizes to fit the base module, but instead align only line-height for convenience of spacing.

Image for post
Image for post

In Sketch, rather than conventionally organizing styles by context, I sort them by unique properties, pretty much like it would look like in CSS:

Image for post
Image for post

The formatting is the following:
Size/Line-height — Weight — Color Code (see below)

While it may look messy at first, and probably won’t fit everyone, I found this approach convenient and use it from project to project. It provides a good overview of the styles used throughout the system and makes it easy to maintain, add and merge styles together.

Organize Color Pallets

Image for post
Image for post

Another trick I do often is adjusting color of a text label to fit the color of an icon. Text often feels ligher than the nearby elements of the same color, so it usually needs to be a shade darker:

Image for post
Image for post
A text label next to an icon looks better when it’s a shade darker

It easily becomes a rule with a color pallete organized by brightness.

Create a shared library of UI components

Inspired with Atomic design, and working frequently with React JS, I organize my UI library in a way which will represent the structure of the components in the front-end. Whenever possible, with developers we decide on following a naming conventions (like BEM), allowing dev team to benefit from the design system as well.

Automate updates

Review your design inventory often

If you have any suggestions or found a mistake, feel free to ping me at roman@musatkin.ru

Written by

I design digital products. Born in Siberia, been to 200 cities in 65 countries. St. Petersburg, Milan, Tehran — and now Helsinki. Design Lead at Smartly.io

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store