Componentising design assets for pattern libraries

Pattern Libraries are great and in my experience go a long way to encourage the creation of robust and re-usable design systems. It can however be hard for clients, new to the concept, to visualise the end result without being shown the full page comps they’re used to receiving. Whether you choose to produce page template visuals or use alternative techniques such as Style Tiles, at some point you will need to triage your design assets into individual components.

Charlotte Jackson recently wrote a fantastic article on A List Apart called From Pages to Patterns: An Exercise for Everyone, if you haven’t already, go give it a read. In the article, she discusses the lo-fi approach she & the team at Clearleft use to transition from page designs to components. In essence they print out and cut up each page design to produce isolated patterns that can then be individually coded. Run as a workshop, this exercise is also a great way to educate client’s.

Whilst not as hands on, or as client facing, we’ve been using a similar technique recently at Rareloop. Instead of paper and scissors we’ve turned to our favourite graphic package, Sketch. We start by importing design assets as a flat images into a new Sketch project and then use the Slice tool to draw around anything that we want to treat as a component. There’s no need to be 100% precise and the fact that Sketch allows a slice to be inside or to partially overlap another slice makes the triaging process really quick. We’ve found this approach allows us to rapidly produce very granular component definitions, that can also be easily edited.

Once all the components have been outlined we export all the slices to individual PNG’s, Sketch again makes this really easy. In the past we’ve added all these images to a simple spreadsheet (a form of Interface Inventory), which acts as a basic spec sheet for the front end build. Whilst this has been useful, adding the images one at a time is quite a manual process and means that more time than is necessary is spent on what is essentially a disposable design artefact. More recently we’ve been experimenting with getting into Primer (our open source pattern library software) quicker. One of the cool things about Primer is that you can create patterns programatically using a CLI tool. This allows us to fairly easily script the creation of a pattern for each image we’ve exported.

Primer patterns follow the convention [type]/[group]/[name] which we follow in the naming of our slices. Sketch is clever enough to generate folders during the export process for any slice with a / in the name.

Whether you use a spreadsheet, Primer or just the exported images themselves, the sliced assets provide a convenient reference to start writing code from.