DESIGN PROCESS

Component Library & UI Kit

Design process to on structuring symbols and overrides in Sketch

ROLE
UI/UX Designer

EMPLOYER
Freelance

CLIENT
Several

CATEGORY
UI Design, UI Architecture

T&T_logoT&T_logo

THE ISSUE
After years of building style guides and UI Kits, working in a few digital transformation teams, experience led me to realise the inefficiency to which many companies operate due to the design files and symbols being poorly organised, delaying development

 

 

IDEA
Build an effective file, component structure and nested symbols to increase scalability for any product, allow atomic design principles to quickly cascade apply changes at the design layer feeding seamlessly with development and QA.

Neatly Organized

Each symbol, piece or component is neatly structured and organized.

Nested Symbols and Overrides

Override system based on nested symbols, following atomic design principles

Dynamic resizing

Override system based on nested symbols, following atomic design principles

Component Anatomy

Having Sections with Nested Symbols creates many combinations, resulting in consistency, flexibility and scalability for any project at an early stage.

Sections

Here is a Body Section, it can be a chart or a table. We simply select the Section Symbol and override it with other symbols in the library.

Component Combinations

Having Sections with Nested Symbols creates many combinations, resulting in consistency, flexibility and scalability for any project at an early stage.

Source of all truth

A component serves as a source of truth to a Developer and a Designer. Using tools like Zeplin, a developer can inspect signed off Components and Pieces, create a live and reactive component and have them QA’d. A designer can use components to create flexible layouts at the Sketch level. Since a live component is QA’d against the source of truth living in Zeplin, lacking on pixel perfection becomes inconsequential.

UI Kit

Atomic Symbols

Essentially all design is made of shapes and typography. Having a shape as a symbol with element overrides is an easy system to maintain in the long run.u0003Here is an example e:  A Symbol that is 4px rounded square, in a disabled state, the original colour is cyan, 0% tint, 0% shade, 04/00 Elevation.  

Table System

Table System
Every cell is a symbol, characters cells align to the left and values align to the right, can have 1 or 2 lines. Every cell has nested symbols, such as a background, dividers, icons so we can map cell states. 


Tables can be dense to pack lots of data or normal, they have a defined structure: The top row is the header row, the bottom row is a footer row everything in between is a content row. A table could have more than one header and footer rows.