Component Library & UI Kit
Design process to on structuring symbols and overrides in Sketch
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.
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.
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.