Now, on to Libraries!
We, designers, love tweaking things. We spend countless hours building, re-building, and polishing designs. It seems like nothing can stop us when we’re deep in our Creative Process.
But design isn’t only about building new things.
In Digital Design, we often compose new complex designs out of re-used, existing components. That’s why it’s so critical for our component building blocks to be consistent and usable in our design tools.
A few decades ago, design and the creative process was much more fluid; but digital products that we’re creating now are much more dynamic than static text, shapes, and images.
Components in real websites and apps must include reusable properties like borders and fills, transitions, and timings, color palettes, form elements, variables, data…
So why have these digital building blocks not yet made it into modern design tools’ libraries?
Discovering Libraries ↩︎
The concept of Libraries (or, ‘Design Systems’) came originally from engineering, when developers started reusing chunks of code to speed up their work and designers followed suit.
But it’s worth asking, how does this concept really adapt to design?
The two mediums are very different. More different in their nature, we believe, than some today would like to admit.
Code isn’t visual, it’s clunky to manipulate, and it’s hard to truly immerse into a designer’s Creative Process in code. We can’t believe this is how we should really work as designers.
And yet, our stagnated print design tools never fully embraced comprehensive libraries for websites and apps…not really. Instead, they tried to duct-tape SVG-symbol solutions onto old our design tools.
In the libraries of existing tools, we’re still using the SVG-symbol building blocks, from print design. Well, SVG symbols with perhaps some hacked re-usable text styles on top at least.
We can’t design real dynamic products this way; without reusable properties, element states, re-usable interactions, data, and so on…
It’s long-past time for design Libraries that fit the way digital products actually work.
Rethinking Digital Components ↺
It’s time we make digital components first-class citizens in our design tools. Truly incorporate all the nuts and bolts used to create digital products, into our design tool’s Libraries.
Every Library Should Start With The Basics ⇲
Create a single color component, use that color component to create other higher-level properties and element components. Then modify that base color later, at any time, to auto-update properties or elements which use it.
Want to override something? No problem, if every instance is also a Master. Forget about meaningless switching between your design and component pages, or tracking down the Master instance inside your file.
Modelling Libraries like this, which is just how they actually work in the real world, lets us override any component (or any of its properties) on the spot, to edit components fast and easy.
Every property, responsive layout element, variable and even data are now components in Digital Design. We shouldn’t have to manually tweak things like border-radius, opacity or fill colors across our designs.
Even transition timing can be a component now. Maybe you did user-testing, and noticed that fifty different transitions in your app need a tweak? Just edit one transition-timing component — done.
By modelling components this way in our design tool — which again, is just how they actually work in the real world — we can assemble and deeply nest components into the most complex designs we can imagine, at lightning speed. Then edit it just as fast.
These are Libraries, the Digital Design way.
Component Libraries, broken-down in our design tools to reflect exactly how they’re broken down in the real, digital world.
Oh, and of course sharable and transferable as well. These are team libraries after all, and we need to share, collaborate-on, and version our Libraries across our team quick and easy.
Across projects, or organizations – wherever you need your Library. Branch, collaborate in the real-time, then merge changes into Master.
All without code, engineering resources, and hassle.