{"id":19527,"date":"2020-03-26T10:00:09","date_gmt":"2020-03-26T10:00:09","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=19527"},"modified":"2020-09-03T11:18:17","modified_gmt":"2020-09-03T10:18:17","slug":"why-design-systems-fail-how-to-make-them-work","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/why-design-systems-fail-how-to-make-them-work\/","title":{"rendered":"Why Design Systems Fail, and How to Make Them Work"},"content":{"rendered":"

This article was previously published in UX Collective.<\/a><\/p>\n

For a short period of time I worked on a design system at WebNL<\/a>, an agency specialised in web design, development and marketing based in the Netherlands. Our design system was aimed at improving the bridge between the design and development of the products we\u2019re making.<\/p>\n

In this blog I will explain how we did this, and why it didn\u2019t work eventually. Hopefully this will prevent others from making the same mistakes we made, even though we\u2019ve learned a lot from them.<\/p>\n

\"\"<\/p>\n

The beginning of the journey<\/h2>\n

When I started working at WebNL, one of my first tasks was to look into the possibilities of improving the transition between design and development of web products. Traditionally this has been a process of developers \u2018copying\u2019 the mock-ups made by designers.<\/p>\n

The designers did their work primarily in Sketch. They translated their vision of the product into static designs. The developers then wrote HTML, CSS, Javascript and PHP to convert these static designs into a working product.<\/p>\n

One of the biggest ambitions inside the company was to find a way to make this process less time consuming as the work was basically done twice.<\/p>\n

\"\"<\/p>\n

So the first step I took was to find out more about ways in which this process of \u2018copying\u2019 could be automated. I looked into automation in Sketch and found out there were plugins that used the Sketch API for this purpose. But the plugins I found lacked reliability and I wasn\u2019t really interested in writing my own Sketch plugin.<\/p>\n

I looked further and discovered that Sketch had recently opened up their file system format so their files could be used in other tools. Every property of every group and layer in the design was now easily accessible outside of Sketch and I quickly realised that I could use this to translate these properties into working products automatically.<\/p>\n

Building the first prototype<\/h2>\n

After my discovery, I quickly made a proof of concept. It was a very simple prototype that could turn a Sketch file into a working website. A Sketch file is basically a zip file consisting of images and json files. The prototype translated these json files into a Javascript array so it could read all the properties stored inside the Sketch files and use it to generate a standard website.<\/p>\n

\"\"\"\"<\/a><\/p>\n

Our developers were using a centralized file in which SCSS variables were stored. These variables controlled visual aspects of elements like colors, typography, buttons, and form elements. I took those elements and build them into a library of Sketch symbols which could be edited by designers. Designers could then use these elements as a starting point for new projects.<\/p>\n

When the visual appearance of these symbols had been changed, I could take the Sketch file and use it to create a new file with variables. Designers could now control these elements in the final product.<\/p>\n