10 tips for a sustainable component library as a part of your design system
It’s been a year since we designed our web design system, and it has been our friend through thick & thin — massive features redesigns, intense deadlines, refactoring UI, communication gaps, etc.
It’s time we share what has worked for us —
What is it about a good design system that will stand the test of time?
— a quick recap of why? our own version of 3C’s
— our 10 must-haves for a design system
what for who & why
- consistency for users
intuitiveness via repeated patterns increases efficiency - context for company
engineering efficiency & improved quality of implementation - control for design team
adaptable to change & growth; discipline due to set principles
I suggest, if you want the above, have the below — 10 checkpoints for before, during, and after designing a component library for a sustainable design system.
#1 user interface design values
The top 5 things you want anyone who interacts with your UI to say.
eg. — “omg! this is so FUTURISTIC” “I love how everything looks so CLEAN & MODERN” “It’s so SIMPLE, literally anybody could use it”
#2 product based architecture
Brad Frost might work for some, but not for many, mainly when there isn’t a systematic progression of complexity within components.
Thus, your design system should be reflective of the patterns used in your product.
Between popovers, popups, modals, boxes, etc. unapologetically pick what works for you
#3 grouping by specification
Find similarities within the lowest common denominator amongst the components i.e. height, padding, elements, etc.
Group them together to leverage global alignment and spacing consistency while designing pages.
#4 complete master components
Identify instances of the same component and create a master.
This will help designers know what all there is to play with, build on what you already have in the library by simply adding or subtracting elements
#5 building blocks
A no-brainer what every design system begins with but rarely understood as the army that protects and upholds your UI values.
Define the smallest property here: colour codes and gradients; text size, weight, line-height letter-spacing; inner and drop shadows; inner and outer spacing; border radius, thickness and dashes, etc.
#6 tokenise everything
Embrace these key-value pairings as the reins of your horse to communicate decisions, instil discipline while being robust enough to shift courses.
This is the face of your library, and not the blocks that construct designs.
#7 developer-friendly nomenclature
Befriend how developers work.
#8 linked handoff
Communicate all of the above in your handoff file in the same place via a single click.
Which component is this? What component is this a part of? Are there other components like this? Which color, text, and shadow tokens are being used? Are there any overrides?
#9 sketch test
If every element has its own name place animal thing could you simply point to it, instead of construct?
Sketch out a complete flow and spot the missing pieces of communication, ideally, there should be none.
#10 leverages Figma
If you do this correctly, using the whole jingbang — nested components, variants, auto-layout, resizing, naming pages to variants to styles with respect, your team would be thanking you every day because of the time & effort you saved them.
However, this will make it cumbersome to edit or add to the library, but in time you’ll understand its worth.
#11 intuitive to grow
This is the true test of time — every new idea should have a known place in the system even before its’ birth, just like us.
Allow your designers to design for context and not necessarily consistency because your system permits seamless edits, additions, and subtractions.
Crux Intelligence is a Google-like search-based AI platform that helps diagnose, predict, and prescribe what will happen in your business.
Our vision is to put AI in the hands of every business user. We do so by making data analytics ruthlessly intelligent and simple!
