Tablr | A design system
The creation of a design system, converting the whole coded version
into reusable “Sketch” components.
What is it about?
Creation of a design system
Tabler is “a premium and open source dashboard template with a responsive and high-quality UI”.
Since it’s been developed to be used with HTML, CSS and React, it does not offer a “design” version.
This means that it does not include downloadable components, a comprehensive library of reusable symbols for prototyping software.
So what I have done is convert all these coded elements into reusable “Sketch” components.
What is the goal?
Convert code into reusable symbols
Tabler is “a premium and open source dashboard template with a responsive and high-quality UI”.
Since it’s been developed to be used with HTML, CSS and React, it does not offer a “design” version.
This means that it does not include downloadable components, a comprehensive library of reusable symbols for prototyping software.
So what I have done is convert all these coded elements into reusable “Sketch” components.
What about the process?
simple breakdown
Style guide
I started this project by creating the style guide which included:
Defining and adjusting fonts: line-height, size, color, alignment, weight…
Creating a color palette: primary, outline, tinting, muted.
Selecting button, input and modal styles: small, default, large, hover, etc.
Symbols for Sketch
I thoroughly followed precise measurements, pixel by pixel and line-height
by line-height.
For recreating the exact paddings and margins of the elements I used a
plugin called “Anima” so that I could match the correct dimensions.
It was tricky to work with the padding of the elements and to create more
than 100 different styles. 🤯
atomic design approach
So to break down the process and make things neater,
we can call out Atomic Design and compare my design system to it.
Showcase
To showcase the design system, I used ZeroHeight, a tool that lets you upload artboards or single elements dynamically from Sketch providing a structured and swift way to display the design system. 😎
the prototype of the project,
live.
Check out the prototype of the project and interact with it.
Designed in Sketch.
Who participated in this project?
The project is part of the work I have done during my internship at Voilaah, a digital agency based in Singapore.
