Converting Figma line coordinates to CSS positioning issues

Other Questions Figma
1

I’m trying to add some decorative lines as background elements on my webpage but running into positioning problems when converting from Figma measurements to CSS.

I created two diagonal lines in my Figma design on a 1920x1620 canvas. When I copy the width, height, and position values directly from Figma to my CSS, the lines appear in completely wrong locations on the actual website.

My HTML structure:

<div class="container">
    <img src="images/stripe1.png" alt="decoration_line_1" class="stripe_1">
    <img src="images/stripe2.png" alt="decoration_line_2" class="stripe_2">
</div>

My CSS styling:

.container img {
    position: absolute;
}

.stripe_1 {
    left: 1291pt;
    top: 417pt;
}

.stripe_2 {
    left: 1315pt;
    top: 671pt;
}

The positioning is way off from what I see in Figma. What’s the correct approach to transfer these coordinates accurately? Any help would be great!

2

Check your browser dev tools for CSS unit parsing errors. When you copy from Figma, hidden characters or formatting issues can completely break positioning. I’ve seen coordinates look perfect in code but not work because of invisible formatting problems. Different browsers also handle large absolute positioning values differently - Chrome and Firefox can render the same coordinates with slight offsets. Try CSS calc() with viewport units instead of fixed pixels, like left: calc(67vw + 20px). This scales better and completely avoids canvas size mismatches.

3

you’re using points (pt) instead of pixels (px) - that’s messing up your positioning. figma gives you pixel values, so use px units. also check that your container matches your figma canvas aspect ratio or everything gets scaled weird.

4

Also - set explicit width/height on your container or the absolute positioning won’t work right. Browser will just pick random dimensions and your figma coords will be completely off

5

Had the exact same problem when I started converting Figma designs. The issue is Figma assumes your webpage is exactly 1920x1620 pixels, but your actual container is way smaller or different proportions. When you use absolute values like 1291px from the left, you’re positioning based on that full canvas size. I just calculate relative positioning instead - divide your Figma coordinates by canvas dimensions to get percentages. So 1291px left on a 1920px canvas becomes 67.2% from left. Way more reliable across different screens and container sizes.

6

The real problem isn’t unit conversion - you’re using absolute positioning without setting up a reference frame. Add position: relative to your container so the absolutely positioned images anchor to it instead of the viewport or document body. Also check that your container dimensions match your Figma canvas proportions. If your container’s smaller than 1920x1620, those big left values will shove your elements completely off-screen. Try percentage-based positioning or CSS transforms instead - they’ll work better across different screen sizes.