Figma to code handoff using UDS tokens. Align Figma variables with design-tokens.json, naming conventions, Dev Mode, and token sync.
How this skill is triggered — by the user, by Claude, or both
Slash command
/universal-design-system:figma-handoffThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Use this skill when the user needs **design-to-code handoff** or **Figma alignment** with the Universal Design System. UDS provides W3C DTCG design tokens, a Figma-compatible token file, and a token writer for custom palettes.
Use this skill when the user needs design-to-code handoff or Figma alignment with the Universal Design System. UDS provides W3C DTCG design tokens, a Figma-compatible token file, and a token writer for custom palettes.
color.primary) instead of raw hex in Dev Mode.tokens/design-tokens.json and Figma in sync.tokens/design-tokens.json — W3C DTCG format, 3-tier (primitive → semantic → palette overrides). This is the single source of truth for the build.tokens/figma-tokens.json — Figma Tokens Studio compatible. Must stay in sync with design-tokens.json for consistent handoff.scripts/validate-tokens.py — validates DTCG structure and cross-file sync between design tokens and Figma tokens. Run after any token change.So developers see token names in Figma Dev Mode (not just raw values):
color.primary, color.background, color.text.primary, with modes for Light/Dark.space.4, space.8, space.16, etc. (4px base).type.heading.lg, type.body.md, etc., matching UDS typography scale.radius.sm, radius.md, radius.lg — per-palette in UDS.tokens/design-tokens.json (and running the build) so CSS/JS outputs stay correct.src/scripts/token_writer.py to generate Figma token entries for custom palettes; for the core system, ensure tokens/figma-tokens.json is updated to match design-tokens.json (structure and values).npm run validate (or python scripts/validate-tokens.py) to check DTCG format and cross-file sync.npm run build runs Style Dictionary and produces platform outputs (CSS, JS, iOS, Android) from design-tokens.json.design-tokens.json or the docs so developers know where to read token values and usage.For custom palettes derived from UDS (e.g. palette.py create "my-palette" --base corporate), the token writer can generate Figma token entries matching tokens/figma-tokens.json format. Use this to keep custom brand tokens in sync with Figma.
| Asset | Purpose |
|---|---|
tokens/design-tokens.json | Source of truth; DTCG format; used by Style Dictionary build |
tokens/figma-tokens.json | Figma Tokens Studio compatible; keep in sync with design-tokens.json |
scripts/validate-tokens.py | Validates structure and cross-file sync |
src/scripts/token_writer.py | Generates Figma token entries for custom palettes |
npm run build | Builds CSS/JS/iOS/Android from design-tokens.json |
npx claudepluginhub mkatogui/universal-design-system --plugin universal-design-systemSyncs design tokens between code and Figma using Variables API or Tokens Studio plugin. Use when establishing Figma-to-code workflows, exporting Figma tokens, or setting up design-development handoff.
Export Figma variables to design token files in DTCG, CSS custom properties, Tailwind v4/v3, SCSS, TypeScript, JSON, Style Dictionary, or Tokens Studio. Works on any Figma plan via Plugin API.
Extracts design tokens (colors, spacing, typography) and variables from Figma files via MCP server, generating CSS Custom Properties, TypeScript/JS objects, JSON, Tailwind config, and Style Dictionary formats for design systems.