How to handle dividers in auto-layout lists/tables?

In tables, I currently use a 1px height frame with fill-container width as a divider between rows. I would prefer to use a line but when a line is at the top of a scrollable (clip content) auto-layout list, it is hidden due to the way Figma displays lines (above the path).

I can’t shake the feeling I’m using a workaround rather than a complete solution.

How does your team handle this scenario?

I’m only an intern, but I’d either flip the line or use a 1px thick rectangle instead.

Nothing bad with using 1px frame. This is actually more robust solution when you consider passing your designs to developer. Unlike rectangles, 1px lines render correctly when the points are between pixels (e.g. y: 0.5 px) and this often causes trouble with correct size and frame clipping.

If your separators are all the same color, then it is good idea making it a component. Given the component is a frame, this makes no difference to what you are using inside, line or another frame.

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.