Back to Plugins
SVG with Tokens

SVG with Tokens

Generate the SVG code of any Figma Vector Node, including the color tokens with their default value

Plugin Preview

SVG with Tokens 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

Version3
CreatedNovember 25, 2024
Last UpdatedNovember 25, 2024
CategorySoftware development
CreatorAvner
Stats20 installs, 8 likes
PricingFree

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)