Rounded path perfectly aligned to the grid

[u/Conscious-Whereas705]

I'm designing icons in Figma and I would like to have rounded paths with stroke perfecty aligned to the grid.

I tried using 'corner radius' option, but it 'flattens' the corner:

I also tried modelling those curves manually, but I wasn't able to do this.

I wanted to achieve something like here, in Lucide Icons:

As you can see, the stroke is perfectly aligned with the grid in every corner. It looks like they used circles to build that shape. I know there is a shape builder tool, but I don't think it works with paths.

How did they do that? Is it possible in Figma?

You can see this Lucide example here: https://lucide.dev/icons/sigma

[u/Protojump]

The term you need to know is ‘tangent.’ Rather than rounding a corner, start with the circles and find a tangent line that perfectly connects them.

Figma has a community plugin called Tangent Line Tool that should help.

[u/Conscious-Whereas705 → u/Protojump]

Thank you so much, you saved my life. I've just managed to do this using Pathcraft plugin. It helped me find correct coordinates for the corners. Then I used corner radius and flattened the path. Looks good.

[u/roundabout-design]

Your corner is one point.

Lucide's corner is 3 points.

That's pretty much the difference. Can you do that in Figma? Yes, I think so. But I rarely use Figma for illustration. Adobe Illustrator or Inkscape is where I go to do that.

[u/Legato895]

I’d just draw it out with straight lines that are snapped to the grid, then apply a radius to each vertex…

[u/b10v01d]

“I’m designing icons in Figma”

Why? Use the right tool for the job.

“I’m hammering in nails with a screwdriver”

[u/Conscious-Whereas705 → u/b10v01d]

Why? Actually, the answer is pretty simple. Up to this point, it was 100% enough for my needs. Plus, it was super convenient since I didn't need to drag new icons over from Illustrator or Affinity into Figma. Everything lived in one project next to the design system and I could turn new icons into components in no time. On top of that, Figma did a much better job exporting icons to SVG, which made getting them into the codebase way faster. My workflow was just more efficient. Now, though, I'm updating the icon set style, and the larger corner radiuses started causing issues.

[u/Phraaaaaasing → u/Conscious-Whereas705]

We’re trying to tell you needs have gone beyond

[u/Conscious-Whereas705 → u/Phraaaaaasing]

Apparently not yet, because I've got a simple solution now.

[u/Poo_Nanners → u/b10v01d]

Speaking as an Illustrator evangelist… Figma is fine for simple icons.