Lines not centered on origin?

I’ve noticed that, when drawing lines, the stroke of the line sits on one side of the line, rather than being centered on it. So, if you try to center a line with anything else, it will essentially appear off-center by half of your line width. I’m attaching a screenshot that explains this pretty simply. Does anyone know how to either center line strokes on their origin, or otherwise get around this?

The the following image, I have used the align tool to center the line (stroke weight of 6) inside the box. But it clearly isn’t centered (vertically).

You can try to draw lines using pen tool instead of the line tool.

3 Likes

Good idea, thanks!

I think this is a bug with the line tool. It was discussed with Figma representatives back in 2018, but the problem still exists.

I just came across this limitation myself when trying to align a line with the corner of a rectangle:

image

Using the pen tool is fine as a workaround but it renders the line tool quite limited.

Line tool is used when you need pixel-perfect lines. Such a line will never be sub-pixel unlike the centered one created using the pen tool or by flattening the Line when the stroke thickness is an uneven number.

@Gleb can you say why a straight line will never be centered? Like, how is this not a bug? Am I missing the benefit of it being to the side?

I think I already answered in the message right above yours.

@Gleb Would you mind stating in other words how this behavior makes sense and when it would ever come in handy vs being centered like every other design program? Clearly many folks see this as an issue, and having to find workarounds to such a basic tool just seems so strange. Would love a technical, in-depth answer if possible. With all due respect, your last one was vague and IMO insufficient. Thank you for engaging and supporting the community :pray:

1 Like

Look at the coordinates and alignment with pixels.

Line tool:

Vector line:

Now I increase the stroke width (pixel preview is enabled):

As you can see the Line doesn’t have to be at .5 coordinate and it doesn’t get misaligned with pixels once you increase its thickness. It always stays pixel-perfect, unlike a simple vector line.

Of course the ideal solution would be to get something like Illustrator stroke which can be aligned to one side even on open shapes, but so far this is the way to do that in Figma, just choose the one you need for your specific task.

3 Likes

I really appreciate your in depth answer, thanks for taking the time :pray:

1 Like

I found a related topic but was closed with no replies:
(why can’t I include links here??? this is the internet!)

Stroke alignment is messed up and makes no sense currently, making it impossible to do pixel perfect design.

When zoomed in, you can clearly see that a 1px stroke does not align with the pixel grid in any way.
• If stroke is aligned to center and sitting on whole pixel units the stroke lies shifted between 2 pixels

• If stroke is aligned to outside and sitting on whole pixel units it becomes 2 pixels wide and missaligned with the pixel grid
(why can’t I attach more than one image, this is ridiculous)

• If stroke is aligned to inside and sitting on whole pixel units it becomes 2 pixels wide and missaligned with the pixel grid
(why can’t I attach more than one image, this is ridiculous)

How is this fixed? What logical reason is there for this behaviour?