Your UI kit is not a design system
If I showed you our company’s new logo, and asked you to update it on all the elements where it needs to be displayed, you’d ask me to supply the logo in the necessary formats. It would be unreasonable to expect you to go and redraw the logo in the correct format, then apply that process for each and every application. The logo is a brand asset that should be supplied to the implementation team in order to make the updates.
Creating a UI kit system in Sketch, XD or Figma and declaring it a fully-fledged design system is therefore not a design system in it’s true sense . Is the expectation for each and every development team to code up each component for each and every application? How would you ensure it was applied in a consistent and accurate way? Just like a logo needs to be supplied to make an accurate update on a brand element, design systems need to be delivered with code, not just a UI kit.
“A design system is not truly realised without the code to support it.” — Shane P Williams
Tell a complete story
Design systems are often represented by UI kits, supported by good UX and UI principles. It is therefore a visual extension of the brand. These help designers design for apps, websites, etc. But having a design, does not mean you have built an application, things still needs to be built to create an app. This is dependent on code, meaning design is only half the story.
Handing over a design system as a UI kit is similar to handing over a style guide on how to place a logo, it’s relative size or scale, and how much white space to include around the logo. These are the instructions, but they are not the logo. You still need a logo file to facilitate its implementation. The same goes for design systems. Just like you need to hand over a logo file, a UI kit does little to help with the building of an application without the accompanying code.
“Design is only half the story, developers also need to consume your design system.” — Shane P Williams
Like a brand style guide that supports the implementation of a logo, a design system should also include instructions of how it should be applied.
Building a complete design system
Like in the logo example, you’d be asking for the logo to be supplied in the necessary formats (this could be a jpg, png or a svg for example), the same goes for the code you supply in your design system. Depending on what you are building with your design system, you may need to supply the different code formats for wide spread adoption across an organisation (for example, HTML, CSS, SaSS or React code snippets).
This is also why it is so important to have developers as part of the design system team. Design and code need to live together in order to have a complete design system.
While I may not call a UI kit a fully fledged design system, it’s a great starting point :)
What do you think? Can we really keep calling UI kits design systems?
Building a design system, where to start?
I’ve written an entire series to help, check it out here:
Part 1 — First things first
Part 2 — Colour
Part 3 — Size and spacing
Part 4 — Typography
Part 5 — Bonus elements
Get social
Your UI kit is not a design system was originally published in Bootcamp on Medium, where people are continuing the conversation by highlighting and responding to this story.
More articles...
