Syncro

Overview

A tool that cut token sync time from 2 hours to 5 minutes.

Syncro is a design token sync dashboard I designed and prototyped at XQ Institute. The decisions I made during this project — building a dashboard over a plugin, adding a side-by-side diff view, and introducing rollback after engineer feedback — directly shaped what got built.

Outcome

Clarity at the speed of design.

Token sync time dropped from ~2 hours to under 5 minutes per iteration. The prototype was presented to the XQ engineering team and greenlit for development.

Background

Living between two worlds.

As both a designer and CS student, I lived the friction of design-dev miscommunication firsthand. Syncro was my attempt to build something for people who care about precision on both sides.

The Problem

Small mismatches. Big consequences.

Every design iteration required manually re-entering token updates into code — slow, error-prone, and invisible to both sides.

The token handoff workflow before Syncro.

Research

Finding the gaps.

After interviewing, these were the 3 patterns which emerged:

Ideation

How do we sync design and code?

Solution

Syncro in action.

A lightweight dashboard that imports JSON token files from Figma and your codebase, visualizes discrepancies, and tracks version history — so designers and engineers always work from the same source of truth.

Walkthrough: importing and comparing design tokens in real time

Iterative Feedback

Built from engineer input.

Visual diffs alone weren’t enough. Through iterative feedback sessions with engineers, two critical needs emerged — a clear summary of what changed, and the ability to safely roll back token updates.

Summary Page

What changed and where.

Engineers needed clarity, not just visuals. The summary page surfaces exactly which tokens changed, what the old value was, and what it became — so nothing gets lost in the diff.

Version History

Roll back with confidence.

Inspired by GitHub’s version control, the rollback feature lets teams revert token updates safely — adding transparency and trust to the syncing process.

Engineering Collaboration

Built with engineers, not just for them.

I partnered closely with the lead engineer to align on architecture and data flow from day one. This wasn’t a hand-off — it was a co-build. The front-end was prototyped using Claude Code and v0.dev, allowing me to move from design to working prototype in hours rather than weeks.

JSON Schema

Co-defining the contract.

The lead engineer and I sat down and co-defined the JSON token schema before a single line of code was written. Getting alignment on the data structure upfront meant the dashboard, the Figma export, and the codebase all spoke the same language from day one.

Starting Point

The audit.

It started in standups. Week after week, the same friction — a designer had updated a color, an engineer hadn’t gotten the memo, and half a sprint was lost chasing down mismatches. I decided to look at what tools already existed before building anything.

Every tool solved one side of the problem. None solved both. That gap became Syncro.

Process

Defining the schema.

The first real design decision wasn’t visual — it was architectural. Choosing JSON as the shared language between Figma and code meant both systems could read and write the same format without being tightly coupled.

{
  "color-primary": {
    "value": "#FE5F55",
    "type": "color",
    "description": "Primary brand color"
  },
  "color-primary-dark": {
    "value": "#8584E8",
    "type": "color",
    "description": "Primary brand color — dark mode"
  },
  "spacing-base": {
    "value": "8px",
    "type": "spacing",
    "description": "Base spacing unit"
  },
  "font-body": {
    "value": "Switzer, sans-serif",
    "type": "typography",
    "description": "Body font family"
  }
}

Human-readable, machine-parseable, and easy to version in Git — JSON became the neutral translator between Figma variables and code constants.

Retrospective

What I learned.