Figma variables to Penpot tokens by Detachless

About this plugin

Figma variables to Penpot tokens by Detachless

This plugin bridges the gap between Figma's design system variables and Penpot's design tokens, allowing seamless migration of your local variables.

How It Works

The plugin connects to Figma's Variables API to extract local variable collections and transform them into Penpot's token format. Here's the process:

1. Collection Discovery: Upon launch, the plugin scans your Figma file for all variable collections and presents them in a selectable list.
2. Intelligent Mapping: The converter handles various Figma variable types (colors, numbers, strings, booleans) and maps them to Penpot's token system, including:
3. Variable mode conversion to Penpot themes
4. Proper handling of variable references
5. Special formatting of colors (HEX and RGBA)
6. Nested structure preservation
7. Token Organization: The plugin creates a structured Penpot token JSON with:
8. Themes based on your variable collections and modes
9. Proper metadata for Penpot compatibility
10. Dependency management between collections
11. Clean 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! 💻🌐