skills.rest
flight505
flight505COMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/flight505/storybook-assistant --skill bidirectional-design-token-sync
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
theodrosyimertheodrosyimer

figma-sync

Synchronize design tokens between Figma and local DTCG JSON files.

Community
Intermediate
rp4rirp4ri

design-token-extractor

Extracts design tokens from CSS, SCSS, JavaScript, and Tailwind config files into CSS custom properties, Tailwind config, and Style Dictionary JSON.

Community
Advanced
dylantarredylantarre
38

style-dictionary

Transform design tokens into CSS, SCSS, Swift, and Android XML outputs.

Community
Intermediate
paolomozpaolomoz
3

figma-token-sync

Synchronize design tokens bidirectionally between CSS custom properties and Figma variables.

Community
Advanced