skills.rest
mkatogui
mkatoguiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

figma-handoff

Sync Figma tokens with design-tokens.json and validate DTCG structure.

3|Updated Mar 11, 2026
Search Tags:#figma#handoff#tokens#design-tokens#token-sync#dev-mode
One-click install
npx skills add https://github.com/mkatogui/universal-design-system --skill figma-handoff-mkatogui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-handoff
Source: https://github.com/mkatogui/universal-design-system/tree/main/plugins/universal-design-system/skills/figma-handoff
Command: npx skills add https://github.com/mkatogui/universal-design-system --skill figma-handoff-mkatogui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Aligns Figma design tokens with the codebase to prevent drift during handoff, ensuring developers and designers stay aligned on token values, naming, and Dev Mode configurations.

Core Features & Use Cases

  • Synchronizes design-tokens.json with tokens/figma-tokens.json to maintain parity across environments.
  • Validates token structure and cross-file consistency using the included scripts.
  • Provides clear naming conventions for tokens to improve Dev Mode readability and handoff clarity.

Quick Start

Sync Figma tokens with the codebase and verify cross-file consistency using the provided validation scripts.

Frequently Asked Questions about figma-handoff

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

FAQPage Schema
How do I sync Figma design tokens with my codebase to prevent drift during handoff?▼

To sync Figma design tokens, you maintain tokens/design-tokens.json as the source of truth and update tokens/figma-tokens.json to match, ensuring developers and designers stay aligned on token values and Dev Mode configurations.

What is the 3-tier token alignment process for Figma to code handoff?▼

The 3-tier token alignment process synchronizes design-tokens.json, figma-tokens.json, and Dev Mode mappings across environments and palettes to handle updates from design changes and developer notes consistently.

How do I validate the DTCG structure and cross-file consistency of Figma tokens?▼

You validate DTCG structure and cross-file consistency by running the included validation scripts, which verify that your figma-tokens.json matches the design-tokens.json source of truth.

Does Figma handoff token sync work without external dependencies?▼

Yes, the Figma handoff token sync operates without external dependencies, relying entirely on internal validation scripts to manage token structure and cross-file consistency.

Why does my Figma Dev Mode configuration show mismatched token naming during handoff?▼

Mismatched token naming in Figma Dev Mode occurs when figma-tokens.json drifts from the design-tokens.json source of truth, requiring you to apply 3-tier token alignment and run validation scripts to restore parity.

Can I use figma-handoff to update design tokens across different environments and palettes?▼

Yes, you can use the token sync process to apply updates across environments and palettes by aligning design-tokens.json, figma-tokens.json, and Dev Mode mappings to handle design changes uniformly.

Related Skills

Explore More Design & Creative Skills→
mrgreenishmrgreenish

figma-to-code-design-system

Sync Figma design tokens into DTCG tokens.json and regenerate CSS, Tailwind, or SCSS outputs.

Community
Advanced
lxt070409lxt070409
1

design-md

Author, validate, and export Google DESIGN.md files to Tailwind or W3C DTCG JSON.

Community
Intermediate
phoenicisfphoenicisf

figma-implement-design

Translate Figma designs into production-ready UI code.

Community
Advanced
yonatangrossyonatangross
217

figma-design-handoff

Extract Figma design tokens and generate TypeScript component interfaces.

Community
Advanced