Skills
.Work. You
Rest

figma-to-code-design-system

Community

Sync Figma design tokens to code instantly

Design & Creative#figma#sync#storybook#tailwind#css-variables#design-tokens#tokens.json
Authormrgreenish
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: figma-to-code-design-system
Download link: https://github.com/mrgreenish/design-system-skill-maker/archive/main.zip#figma-to-code-design-system

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.