Back

How to create an SVG with a single path from Figma.

If you’re looking to create an SVG with a path rather than a group of shapes, this post it for you.

Why would you want this?

Paths in SVG are easier for developers to manipulate and style.  The problem is that when exporting SVGs from Figma, they often come out as groups.

Here’s an example:

See how on the left-hand side of the Figma file, it’s made of up of a circle and two diagonal crosses.

Figma file with icon made of shapes.

The problem is that when you need to style it in code, we can’t simply style the grey part of the icon as there is no detailed path of the whole icon.  It’s made up of the circle and two paths.  It also means the diagonal lines are not transparent.

 

So here’s how I solved this problem.  Firstly, I ungrouped the whole thing.

Then to make the x transparent and make the whole icon one clean shape, I selected both the lines (together) and the circle, then subtracted the selection.

 

Now you have one solid path to work from.

Solid SVG path in Figma.

 

Now once you export the icon in SVG format, the code will reflect the path and the developers can then edit the colour of the path and not affect the x in the middle.

Solid SVG path.

 

If you need any help, comment below.

Stay informed,

Tania Richardson sign.

Tania
Tania
https://taniarichardson.com
10+ years as a product designer. Helping start-ups and organisations combine user research and design principals to deliver the best in online experiences.

We use cookies to give you the best experience. Cookie Policy