With this design system, I was able to bring order to the chaos that existed in the company with the design specification, versioning, and sources of truth. The developers found it handy and useful, and it setup the foundation for developing components.
The Design System I set up in Autotrader and Carsguide was a revised version on the Design System I did in News Corp, which I call Experience Design General Architecture Repository. This one had 5 library files and several wireframe files:
📕 Styles.sketch📕 Assets.sketch📗 Elements.sketch📘 Blueprints.sketch📙 Components.sketchT-S Name.sketch (Wireframe files)
This diagram attempts to explain how files are interconnected between them.
The most elemental file in the design system is the 📕Styles.sketch file. This file could even potentially have no artboards inside (however they are useful as a display of all the styles included in the file). The Styles.sketch is directly connected to Assets.sketch and Elements.sketch which helps icons and shapes in the design system to use the styles in them.
A preview of all layer styles included in this file.
A preview of all font styles included in this file.
There are two kinds of pages in 📕Assets.sketch. Icons and Images. For example. Autotrader's File was organised in four different pages:
A page inside the assets file with car photos in different sizes.
A page inside the assets file with ads of different sizes.
A page within the assets file with icons and badges.
Elements.sketch is where the magic starts happening. It inherits 📗Styles.sketch and has access 📕Assets.sketch. And it contains basic shapes like:
Squared, semi-rounded and rounded
And also
