skills.rest
mrgreenish
mrgreenishCOMMUNITY
Explore all skills by this author →
GitHub

figma-to-code-design-system

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

Updated Apr 14, 2026
Search Tags:#figma#sync#storybook#tailwind#css-variables#design-tokens#tokens.json
One-click install
npx skills add https://github.com/mrgreenish/design-system-skill-maker --skill figma-to-code-design-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-to-code-design-system
Source: https://github.com/mrgreenish/design-system-skill-maker/tree/main/templates/skills/figma-to-code-design-system
Command: npx skills add https://github.com/mrgreenish/design-system-skill-maker --skill figma-to-code-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designers update tokens in Figma and codebases drift out of sync, causing inconsistencies across CSS variables, Tailwind/SCSS themes, and visual documentation; this skill automates the reconciliation so code and docs reflect the authoritative Figma state.

Core Features & Use Cases

  • Reads Figma variables, local text styles, and effect styles via a Figma Dev Mode MCP and caches their outputs for comparison.
  • Compares Figma state to a DTCG tokens.json, adds new tokens, updates differing values (Figma wins), and never auto-deletes tokens absent from Figma.
  • Regenerates CSS custom properties and optionally Tailwind config or SCSS based on configured outputFormats, updates DESIGN.md sections, and scaffolds or updates Storybook token gallery MDX stories.
  • Produces a concise change summary for user confirmation, preserves existing token structure, and performs additive-only extraction for typography and shadows.

Quick Start

Pull design tokens from the connected Figma file, update tokens.json, regenerate CSS/Tailwind/SCSS outputs, and scaffold Storybook token galleries.

Frequently Asked Questions about figma-to-code-design-system

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

FAQPage Schema
How do I sync Figma design tokens to code automatically?▼

You can sync Figma design tokens to code by reading Figma variables, text styles, and effect styles via a Dev Mode MCP connection, then updating a DTCG tokens.json file and regenerating CSS, Tailwind, or SCSS outputs.

What is the best way to generate CSS custom properties from Figma variables?▼

Generating CSS custom properties from Figma variables requires using a Figma Dev Mode MCP connection to compare against a DTCG tokens.json file, automatically updating differing values and regenerating CSS outputs based on configured formats.

Does syncing Figma tokens to Tailwind delete existing CSS variables?▼

Syncing Figma tokens to Tailwind or CSS does not auto-delete existing variables; the process adds new tokens and updates differing values where Figma wins, while preserving tokens absent from the Figma file.

Can I update Storybook token galleries directly from Figma design changes?▼

Yes, you can update Storybook token galleries from Figma changes by scaffolding or updating MDX stories automatically, ensuring visual documentation reflects the authoritative Figma state without manual rebuilds.

Do I need a Figma Dev Mode MCP connection to extract design tokens?▼

Yes, extracting design tokens from Figma requires a Dev Mode MCP connection to read variables and styles, along with a figma-map.json file to define type and unit mapping for the generated outputs.

How are Figma text and effect styles extracted into a DTCG tokens.json file?▼

Figma text and effect styles are extracted additively into a DTCG tokens.json file by comparing cached Figma states against existing tokens, updating differing values without auto-deleting previously defined token structures.

Related Skills

Explore More Design & Creative Skills→
mrgreenishmrgreenish

code-to-figma-design-system

Synchronize tokens.json with Figma variables and generate design system documentation pages.

Community
Advanced
rp4rirp4ri

design-token-extractor

Extracts design tokens from CSS, SCSS, JavaScript, and Tailwind config files into CSS custom properties, Tailwind config, and Style Dictionary JSON.

Community
Advanced
RheasilviaRheasilvia

design-md

Lint DESIGN.md files and export design tokens to Tailwind or DTCG formats.

Community
Intermediate
Dragoon0xDragoon0x
4

sync

Export code-defined design tokens to a Tokens Studio-compatible figma.tokens.json file.

Community
Intermediate