Is it possible to automate the sync process?

Yes, you can configure the skill to trigger syncs on file saves or integrate it into your git commit hooks to ensure tokens are always current.

Can I customize the output format for my specific framework?

Yes, the skill utilizes Style Dictionary, which can be configured to generate tokens for CSS, SCSS, JavaScript, TypeScript, iOS, and Android.

Does this skill require a specific Figma plugin?

No, it primarily uses the Figma REST API and a personal access token to sync data directly between Figma files and your local environment.

What happens if a token is changed in both Figma and the code simultaneously?

The skill includes a conflict resolution workflow that detects the overlap, presents both values with timestamps, and allows you to choose which source of truth to keep.

Bidirectional Design Token Sync

Name: Bidirectional Design Token Sync
Author: flight505

byflight505

Herramientas de Diseño

Synchronizes design tokens between Figma and codebases with automated drift detection and conflict resolution.

Acerca de

This skill bridges the gap between design and development by maintaining a unified source of truth for design tokens across your entire ecosystem. It allows teams to automatically extract variables and styles from Figma to generate code, or push developer-defined tokens back to Figma via API. With built-in drift detection and intelligent conflict resolution, it ensures that colors, typography, and spacing stay perfectly aligned, preventing technical debt and design inconsistency as systems scale.

Características Principales

Multi-format export including CSS, SCSS, TypeScript, and JSON
Bidirectional Figma-to-code synchronization via Figma REST API
Interactive conflict resolution for merging competing token updates
Automated drift detection to identify discrepancies between design and code
Style Dictionary integration for advanced token transformation and naming
0 GitHub stars

Casos de Uso

Auditing large-scale projects for out-of-sync design system values
Updating codebase styles automatically when designers modify the Figma library
Pushing developer-created tokens back to Figma to maintain design system parity

Acerca de

Características Principales

Multi-format export including CSS, SCSS, TypeScript, and JSON
Bidirectional Figma-to-code synchronization via Figma REST API
Interactive conflict resolution for merging competing token updates
Automated drift detection to identify discrepancies between design and code
Style Dictionary integration for advanced token transformation and naming
0 GitHub stars

Casos de Uso

Auditing large-scale projects for out-of-sync design system values
Updating codebase styles automatically when designers modify the Figma library
Pushing developer-created tokens back to Figma to maintain design system parity