The problem with SVG exports
You build a design system with carefully defined color variables. Then you export an icon and it's full of hardcoded hex values.
Want that icon to adapt to dark mode? You're manually find-and-replacing colors. Building a themeable component library? Each SVG needs hand-editing to reference your CSS custom properties. Multiply that by dozens of icons and the maintenance burden adds up fast.
Figma variables should flow through to your exported assets. They don't.
SVGs that respond to your theme
SVG Variable Exporter reads the Figma variables bound to your fills and strokes, then exports SVGs that reference those variables as CSS custom properties.
Select your frames. Run the plugin. Get SVGs that automatically adapt when your CSS variables change.
How it works
Automatic variable detection
The plugin scans your selection for any fills or strokes bound to Figma variables. No manual tagging or layer naming conventions required.
Smart property naming
Define WEB code syntax on your Figma variables (like --color-primary) and the plugin uses those names directly. No WEB syntax defined? It falls back to a clean kebab-case version of your variable name.
Standalone fallbacks
Optionally include a :root block with resolved fallback values. Your SVGs work immediately, even before your CSS custom properties are loaded.
Wide-gamut color support
Export using the color() function syntax for Display P3 and other wide-gamut color workflows.
Built on Figma's native export
The plugin uses Figma's own SVG export under the hood, then post-processes the output to swap in variable references. You get full SVG fidelity with none of the quirks that come from custom rendering.
Export to clipboard for quick iteration, or download as files when you're ready to commit.