A single source of truth: the future of design systems
Tags: designsystems, react, sketch, design
Published: 2018-11-27 12:08:42

---
title: A single source of truth: the future of design systems
published: true
description: Our vision on the future of design systems at In The Pocket
tags: Design systems, React, Sketch, Design
---

Last year at Shift we talked about getting started with design systems: living style guides that are collaborative and code-connected. This concept is gradually finding its way into our workflows and great examples are already out there. At In The Pocket, we are continuously improving our efforts to implement design systems in existing and new projects for our partners, but while doing so, new challenges arise. Usually design systems are initiated and owned by the designer or design team. During the implementation of the designed screens, discrepancies with the original design will start to occur sooner or later.

The approach of making an interaction and visual design for every screen has long been the standard for mobile app design. This approach is clear for clients as well as developers and suits the needs of small products with a short lifespan. Nowadays we build products that are long-lasting, require more maintainability, need scalability and are consistent across a variety of platforms and other products in an organization. These products demand a different and more efficient approach to design and tooling.

The main challenge we are facing now is the fact that tools don’t communicate with each other in a desirable fashion. Details fall through the cracks, and important nuances get lost. There is a huge gap between design and engineering; to make sure we stay on top of the constant changes, a lot of time-consuming manual work still has to be done. When a new designer or developer joins the team, there is a need for a swift onboarding process and good conclusive documentation to get started on the project. Designers should be able to move quickly from ideation to production, and developers should be enabled to dive straight into the code.

> The way we work today can broaden the gap between engineering and design, and the many layers between designing and building are a burden. We can do better. We can work better. - *Alex Schleifer, Airbnb*

When we look at what is happening in the industry, we see other companies facing these challenges as well. Companies like Airbnb have invested a lot of resources in developing specific tools to maintain a design language while enabling them to close the gap between design and development - a gap that has only gotten bigger in the last couple of years. Software development has become a lot more collaborative due to the availability of a plethora of tools, making engineering increasingly productive. In comparison, design tooling has been lagging behind.

When talking about design systems, the main issue these companies are facing is that they often focus on one workflow, one technology, which makes it very hard for that system to match or integrate into other systems. Ideally, they want their system to be entirely decoupled from one specific technology and toolkit, making it ‘plug-and-play’ for any given environment. In the long term, this could be achieved by creating a generic file format from which any design tool or new technology can import, and export to one source of truth.

To support this idea of what is basically one source of truth for design and development, we started building our own system with a cross-competence team. Using our atomic design approach, we analysed which components and patterns we currently have and created new ones to fulfil the need to build a complete product.

This is an excerpt from an article I wrote for Shift, our annual report on the next big trends in digital. It is read by more than 1,000 experts worldwide. Join the conversation and get your free copy today! The article on design systems continues on page 89.

[Download your copy of Shift here!](https://shift18.com/report)

This article was authored by [@behangmotief](https://twitter.com/behangmotief) and [@maartenderoeck](https://twitter.com/maartenderoeck) for [@itpocket](https://twitter.com/itpocket).