How do I sync custom brand colors with Figma?

You can use the token_writer.py script to generate Figma-compatible token entries from custom palettes created via the UDS palette generator.

Does this skill support Figma Dev Mode?

Yes, it enforces naming conventions so developers see semantic token names like color.primary rather than raw hex values directly within Figma Dev Mode.

What is the primary source of truth for tokens?

The source of truth is tokens/design-tokens.json in the W3C DTCG format, which is used by Style Dictionary to build CSS, JS, and mobile platform outputs.

How is token synchronization validated?

The skill uses a dedicated validation script (validate-tokens.py) to check DTCG format compliance and ensure cross-file sync between the codebase and Figma files.

Figma Design-to-Code Handoff

Name: Figma Design-to-Code Handoff
Author: mkatogui

bymkatogui

•

Design Tools

Synchronizes Figma design tokens and variables with the Universal Design System codebase to ensure seamless developer handoff.

This skill streamlines the transition from design to development by aligning Figma Variables and Tokens Studio configurations with the Universal Design System (UDS) repository. It ensures that naming conventions for colors, spacing, and typography remain consistent across Figma Dev Mode and the production codebase, utilizing a W3C DTCG-compliant source of truth to automate token generation, validation, and multi-platform distribution.

Key Features

01Synchronizes Figma Variables with W3C DTCG standard design tokens

02Generates Figma token entries for custom brand-specific palettes

03Validates cross-file consistency between design and Figma token files

04Automates token naming conventions for improved Dev Mode visibility

05Supports multi-mode theme switching for Light and Dark modes in Figma

061 GitHub stars

Use Cases

01Aligning Figma local variables with a design-tokens.json source of truth

02Automating the creation of Figma-compatible tokens for custom corporate palettes

03Ensuring developers see semantic token names instead of raw hex values in Dev Mode

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

Key Features

01Synchronizes Figma Variables with W3C DTCG standard design tokens

02Generates Figma token entries for custom brand-specific palettes

03Validates cross-file consistency between design and Figma token files

04Automates token naming conventions for improved Dev Mode visibility

05Supports multi-mode theme switching for Light and Dark modes in Figma

061 GitHub stars

Use Cases

01Aligning Figma local variables with a design-tokens.json source of truth

02Automating the creation of Figma-compatible tokens for custom corporate palettes

03Ensuring developers see semantic token names instead of raw hex values in Dev Mode

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