Project - Figma Variables Token Sync
Figma Variables Token Sync
Project Description
A custom pipeline that syncs a 3-brand, 2-mode design token system from Figma Variables to code via the Figma Variables API. It replaced the licensed Token Studio plugin with a fully owned workflow that outputs validated JSON token files for downstream builds.
Employer
Cisco
Industry
Enterprise Design / Design Systems
Project Type
Design Token Pipeline
Duration
2 months
The Problem to Solve
The token workflow depended on a costly, licensed third-party plugin:
Token Studio sat in the critical path — adding cost and recurring issues.
Per-seat licensing locked out team members who needed access.
No fully owned sync between Figma Variables and code for the multibrand system.
How We Tackled the Problem
Discovery & Research
Audited the Token Studio workflow and the 3-brand / 2-mode token architecture to map what the plugin handled and where it fell short on cost, access, and reliability.
Strategic Planning
Designed a pipeline on the Figma Variables API as the single source of truth that removed the licensed dependency entirely and generates clean JSON for downstream consumption.
Design & Development
Built readiness checks, hash-based change detection against the API response, multi-mode variable-collection parsing, JSON schema validation (AJV), and JSON token source generation for the multi-brand design token build system.
Launch & Support
Shipped a reliable sync between Figma variables and code that aligned the release process for both design and engineering.
The Solution
Native Figma Variables → JSON sync via the official API — no third-party plugin.
Hash-based change detection — only syncs when tokens actually change.
Multi-mode collection parsing with schema validation across 3 brands and 2 modes.
Impact & Outcomes
Eliminated Token Studio — removed licensing cost and unblocked the whole team.
Full ownership of the token pipeline, end to end.
Reliable, validated Figma → code sync, ready for CI/CD automation.