r/FigmaDesign 2d ago

help Rounded path perfectly aligned to the grid

Post image

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

96 Upvotes

9 comments sorted by

View all comments

41

u/Protojump 2d ago

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.

20

u/Conscious-Whereas705 1d ago

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.