A screenshot of design system components including buttons and colours.

Design files to Design System: a practical guide.

Adam Ascroft
Inktrap
Published in
10 min readAug 19, 2019

--

Type “design system” into Medium and what do you get? “X,Y,Z the design system, setting up a design system, our design system…” Most of these offer little to no help when it comes to putting an existing project into a design system, or even offer the insight behind how you would tackle such a task.

Unable to find the necessary research or past experiences other agencies have had made this become something of an irritation at Inktrap. Free design systems are great if you’re starting a project from the ground up but for most this isn’t the case, the need for a design system usually arises after the project has grown, evolved and isn’t losing momentum. A design system is an organic thing that grows and develops over time, which makes starting one so much harder.

What is a design system? Is it just a Sketch* document that has some elements a designer can reuse? No?

Design systems bring order and consistency to products. They help to protect the brand, elevate the user experience, and increase the speed and efficiency of how we design and build products.

In this article, we will go through why the need for a design system arises, planning and creating the design system, and then combining the project and design system.

--

--

Adam Ascroft
Inktrap

Designer. Developer. Maker ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​www.adamascroft.co.uk