I work with Figma regularly to create graphics and export them as SVG files for web projects. The main issue I face is that the exported SVG code doesn’t include any meaningful identifiers for the elements.
When I export an SVG from Figma, all the paths, circles, and other shapes come out with generic names. This means I have to manually go through each SVG file and add my own class names or IDs to style them with CSS or control them with JavaScript.
This manual process takes a lot of time, especially when working with complex illustrations that have many elements. I’m wondering if there’s a built-in feature or plugin that allows me to assign custom CSS classes or IDs to elements directly in Figma before exporting.
My question is: Can I somehow label elements in Figma so that these labels appear as CSS classes or IDs in the exported SVG code?
Nope, Figma doesn’t let you add custom CSS identifiers that’ll stick when you export to SVG. The exports always use Figma’s internal naming no matter what you call your layers. But I’ve got a workflow that beats manual editing every time. Grab the “SVG Export” plugin from the community - it lets you tweak export settings and sometimes keeps layer names as element IDs. You can also set up a naming system in Figma that makes editing exports way more predictable. I use descriptive names like “icon-arrow” or “bg-circle” so I can easily find-and-replace in the SVG code instead of digging through random path names.
I dealt with this same issue for months before finding a workaround. I use the SVG Export plugin plus a post-processing script. After exporting from Figma, I run a Node.js script that converts layer names to CSS classes using a naming convention. Like if I name a layer “btn_primary” in Figma, the script automatically makes it class=“btn-primary” in the SVG. Saves me from manually editing tons of elements. You just need consistent naming in Figma first, then automate the conversion. Not perfect but cuts my SVG editing time by 80% versus doing it all manually.
figma’s svg export is pretty basic for this. i use a simple find/replace trick - name your layers with prefixes like ‘cls_button’ or ‘id_header’, then after export batch replace ‘cls_’ with ‘class=’ and ‘id_’ with ‘id=’ in any text editor. takes 30 seconds vs hours of manual work.
try naming layers directly as css classes/ids in figma. there are plugins like ‘figma to code’ or ‘svg export plus’ that can help with this. it’s kinda a workaround, but it should do the job!