A Tool That Closed the Gap Between Figma and Code.

Role

Product Designer

Type

Side Project

Tools

Figma · Vercel · Claude Code

Timeline

4 weeks

Year

2025

Overview

Token drift is one of the most common and invisible problems in design-dev collaboration. Designers update values in Figma, engineers re-enter them manually in code, and mismatches pile up silently until half a sprint is lost chasing them down.

Syncro is a lightweight dashboard that imports JSON token files from Figma and your codebase, surfaces discrepancies, and tracks version history so both sides always work from the same source of truth.

Problem

Small mismatches. Big consequences.

Every design iteration required manually re-entering token updates into code. Designers updated colors, spacing, and typography in Figma but engineers had no way to know what changed, what the old value was, or whether their code matched. Half a sprint could be lost chasing down mismatches that should have been automatic.

How might we

How might we create a transparent, automated layer that syncs design decisions directly with code with no translation friction?

Research

Finding the gaps.

I interviewed three design-dev teams and audited two live products to find where the handoff breaks. Three patterns emerged consistently across every team.

“Great handoffs happen when design and development stay in sync.”

Andres Umanzor — Senior Front-end Engineer

“When collaboration went clearly, we don't just build fast, we build better.”

Douglas Fernandes — Fullstack Engineer

Ideation

How do we sync design and code?

Before building anything, I mapped out three possible approaches to the token sync problem. Each solved part of it. Only one solved all of it.

Option 1

Manual API Bridge

Connect Figma's API directly to the codebase. Too tightly coupled — any change to either side would break the connection. Not scalable.

Option 2

Direct Code Plugin

A Figma plugin that writes directly to the codebase. Excluded engineers who never open Figma. Half the team would never see it.

Option 3

Intermediate Schema (JSON)

A neutral file format both sides could read and write independently. Human-readable, machine-parseable, easy to version in Git. Neither side had to change their existing tools.

token-schema.json

{
  "color-primary": {
    "value": "#E52E00",
    "type": "color",
    "description": "Primary brand color"
  },
  "color-surface": {
    "value": "#EFEFED",
    "type": "color",
    "description": "Surface background"
  },
  "spacing-base": {
    "value": "8px",
    "type": "spacing",
    "description": "Base spacing unit"
  },
  "font-body": {
    "value": "Switzer, sans-serif",
    "type": "typography",
    "description": "Body font family"
  }
}

JSON won because it acts as a shared language between design and engineering without coupling either side. The schema became the contract.

Solution

Syncro in action.

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

Design Decisions

Why we built it this way.

The summary page came from engineers, not designers.

Early versions of Syncro only showed the raw diff. Engineers kept asking the same question in feedback sessions: is the system healthy overall? They didn't want to count mismatches manually. They wanted a single number. The summary page was built entirely around that insight.

Rollback with sign-off.

Rolling back a token set affects every component that uses those tokens. Visibility alone wasn't enough. Adding a mandatory reason and sign-off before confirming creates an audit trail and forces a moment of intentionality before an irreversible action.

Token discrepancies need to be seen, not just read.

Showing hex values as plain text forces designers to mentally translate what a drift looks like. The token detail view renders the actual color swatch for both Figma and code values side by side, so the difference is immediately visible. Version history shows when the drift happened. Usage shows how many places in the product are affected.

Share report.

Token sync isn't just a designer or engineer problem. It's a team problem. The share modal makes the health report easy to distribute to Slack, email, or Notion without leaving the tool. Keeping the whole team informed shouldn't require a separate workflow.

Outcome

Clarity at the speed of design.

The prototype was tested during standups with designers, interns, and engineers. Feedback across all three groups was positive, and the tool was greenlit for development by the XQ engineering team.

2hrs → 5min

Token sync time per iteration

Greenlit

Presented to XQ engineering team and approved for development

Reflection

What I learned.

“I had the pleasure of working with Rhythm this summer during her internship as a Product Designer at XQ, and I can't say enough good things about her. She stood out for her clarity of communication, on par with designers many years her senior, and brought fresh thinking and initiative to everything she touched. Rhythm is a rare talent, creative, thoughtful, technically curious, and a joy to work with. Any team would be lucky to have her.”

Mike Cohen

Lead Engineer, XQ Institute

Bridging design and engineering is about communication as much as tooling.

Designing Syncro made clear that successful collaboration depends on aligning how both sides think, not just how systems connect. The JSON schema wasn't a technical decision — it was a communication decision.

Engineers valued clarity and control over automation.

Iterative feedback showed that visibility into changes mattered more than full automation. Designers needed to feel accountable for what changed, not like the system was making decisions for them.

Designing for trust, not just efficiency.

The more transparent the system became through summaries, versioning, and rollback, the more confident the team felt in adopting it. Trust is a design outcome.