Hi everyone,
I recently published a Figma plugin called DesignPorter.
The idea came from a problem I kept running into while working with design systems: exporting variables is useful, but a real design system is more than a list of raw values. It also includes modes, aliases, styles, bindings, and the relationships between them.
So I built DesignPorter to make design systems more portable.
It can currently:
- Export Figma variables and supported styles as structured DTCG JSON
- Preserve supported modes, aliases, and bindings
- Import a DesignPorter JSON into another Figma file and rebuild the supported structure
- Export an AI-ready design.md containing tokens, styles, modes, relationships, and usage guidance for coding/design agents
- Run locally without sending design-system data to an external server
I’m a Product & Brand Designer working in DesignOps, not a traditional software engineer. The original concept, product direction, UX, and brand were created by me, and I used AI as a development partner throughout the implementation process.
One of my main goals was to avoid turning a design system into disconnected colors and numbers during export. I wanted the output to preserve as much of the system’s intent and structure as the Figma Plugin API allows.
I’d really appreciate feedback from people working with:
- Design systems
- Figma Variables
- Design Tokens / DTCG
- DesignOps
- AI-assisted design and development workflows
Especially interested in hearing about edge cases you’d want an import/export tool like this to support.
DesignPorter — Design System Import & Export
https://www.figma.com/community/plugin/1674716606574882364/designporter-design-system-import-export
Thanks!
Hossein Mohagheghian
Product & Brand Designer · DesignOps