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

0•

디자인 도구

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

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.

주요 기능

01Multi-format export including CSS, SCSS, TypeScript, and JSON

02Bidirectional Figma-to-code synchronization via Figma REST API

03Interactive conflict resolution for merging competing token updates

04Automated drift detection to identify discrepancies between design and code

05Style Dictionary integration for advanced token transformation and naming

060 GitHub stars

사용 사례

01Auditing large-scale projects for out-of-sync design system values

02Updating codebase styles automatically when designers modify the Figma library

03Pushing developer-created tokens back to Figma to maintain design system parity

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add flight505/storybook-assistant design-token-sync

For use in Claude.ai and ChatGPT

Download Skill