skills.rest
ThanapatJutha
ThanapatJuthaCOMMUNITY
Explore all skills by this author →
GitHub

design-tokens

Synchronize design tokens between Figma variables and local theme files.

Updated Mar 18, 2026
Search Tags:#typescript#theming#figma#tokens#design-system#css-variables#design-tokens
One-click install
npx skills add https://github.com/ThanapatJutha/th_gene2-figma-mcp --skill design-tokens-thanapatjutha
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-tokens
Source: https://github.com/ThanapatJutha/th_gene2-figma-mcp/tree/main/packages/gene2-figma-mcp/skills/design-tokens
Command: npx skills add https://github.com/ThanapatJutha/th_gene2-figma-mcp --skill design-tokens-thanapatjutha

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Bidirectional sync between Figma variables (CI) and local theme files. Tokens flow: Figma → tokens.json → CSS custom properties + TypeScript.

Core Features & Use Cases

  • Bidirectional token sync between Figma and codebases
  • Generate CSS variables and TypeScript token constants from tokens.json
  • Validate token presence and structure before component generation
  • Use across design systems to ensure consistent theming in apps

Quick Start

Run the token sync workflow to pull tokens from Figma and generate local CSS/TS files.

Frequently Asked Questions about design-tokens

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

FAQPage Schema
How do I sync design tokens between Figma and my codebase?▼

To sync design tokens, you use a workflow that pulls Figma variables into a tokens.json structure, which then generates CSS custom properties and TypeScript constants for your theme-driven UI components.

Can I push code changes back to Figma variables?▼

Yes, token sync supports bidirectional updates, allowing you to push local code-to-Figma changes to keep your design system variables consistently aligned across both environments.

Do I need a tokens.json structure to generate CSS variables and TypeScript?▼

Yes, a tokens.json structure is required to validate token presence and structure before generating local CSS custom properties and TypeScript token constants for your project.

What is the best way to automate theme token generation for a design system?▼

Automating theme token generation involves running token sync commands like tokens pull and tokens generate to extract Figma variables and output them as CSS and TypeScript files.

Does the token sync workflow validate design tokens before updating UI components?▼

Yes, the workflow validates token presence and structure within the tokens.json file before proceeding with component generation to ensure consistent theming across your application.

What formats are generated when pulling Figma variables into a local project?▼

Pulling Figma variables generates local theme files formatted as CSS custom properties and TypeScript token constants, bridging the gap between visual design and code implementation.

Related Skills

Explore More Design & Creative Skills→
mkatoguimkatogui
3

figma-handoff

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

Community
Advanced
corey-alixcorey-alix

Atomic CSS

Create atomic CSS utility classes using token-based custom properties.

Official
Intermediate
kaikunnnnkaikunnnn

design

Map Figma design nodes to Tailwind CSS tokens and component structures.

Community
Advanced
markus41markus41
18

css-generation

Generate CSS variables, Tailwind configurations, and styled-components themes from design tokens.

Community
Intermediate