A Tool That Closed the Gap Between Figma and Code.
Role
Product Designer
Type
Internship
Tools
Figma · Vercel · Claude Code
Timeline
6 weeks
Year
2025
Overview
During my internship at XQ Institute, one of the most persistent friction points I noticed was token drift. Designers updated values in Figma while engineers re-entered them manually in code, and mismatches piled up silently until half a sprint was lost chasing them down.
I partnered with the engineering team to build Syncro: a lightweight dashboard that imports JSON token files from Figma and the 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
Option 2
Direct Code Plugin
Option 3
Intermediate Schema (JSON)
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 both sides could read independently. Neither design nor engineering had to change their tools. 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. 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.
01
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.
02
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.
03
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.
“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
