Behind the scenes of a design system

Behind the scenes of a design system

In response to requests about how I set up a design system for a team of designers to use, documenting the system guidelines, and responsive design in Sketch, I created this resource.

Attached are two behind the scenes downloads from the Plasma design system. They both feature one of the patterns in the system; a 'segmented card'.

The Sketch download demos a responsive UI, featuring a small subset of form elements and text styles. If you select the text input symbols you'll see that you can change their state, or switch to a different type of input, retaining all your label and data values. It's only the very tip of the iceberg, but I hope it gives some insight into the potential of the full system in Sketch. Here is a preview of the full Sketch file, and here is a preview of the responsive Sketch components.

The PDF download is an excerpt from the documentation for the segmented card pattern. Part of a 125 page document.

Please download, take a look and ask any questions below. I hope it helps :)

Tags

keyboard shortcuts: L or F like Z toggle zoom