Figma to design.md

Convert Figma design tokens into a structured design.md for AI-assisted coding

🇨🇳 中文 | 🇺🇸 English

Stop manually documenting your design system. Convert Figma to design.md and let AI coding tools (Cursor, Claude Code, Copilot) understand your design system.

Try it on the web — no setup required

A Claude Code skill plugin that converts Figma design tokens into a structured design.md — extracting CSS variables, Tailwind config, and theme files, optionally enriched via Figma MCP. Non-technical users (designers, PMs) can use the web version directly — just paste a Figma URL and get your design.md.

The Problem

Design systems live in Figma and code, but the documentation lives nowhere — or worse, in an outdated wiki page. Every time tokens change, the docs fall behind. Developers guess at color roles, spacing scales, and typography levels.

The Solution

One command. One document. Always in sync with your actual token files.

/figma-design-system-to-design-md

What It Generates

Section	Source	Auto
Colors — base palette + semantic roles (text, surface, border, icon)	Token files	✅
Typography — font families, size scale, weight, line-height	Token files	✅
Spacing — spacing scale with token names and values	Token files	✅
Border Radius — radius scale	Token files	✅
Border Width — width scale	Token files	✅
Elevation — shadow definitions	Tailwind / Figma MCP	✅
Responsive — minimum width, fluid vs breakpoint approach	Config files	✅
Components — variants, sizing, states	Figma MCP	🔶 Optional
Overview — design intent and personality	—	✍️ Manual
Do's and Don'ts — judgment rules	—	✍️ Manual

How It Works

Step 1  Detect token sources (tokens.css, theme.ts, tailwind.config.js, etc.)
Step 2  Parse and classify all tokens into categories
Step 3  (Optional) Pull additional data from Figma MCP
Step 4  Generate structured design.md
Step 5  Confirm with user before saving

Token Source Detection

The skill automatically searches for:

Type	Patterns
CSS tokens	**/tokens.css, **/variables.css, **/theme.css
JSON/JS tokens	**/tokens.json, **/tokens.ts, **/theme.ts
Style config	tailwind.config.*, **/globals.css

Framework Agnostic

Works with any stack:

Framework	Styling	Tokens
React / Next.js	Tailwind, styled-components, CSS Modules	CSS variables, JS objects
Vue / Nuxt	Tailwind, Vuetify, UnoCSS	CSS variables, JSON
Svelte	Tailwind, vanilla CSS	CSS variables
Any	Any	Any format with parseable tokens

Install

# Via marketplace
claude plugin install figma-design-system-to-design-md

# Via GitHub
claude /plugin install https://github.com/albertzhangz10/figma-design-system-to-design-md

Usage

/figma-design-system-to-design-md                    # generates ./design.md
/figma-design-system-to-design-md ./docs/design.md   # custom output path

Local Development

claude --plugin-dir /path/to/figma-design-system-to-design-md

Requirements

Requirement	Required	Notes
Claude Code	✅	Latest version recommended
Token files in project	✅	CSS variables, Tailwind config, theme files, etc.
Figma MCP Server	🔶	Optional — enables component extraction and effect styles

Enabling Figma MCP (Optional)

1. Open Figma desktop app (latest version)
2. Menu → Preferences → Enable Dev Mode MCP Server
3. Restart Claude Code
4. Open your design system file in Figma

License

MIT License - see the LICENSE file for details.

Contributing

Contributions are welcome! Please see CONTRIBUTING.md for guidelines.

Credits

Built by Albert Zhang.

Inspired by Google Stitch design.md — the design.md format and structure are based on their work.