What happens if my Figma variables use aliases?

The PULL operation intelligently resolves variable alias chains up to 10 levels deep to ensure the final CSS output contains the correctly computed values.

What operations does Figma Token Sync support?

It supports three primary operations: PUSH (sending CSS to Figma), PULL (importing Figma changes to CSS), and DIFF (comparing the two for drift detection).

What permissions are required for the Figma API?

You need a Figma Personal Access Token with 'File content' and 'Variables' scopes, along with the specific File Key from your Figma design URL.

Can I use this skill in my CI/CD pipeline?

Yes, the DIFF operation is designed for CI; it generates a checksum-validated lock file and returns an exit code 1 if any drift is detected between Figma and your code.

How does it handle responsive design breakpoints?

The skill maps specific CSS media query blocks to Figma variable modes based on your figma-config.json file, allowing for multi-mode token support.

Figma Token Sync

Name: Figma Token Sync
Author: paolomoz

bypaolomoz

•

디자인 도구

Synchronizes design tokens bidirectionally between CSS custom properties and Figma variables to maintain a unified design system.

Figma Token Sync bridges the gap between design and development by automating the management of design tokens. It provides a robust workflow for pushing local CSS variables to Figma, pulling designer-led changes into stylesheets, and detecting drift within CI/CD pipelines. By mapping responsive breakpoints to Figma modes and handling complex color conversions and alias resolution, this skill ensures that your codebase and design files remain perfectly aligned throughout the development lifecycle.

주요 기능

01Deep alias resolution to maintain design system logic and references

02Automated mapping of CSS media queries to Figma variable modes

03Intelligent token classification for colors, dimensions, and typography

04CI-ready drift detection (DIFF) with exit code support and detailed reports

05Bidirectional synchronization (PUSH/PULL) between CSS and Figma Variables API

062 GitHub stars

사용 사례

01Verifying design-to-code alignment as a blocking step in deployment pipelines

02Propagating programmatically generated brand tokens from CSS to Figma design files

03Updating local stylesheets automatically when designers modify variables in Figma

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add paolomoz/skills figma-token-sync

For use in Claude.ai and ChatGPT