csssvgfigma

Set CSS class/id in figma and have it declared on the exported svg file


I've been using Figma a lot lately to draw / edit images and export them as SVG files so I can quickly use inside my apps' code bases.

There's just one drawback with that: Looking through the SVG code to find out what element is what.

Up to this moment I'm having to go through the SVG manually in order to mark the elements (with classes or ids) so that I can manipulate them properly via CSS or Javascript, what's quite tedious :-/

It would be really convenient to be able to set an id or a class to each element (path, line, circle etc..) via Figma and have it reflected in the exported code, I strongly believe that there must be a way to do so...

So here I ask: Is there a way to set certain CSS class or id atribute in Figma and have it declared on the svg code that gets exported?


Solution

  • There's a checkbox "include id attribute" in the export section. It inserts the element's layer name as the id attribute on the resulting svg tag.

    Figma

    yay 🎉