Bidirectional Design Token Sync

Synchronize design tokens bidirectionally between Figma and code with drift detection.

9|2|Updated Jan 9, 2026

Search Tags:#design tokens #drift-detection #code #conflict-resolution #design-system #Figma #bidirectional-sync

Ready to run

npx skills add https://github.com/flight505/storybook-assistant --skill bidirectional-design-token-sync

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: Bidirectional Design Token Sync
Source: https://github.com/flight505/storybook-assistant/tree/main/skills/design-token-sync
Command: npx skills add https://github.com/flight505/storybook-assistant --skill bidirectional-design-token-sync

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @figma/rest-api-client, style-dictionary, and includes scripts (resource) and references (resource) components.

What problem does it solve?

Keeping design tokens synchronized between Figma and your codebase is error-prone and time-consuming when changes occur in either environment. This skill provides bidirectional sync with automatic drift detection and conflict resolution to maintain a single source of truth for your design system.

Core Features & Use Cases

Bidirectional sync: Changes in Figma propagate to code and updates in code propagate back to Figma with conflict resolution.
Drift detection & intelligent merging: Detect differences and apply safe, deterministic updates.
Tooling integration: Compatible with the Figma API and Style Dictionary to generate CSS, SCSS, and TS tokens ready for production.

Quick Start

Step-by-step guidance:

Configure your Figma file URL and access token; choose token location (Local Variables or Shared Variables).
Run the initial sync: npm run tokens:sync.
Review drift, apply changes, and commit updated tokens and generated assets.

Frequently Asked Questions about Bidirectional Design Token Sync

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

FAQPage Schema

How do I keep design tokens in sync between Figma and code?▼

Bidirectional design token sync automatically propagates changes between Figma and your codebase. It detects drift and applies conflict resolution to maintain a single source of truth for your design system.

How does drift detection work for design system tokens?▼

Drift detection identifies differences between Figma variables and code token files. The skill applies safe, deterministic updates to intelligently merge changes without overwriting unsynchronized edits.

Can I generate CSS and SCSS tokens from Figma variables using Style Dictionary?▼

Yes, this skill integrates with Style Dictionary to generate CSS, SCSS, and TS tokens from Figma variables. It outputs production-ready assets after synchronizing the design tokens.

What's the best way to resolve conflicts when updating design tokens in both Figma and code?▼

Bidirectional sync provides automatic conflict resolution by applying deterministic merge rules. It ensures safe updates when design tokens are edited simultaneously in Figma and code.

Do I need the Figma REST API to synchronize local and shared variables with code?▼

Yes, the skill uses the Figma REST API client to access Local Variables or Shared Variables. Configuring your Figma file URL and access token is required to run the synchronization.