You know the feeling when somebody restricts you from something and suddenly it’s the only thing you want to do? The same thing happens to designers when they encounter a promissing component in most design systems as Nathan Curtis claimed in his talk “How to make and share more flexible UI components” at last WebExpo. Nathan is a Co-founder and Design Systems Consultant at EightShapes, a worldwide conference speaker, and a passionate Figma component builder. Let’s take a look at how to make design systems more flexible and customisable.
Stop limiting designers’ creativity
Design system users often feel restricted and unable to innovate or explore different variations of components, which can lead to frustration and feeling constrained. Nathan shows it in the example of his personal favourite – the card component. The design systems usually offer a wide range of many different card components with some possible adjustments but what if the designer wants to change more than the property panel offers? This is when the frustration comes in because they want to explore, innovate, and solve their problems but you don’t allow them to.
So what options do designers have in such case?
- Detach and customise the component – This option might offer them desired freedom, yet is very inefficient, inconsistent and they risk drifting away from the design system standards and potential quality.
- Request enhancements from the team – Asking the design system team to add more properties might be a more consistent and precise solution, yet designers’ freedom is limited by design system team’s availability and it’s more of a maintenance burden for the design system.
Composing within a component – the game-changer
Whaaaat that’s possible? Yes, and empowering the designers to compose within the components is actually a win-win solution according to Nathan, because it allows them to be creative, and yet stay within the structure. Here are some of the invaluable advantages:
👌 efficient for the designer
👌 very consistent
👌 no delay
👌 self-service and self-sufficiency for the users
👌 no maintenance cost
Crafting designer’s wonderland
Break the component down into subcomponents (parts of the component like image, text, and actions) and containers (where and how to compose within the component) and encourage them to play around with them. Freedom enables designers to create with minimal constraints, provides a consistent experience when working with smaller system parts, and the power to craft precisely what they envision. But at the same time, freedom needs guidance because you don’t want them to completely drift away from the essence of the original design. So your task as a design system creator is to find the balance between enablement and governance.
Some of the questions to consider before opening the door of creativity to your design system users are:
❔ How are designers supposed to compose within the components?
❔ How can we best expose composable features?
❔ Can designers swap components effectively?
❔ Do designers have needed layout skills?
❔ Are designers excited and confident?
Future is bright with a chance of challenges
As the experiment made by Nathan showed, the initial enthusiasm for freedom in design sometimes gave way to uncertainty. Even seemingly confident designer got some drops of sweat on their forehead when faced with extensive customisation options. For the complete insights of the experiment go and watch the full talk, but here are some challenges your users (and you) might face when giving them more freedom within your design system:
- Mindset shift
- Clicking through
- Prop blindness
- Prop smell
- Code skepticism
- Design ≠ code
- Layout is hard
- Atomic text and layout
When creating design systems it’s not a question of whether to configure the properties or compose the parts, it’s both – configuring common things and composing uncommon things. Remember that the key principles of design systems are efficiency, consistency, satisfaction and quality, and opening up to customisation of individual parts has impact on each one of them.
So if we convinced you to start looking at design systems differently, and dive deeper into the topic press the play button and explore more concrete tips and examples together with Nathan.