Figma variables to Penpot tokens by Detachless

About this plugin

Figma variables to Penpot tokens by DetachlessThis plugin bridges the gap between Figma's design system variables and Penpot's design tokens, allowing seamless migration of your local variables.How It WorksThe plugin connects to Figma's Variables API to extract local variable collections and transform them into Penpot's token format. Here's the process:Collection Discovery: Upon launch, the plugin scans your Figma file for all variable collections and presents them in a selectable list.Intelligent Mapping: The converter handles various Figma variable types (colors, numbers, strings, booleans) and maps them to Penpot's token system, including:Variable mode conversion to Penpot themesProper handling of variable referencesSpecial formatting of colors (HEX and RGBA)Nested structure preservationToken Organization: The plugin creates a structured Penpot token JSON with:Themes based on your variable collections and modesProper metadata for Penpot compatibilityDependency management between collectionsClean Output: The result is a downloadable JSON file ready to be imported into Penpot's design system.Something is not working or you have suggestion for new feature? Submit feedback🎉 Bonus: Publish your designs directly to websites with Detachless – no coding needed! 💻🌐