Skills
.Work. You
Rest

code-to-figma-design-system

Community

Sync token changes to Figma and auto-create docs.

Design & Creative#documentation#figma#sync#tailwind#tokens#design-system
Authormrgreenish
Version1.0.0
Installs0

System Documentation

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.

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: code-to-figma-design-system
Download link: https://github.com/mrgreenish/design-system-skill-maker/archive/main.zip#code-to-figma-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.