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).
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 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
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 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?
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.
