Skills
.Work. You
Rest

figma-token-sync

Community

Sync CSS tokens with Figma variables

Design & Creative#css#figma#design tokens#sync#variables#brand-design
Authorpaolomoz
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill bridges the gap between design tokens defined in CSS and their representation in Figma, ensuring consistency and reducing manual synchronization efforts.

Core Features & Use Cases

  • Bidirectional Sync: Push CSS properties to Figma variables and pull Figma changes back to CSS.
  • Drift Detection: Compare CSS and Figma tokens to identify discrepancies, ideal for CI pipelines.
  • Use Case: After updating brand colors in your CSS, use this Skill to push those updates to your Figma design system, ensuring designers and developers are always working with the same visual language.

Quick Start

Use the figma-token-sync skill to push CSS tokens to Figma.

Dependency Matrix

Required Modules

None required

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: figma-token-sync
Download link: https://github.com/paolomoz/skills/archive/main.zip#figma-token-sync

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.