code-to-figma-design-system

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

Updated Apr 14, 2026

Search Tags:#documentation #figma #sync #tailwind #tokens #design-system

Ready to run

npx skills add https://github.com/mrgreenish/design-system-skill-maker --skill code-to-figma-design-system

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: code-to-figma-design-system
Source: https://github.com/mrgreenish/design-system-skill-maker/tree/main/templates/skills/code-to-figma-design-system
Command: npx skills add https://github.com/mrgreenish/design-system-skill-maker --skill code-to-figma-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design token updates in the codebase often stay out of sync with Figma, leading to mismatched UI specs and manual rework.

Core Features & Use Cases

Token Sync: Reads tokens.json, compares with Figma variables, creates, updates, or proposes deletions.
Visual Docs Generation: Automatically builds or updates Figma pages for colors, typography, spacing, grid, buttons, forms, and icons.
Manual Follow‑up: Lists shadow, cubicBezier, and protected tokens for user‑handled updates.

Quick Start

Ask the skill to push your updated tokens.json to Figma and generate the design system pages.

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

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

FAQPage Schema

How do I sync design tokens from my codebase to Figma variables?▼

To sync design tokens to Figma, the Skill reads your tokens.json, compares values against existing Figma variables, and automatically creates, updates, or proposes deletions to keep your UI specs matched.

Can I automatically generate Figma documentation pages for my design system?▼

Yes, you can automatically generate Figma documentation pages for your design system. The Skill builds visual pages for colors, typography, spacing, grids, buttons, forms, and component matrices directly within Figma.

What do I need to connect my code repository design tokens to Figma?▼

To connect code repository design tokens to Figma, you need a connected Figma Dev Mode MCP, a figma-map.json mapping file, and read/write permissions to Figma variables.

Why are my codebase design tokens out of sync with Figma UI specs?▼

Codebase design tokens fall out of sync with Figma UI specs when updates are made in the repository without automatically pushing those changes to Figma variables, leading to mismatched UI specs and manual rework.

Does this token sync approach handle shadow and cubicBezier tokens automatically?▼

No, shadow, cubicBezier, and protected tokens are not handled automatically. The Skill lists these specific token types for manual follow-up, requiring user-handled updates within Figma.