Back to Plugins
SVG with Tokens
Generate the SVG code of any Figma Vector Node, including the color tokens with their default value
Plugin Preview
About this plugin
This plugin generates the SVG code you would like to export, but also replaces the static colors values with the original token name. For example, if the SVG would contain: stop-color="#E6EFFA", this plugin will generate instead: stop-color="var(--token-name, #E6EFFA)"Demo: https://youtu.be/7UYkt4Ym20U
Plugin Details
| Version | 3 |
|---|---|
| Created | November 25, 2024 |
| Last Updated | November 25, 2024 |
| Category | Software development |
| Creator | Avner |
| Stats | 47 installs, 13 likes |
| Pricing | Free |
Technical Details
- API:1.0.0
- UI:ui.html
- main:code.js
- Document Access:dynamic-page
- Editor Types:dev
- Allowed Domains:
- none
- Codegen Languages:
- Language Label(language-value)
More Like This
Discover other plugins in the Software development category.
Builder.io - Figma to Code & AI Apps (React, Vue, Tailwind, etc)
Export designs to clean, responsive code or turn Figma screens into AI apps and prototypes.
Code Snippet Editor
Translate component variants, properties, and more into dynamic code snippets for your design system
GitHub
Connect Design to Code