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 One-click conversion - Automatically convert Figma variables to Panda CSS tokens Multiple output formats - Export as JSON or TypeScript/JavaScript object format Design system ready - Generate both base tokens and semantic tokens Developer friendly - Clean, production-ready code output Grid system templates - Pre-configured spacing and size tokens for 4px and 8px grids Unit conversion - Choose between px and rem units Semantic tokens support - Variable references with proper token structure🎨 Supported PropertiesColors (`Color_*` → `colors`) Color values in hex, rgba formatsFont Sizes (`FontSize_*` → `fontSizes`) Typography size tokensLine Heights (`LineHeight_*` → `lineHeights`) Line height values for typographyLetter Spacing (`LetterSpacing_*` → `letterSpacings`) Letter spacing tokensFont Weights (`FontWeight_*` → `fontWeights`) Font weight values (400, 500, 600, etc.)Border Radius (`BorderRadius_*` → `radii`) Border radius tokens for rounded cornersBorder Width (`BorderWidth_*` → `borderWidths`) Border width values 📋 How to Use Create Variables - Set up your Figma variables following the naming convention Configure Options - Choose grid system, unit conversion, and output format Generate Config - Click "Generate Configuration" to create your Panda CSS config Copy & Use - Download or copy the generated configuration for your project🏗️ Naming ConventionUse underscores (`_`) to separate segments in your Figma variable names: