Make your Design Systems Sync Plan Valuable To Your Product and Design Systems Team Needs

1. Frame your Design System’s Ecosystem Problems

Problems: Our files were messy, our handoffs even messier and the documentations became painfully messy as well. It couldn’t be worse to even maintain our Design System and process, which often lacks time in general. Meaning a lack of resources, lack of well-thought documentation and lack of contributing to the Design System itself.

2. Structure, Apply and Check on Your Sync Plan

Hypothesis: What if developers, designers and PMs are also using the same structure within their tools, that is going to form our pattern design library? It sounds so easy, but can lift the process to new heights. A sync checklist can be created and applied in your Design System’s team roadmap.

3. Maturity Comes with a Systematic Sync Plan

Solution: Proposal → syncing the Design System’s tools for an improved workflow, adding in quantitative QA with AB testings, promoting terminology, and last but not least creating a shared vision and ownership.

It builds a meaningful structure that allows Design System teams reaching incrementally growth and maturity upward a horizontal work structure.
It creates a maturity of your tools, that allows understanding a Design System’s value and anticipation for a systematic ecosystem.

We had already iterated on the second generation of our Design System, implemented a well-functioning prioritization and the Design System's tracker. Accordingly, it was important to understand the horizontal and vertical underlying characteristics for our sync plan.

How it works: Recognize patterns and layers

The 4 Layers to be Synced

1. The PM Layer
// Socializing the Design System
2. The Designer Layer
// Evolving and syncing the Design System and language
3. The Design System’s Team Layer
// Adding quantitative value with a synced DS test plan
4. The Developer Layer
// Sync documentation structure

The audit of recognizing patterns and similarities for a sync plan and possible sync checkpoints.

Takeaway: Anticipate that as our Design System grows, it made sense to sync our Design Systems Principles, The Design Systems Motions, and the Design Systems Language (Patterns) which come with documentation.

Create a checklist according to your Design System and sync at least three pillars: DS Principles, DS Motion, and DS Patterns (Language)

Kept us on track! The Sync Plan Checklist of our Design System, which is well functioning when it creates the exploration/iteration culture. (1) Prioritization: the DS second generation needs to be synced up with (2) the Design Tools, (3) The DS Test Plans, and (4) The Development Cycle which needs a DS synced documentation.

Three hands-on examples based on our sync plan and how to achieve overall maturity in our tools:

The FIGMA Structure and Progress Tiles Sync (20 minutes)

The Design Layer sync: We synced our FIGMA structure and progress files to the three common pillars: (1) Design Systems Principles, (2) Design Systems Motions, and the Design Systems Language (Patterns).

The FIGMA DS UI Kit Sync (1–2 weeks)

The second example for the Design Layer sync: We synced our FIGMA DS UI Kit according to the three pillars: (1) Design Systems Principles, (2) Design Systems Motions, and the Design Systems Language (Patterns). The items are censored due to confidential reasons.

The Storybook (DS Documentation) Sync (1 month)

Last example for this read: We synced storybook (documentation) to the three pillars as well: DS Principles, Motions, and Patterns.

Key Takeaways:

We did not sync the layers of the Design System’s team structure earlier because we thought it was just a lack of socializing the Design System’s terminologies and values that created flaws within our DS process.

Before → Different structures within our tools led to outdated naming conventions, hand-offs were nightmares, and did not link back to our design principles and Design System’s patterns at all. It wasn’t structured nor cohesive enough.

Finally, as everyone used the same synced structure within their tools, the terminology issues could be settled easily.

Turns out all we needed was a syncing bridge from our tools to our Design System.

Major Takeaway: Just Sync It!

How was your coffee?☕️ Hope to see you again in my next article. You can also catch me on linked-in. Drop me a message as I like to strengthen my curiosity centred design and research network. Love hearing your Design System’s stories. Tschüss, bye and let’s stay curious!