Skip to main content

In order to save time and effort for the development team, i’d like the SVG exported file to show the colors as customized fields.

For example:

I’d like to be able to define a color with a name.

So that in the SVG code for example, the #31567A (in BOLD) will show “#Primarycolor” and #0575E5 (in BOLD italic) will show “#Seconderycolor”.

This will allow automation of implementation of design.


travel baggage


SVG namespace" d=“M40.2498 34.0371V22.0091C31.1243 22.0091 29.2026 17.2316 29.2026 17.2316C29.2026 17.2316 27.2801 22.0091 18.1546 22.0091V34.0371C18.1546 34.0371 17.415 39.8168 29.2026 45.3691C40.9894 39.8168 40.2498 34.0371 40.2498 34.0371Z” stroke="#31567A" stroke-width=“1.2” stroke-miterlimit=“10” stroke-linecap=“round” stroke-linejoin=“round”/>


SVG namespace" d=“M31.6481 28.5683H33.1778C33.4983 28.5683 33.7606 28.8282 33.7606 29.146V34.1049C33.7606 34.4227 33.4983 34.6826 33.1778 34.6826H25.3433C25.0228 34.6826 24.7606 34.4227 24.7606 34.1049V29.146C24.7606 28.8282 25.0228 28.5683 25.3433 28.5683H30.7144V30.0097” stroke=“#0575E5” stroke-width=“1.2” stroke-miterlimit=“10” stroke-linecap=“round” stroke-linejoin=“round”/>

The plugin called SVG Export might be able to help you with that!

Sorry to bump a two year old thread, but I’m really curious to find out whether you achieved this somehow @Jonathan_Arad. I’ve checked out and tested the link shared by @bazoo, but I cannot get this to work.


I’m looking to achieve exactly the same result as you put in your example.

@Carlos_Garcia any success so far?

Hey there

Just published a plugin especially for generating the SVG code with color tokens:

https://www.figma.com/community/plugin/1442959482504071246/svg-with-tokens


Waiting for you feedback of how to improve it 🙂

Reply


Terms & ConditionsCookie settings