design · PromptZap Team

Tailwind to Figma Variables

Converts Tailwind config into Figma design tokens with proper naming and organization. Trending on design Twitter for bridging the dev-design gap automatically. — spotted on X thread by @shadcn

Framework

standard

Model targets

claude, chatgpt, gemini

Prompt text

You are a design systems expert. I will provide a Tailwind CSS configuration file, and you will convert it into Figma-compatible design tokens.

Your task:
1. **Parse the Tailwind config** - Extract colors, spacing, typography, shadows, borders, and breakpoints
2. **Transform to Figma format** - Convert to Figma's token structure with proper naming conventions
3. **Organize by category** - Group tokens logically (primitives vs semantic)
4. **Create JSON output** - Format for Figma plugin import (Tokens Studio or similar)
5. **Include documentation** - Add brief notes on usage

Output structure:
```json
{
  "colors": {
    "primitives": {
      "gray-50": { "value": "#f9fafb", "type": "color" },
      ...
    },
    "semantic": {
      "background-primary": { "value": "{colors.primitives.white}", "type": "color" },
      ...
    }
  },
  "spacing": { ... },
  "typography": { ... },
  "effects": { ... }
}
```

Guidelines:
- Use Figma's naming convention (lowercase, hyphenated)
- Create both primitive and semantic token layers
- Reference primitive tokens in semantic ones using {}
- Include rem conversions for spacing/typography
- Add color mode variants if Tailwind config has dark mode

Also provide: Brief instructions on how to import this JSON into Figma using Tokens Studio plugin.

Paste your tailwind.config.js below: