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

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
One-click install
npx skills add https://github.com/mrgreenish/design-system-skill-maker --skill code-to-figma-design-system
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
mrgreenishmrgreenish

figma-to-code-design-system

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

Community
Advanced
andrewnovykovandrewnovykov

ux-ui

Enforce Soft Modern design tokens and Tailwind mappings across HeadsUp pages and components.

Community
Intermediate
Mateo1099Mateo1099

tailwind-design-system

Build scalable UI systems with Tailwind CSS v4 design tokens and CVA components.

Community
Intermediate
AradotsoAradotso
3

figma-design-md-plugin

Convert Figma design styles and variable collections into DESIGN.md and SKILL.md documentation.

Official
Intermediate