panda-variables-config

About this plugin

Transform your Figma design system variables into production-ready Panda CSS configuration tokens. Perfect for design-to-code workflows, this plugin automatically generates semantic tokens with support for colors, typography, spacing, and more.

✨ Key Features

1. One-click conversion - Automatically convert Figma variables to Panda CSS tokens
2. Multiple output formats - Export as JSON or TypeScript/JavaScript object format
3. Design system ready - Generate both base tokens and semantic tokens
4. Developer friendly - Clean, production-ready code output
5. Grid system templates - Pre-configured spacing and size tokens for 4px and 8px grids
6. Unit conversion - Choose between px and rem units
7. Semantic tokens support - Variable references with proper token structure

🎨 Supported Properties

Colors (`Color_*` → `colors`)

Color values in hex, rgba formats

Font Sizes (`FontSize_*` → `fontSizes`)

Typography size tokens

Line Heights (`LineHeight_*` → `lineHeights`)

Line height values for typography

Letter Spacing (`LetterSpacing_*` → `letterSpacings`)

Letter spacing tokens

Font Weights (`FontWeight_*` → `fontWeights`)

Font weight values (400, 500, 600, etc.)

Border Radius (`BorderRadius_*` → `radii`)

Border radius tokens for rounded corners

Border Width (`BorderWidth_*` → `borderWidths`)

Border width values

📋 How to Use

1. Create Variables - Set up your Figma variables following the naming convention
2. Configure Options - Choose grid system, unit conversion, and output format
3. Generate Config - Click "Generate Configuration" to create your Panda CSS config
4. Copy & Use - Download or copy the generated configuration for your project

🏗️ Naming Convention

Use underscores (`_`) to separate segments in your Figma variable names: