Lines not centered on origin?

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

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:

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

@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 🙏

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.

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

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?

Type the width and height coordinates manually. Go up or down .5 for a half of pixel.

I also had an issue with my plus (+) sign in my design. When I altered the line weight it just looked weird, meaning, the lines lost the center. I agree with those who mentioned using a path instead of a line.

Also I figured neither of them occupy space, which reminds me the “outline” property in CSS - undesired for a perpendicular separator. Try auto-layout on 2 rectangles and a line in between, set to say 10px. I think the line (tool) should encapsulate the weight amount of pixels so that it can differ from a regular path.

Another workaround can be using the Arrow tool instead of line and setting start/end points to none.
Or just temporarily setting the start or end point for the regular line to arrow and then setting it back to none.
Both options center the origin of the line.