skills.rest
Valyay
ValyayCOMMUNITY
Explore all skills by this author →
GitHub

sync-tokens

Reconcile design tokens across Figma Variables, DESIGN.md, and code.

Updated Mar 26, 2026
Search Tags:#figma#diff#code#design-system#token#design-tokens
One-click install
npx skills add https://github.com/Valyay/vibe-design-kit --skill sync-tokens
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sync-tokens
Source: https://github.com/Valyay/vibe-design-kit/tree/main/skills/sync-tokens
Command: npx skills add https://github.com/Valyay/vibe-design-kit --skill sync-tokens

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Reconcile design tokens across Figma Variables, DESIGN.md, and code by performing a deterministic three-way diff, surfacing in-sync tokens, drift, and gaps, and enforcing a review-before-write workflow to prevent unintended changes.

Core Features & Use Cases

  • Detect and collect tokens from Figma, DESIGN.md, and code sources, then compare them three ways.
  • Generate a structured reconciliation report with statuses for each token (in sync, drift, new, removed) and guidance on next steps.
  • Propose changes as snippets and require designer approval before updating DESIGN.md or code, while maintaining an audit trail via _sync-log.md.

Quick Start

Provide a Figma URL or paste your DESIGN.md and code token sources to start a reconciliation.

Frequently Asked Questions about sync-tokens

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I keep design tokens in sync across Figma and code?▼

To keep design tokens in sync, this Skill performs a deterministic three-way diff across Figma Variables, DESIGN.md, and code, generating a drift-aware reconciliation report that requires designer approval before applying changes.

What is a three-way diff for design token reconciliation?▼

A three-way diff for design token reconciliation compares tokens collected from Figma Variables, DESIGN.md, and code sources simultaneously to compute per-token statuses such as in sync, equivalent, drift, new, or removed.

How do I detect token drift between Figma Variables and my codebase?▼

To detect token drift, provide a Figma URL or paste your DESIGN.md and code token sources to start a reconciliation that computes per-token statuses and proposes exact code or design changes as review snippets.

Can I apply design token changes to code automatically without designer approval?▼

No, this Skill enforces a review-before-write workflow that proposes changes as snippets and requires designer approval before updating DESIGN.md or code, preventing unintended modifications to your design system.

Does this design token sync tool maintain an audit trail for changes?▼

Yes, design token sync maintains an audit trail via _sync-log.md, recording the reconciliation process and proposed changes while presenting a structured report with guidance on next steps before any updates are applied.

What are the limitations of automated design token reconciliation?▼

Automated design token reconciliation requires a review-before-write workflow and cannot apply changes without designer approval, meaning it surfaces drift and proposes snippets rather than directly overwriting Figma Variables or code sources.

Related Skills

Explore More Design & Creative Skills→
alexandremendoncaalvaroalexandremendoncaalvaro
728

ad-design

Bootstrap DESIGN.md from design tokens into YAML frontmatter and Markdown rationale.

Community
Advanced
ValyayValyay

kb-lint

Audit knowledge-base documents against code for orphans, drift, and missing entries.

Community
Advanced
dylantarredylantarre
38

figma

Synchronize design tokens between codebases and Figma bidirectionally via API workflows involving Tokens Studio or Variables.

Community
Intermediate
Dragoon0xDragoon0x
4

sync

Export code-defined design tokens to a Tokens Studio-compatible figma.tokens.json file.

Community
Intermediate