skills.rest
paolomoz
paolomozCOMMUNITY
Explore all skills by this author →
GitHub

figma-token-sync

Synchronize design tokens bidirectionally between CSS custom properties and Figma variables.

3|Updated Feb 3, 2026
Search Tags:#css#figma#design tokens#sync#variables#brand-design
One-click install
npx skills add https://github.com/paolomoz/skills --skill figma-token-sync
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-token-sync
Source: https://github.com/paolomoz/skills/tree/main/skills/figma-token-sync
Command: npx skills add https://github.com/paolomoz/skills --skill figma-token-sync

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

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.

Frequently Asked Questions about figma-token-sync

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I sync design tokens between CSS and Figma variables?▼

You can sync design tokens bidirectionally by pushing CSS custom properties to Figma variables or pulling Figma changes back to CSS, ensuring design and development environments stay consistent.

How do I detect drift between CSS custom properties and Figma variables?▼

Drift detection compares CSS and Figma tokens to identify discrepancies, which is ideal for integrating into CI pipelines to validate consistency across design and development sources automatically.

Can I use this Skill to push brand color updates from CSS to a Figma design system?▼

Yes, you can push updated brand colors or other CSS tokens directly to Figma variables, ensuring designers and developers work with the same visual language without manual updates.

What is the best way to automate design token validation in CI pipelines?▼

Automating design token validation in CI pipelines involves using drift detection to compare CSS and Figma tokens, identifying discrepancies to ensure consistency across environments during automated builds.

Do I need to manually update Figma variables when CSS custom properties change?▼

No, manual updates are unnecessary because the bidirectional sync feature pushes CSS custom property changes directly to Figma variables, maintaining consistency and reducing manual synchronization efforts.

Why should I use bidirectional sync for design tokens instead of manual updates?▼

Bidirectional sync prevents inconsistencies and saves effort by automatically pushing CSS properties to Figma and pulling Figma changes to CSS, ensuring both design and development environments match perfectly.

Related Skills

Explore More Design & Creative Skills→
markky21markky21

tailwind-design-system

Build scalable design systems with Tailwind CSS v4 and design tokens.

Community
Advanced
flight505flight505
9

Bidirectional Design Token Sync

Synchronize design tokens bidirectionally between Figma and code with drift detection.

Community
Advanced
owshq-mecowshq-mec
122

ckm:brand

Manage brand voice, visual identity, and asset compliance with markdown guidelines.

Official
Advanced
Owl-ListenerOwl-Listener
2.0k

design-token

Define and organize design tokens across color, spacing, typography, elevation, border, and motion.

Community
Intermediate