Bidirectional Design Token Sync
CommunityKeep design tokens and code perfectly in sync.
Design & Creative#design tokens#drift-detection#code#conflict-resolution#design-system#Figma#bidirectional-sync
Authorflight505
Version1.0.0
Installs0
System Documentation
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.
Dependency Matrix
Required Modules
@figma/rest-api-clientstyle-dictionary
Components
scriptsreferences
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: Bidirectional Design Token Sync Download link: https://github.com/flight505/storybook-assistant/archive/main.zip#bidirectional-design-token-sync Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.