Does it support mobile development?

Absolutely. It utilizes Style Dictionary to transform design tokens into platform-specific formats for iOS and Android as well as web CSS/JS.

Can I use this with custom brand palettes?

Yes, the skill includes a token writer script that generates Figma-compatible entries for custom palettes derived from the Universal Design System.

How does this skill handle Figma Variables?

It aligns Figma Variables with a central design-tokens.json file, ensuring that Dev Mode displays semantic token names instead of raw hex or pixel values.

How do I ensure my design tokens remain valid?

The skill provides a validation command that checks DTCG structure and cross-file synchronization between your code and Figma token files.

Figma Handoff & Token Sync

Name: Figma Handoff & Token Sync
Author: mkatogui

bymkatogui

•

디자인 도구

Synchronizes Figma design variables and Tokens Studio assets with production-ready design tokens to streamline the design-to-code workflow.

The Figma Handoff skill for the Universal Design System (UDS) bridges the gap between UI design and frontend implementation by ensuring Figma variables remain perfectly aligned with a W3C DTCG-compliant JSON source of truth. It facilitates a seamless developer experience by mapping design assets to semantic tokens, enabling Dev Mode to display meaningful names like 'color.primary' instead of raw hex codes. This skill is essential for teams looking to automate token synchronization, validate cross-platform design specs, and maintain consistency across web and mobile outputs through a structured build pipeline.

주요 기능

01Enforces semantic naming conventions for colors, spacing, and typography

021 GitHub stars

03Integrates with Figma Dev Mode to display token names over raw values

04Synchronizes Figma Variables and Tokens Studio with design-tokens.json

05Generates multi-platform outputs including CSS, JS, iOS, and Android

06Provides automated validation scripts for DTCG compliance and file sync

사용 사례

01Setting up a robust handoff process that eliminates manual hex code entry in frontend development

02Aligning Figma design libraries with a centralized JSON source of truth for engineering

03Implementing custom brand palettes that automatically update in both design and code

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add mkatogui/universal-design-system figma-handoff

For use in Claude.ai and ChatGPT

주요 기능

01Enforces semantic naming conventions for colors, spacing, and typography

021 GitHub stars

03Integrates with Figma Dev Mode to display token names over raw values

04Synchronizes Figma Variables and Tokens Studio with design-tokens.json

05Generates multi-platform outputs including CSS, JS, iOS, and Android

06Provides automated validation scripts for DTCG compliance and file sync

사용 사례

01Setting up a robust handoff process that eliminates manual hex code entry in frontend development

02Aligning Figma design libraries with a centralized JSON source of truth for engineering

03Implementing custom brand palettes that automatically update in both design and code