Menu
Figma to code handoff using UDS tokens. Align Figma variables with design-tokens.json, naming conventions, Dev Mode, and token sync.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Generates complete brand identity systems with color psychology, typography pairings, and visual identity rules mapped to Universal Design System palettes. Use when the user asks for brand identity, brand design, brand colors, style guide, or visual identity.
Component documentation and Storybook: stories, MDX, props tables, usage guidelines from UDS component specs.
Audits existing UIs for WCAG accessibility, color contrast, typography hierarchy, spacing consistency, and industry anti-patterns. Generates scored reports with actionable fixes. Use when the user asks for design audit, UI audit, accessibility audit, or design review.
Design system governance and scaling: centralized vs federated, lifecycle, contribution model, multi-team adoption.
Internationalization and right-to-left layout using UDS localization data. Logical CSS properties, dir="rtl", text expansion, and RTL mapper for existing CSS.
Multi-brand and theming: derive palettes from base, palette overrides, data-theme, white-label UI using UDS tokens.
| name | figma-handoff |
| description | Figma to code handoff using UDS tokens. Align Figma variables with design-tokens.json, naming conventions, Dev Mode, and token sync. |
| version | 0.6.0 |
| triggers | ["figma to code","design handoff","dev mode","figma tokens","design to code","Figma variables","Tokens Studio","design specs","figma handoff","design specs for dev"] |
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 |