SVG components exported from Figma display incorrect positioning in VS Code

Other Questions Figma
1

I’ve been working with Figma for web design lately and ran into a frustrating issue. When I export SVG graphics from my Figma project and import them into my HTML file, the positioning gets completely messed up. Even though I copy the exact CSS properties from Figma, all the elements appear in wrong locations and have incorrect dimensions.

I attempted to fix this by creating a larger artboard in Figma, but the same positioning problems persist. Should I be setting up my Figma canvas to match my screen resolution exactly?

Here’s my current CSS setup:

body {
    font-family: 'Roboto', sans-serif;
    background-color: #F0F0F0;
}

.navigation {
    display: flex;
    position: absolute;
    width: 100%;
    height: 70px;
    left: 0px;
    top: 0px;
    background: #1A5490;
    box-shadow: 0px 3px 20px 3px rgba(0, 0, 0, 0.25);
}

.brandLogo {
    width: 320px;
    height: 180px;
    left: -120px;
    top: -55px;
    position: absolute;
}

.mainHeading {
    position: absolute;
    width: 540px;
    height: 90px;
    left: 80px;
    top: 280px;
    font-size: 58px;
}

.heroGraphic {
    position: absolute;
    width: 580px;
    height: 440px;
    left: 180px;
    top: 520px;
}

The SVG elements just won’t align properly no matter what I try. Any suggestions on how to fix this workflow issue?

2

i’ve dealt with this figma export mess too… switch to relative positioning instead of absolute - that usually fixes it. also double-check your svg’s viewBox is set correctly, that’s what breaks it most of the time. you might want to export as components instead of raw svg files.

3

Yeah, this happens all the time when moving from Figma to code. Figma uses its own coordinate system, but browsers work differently. When you export SVGs, they keep their absolute positioning from the Figma canvas - but your HTML starts fresh from the top-left corner. Don’t copy the exact CSS values from Figma. Instead, rebuild your layout using CSS Grid or Flexbox rather than absolute positioning everything. Export your SVGs as standalone graphics without the positioning data, then position them with CSS in your HTML. You’ll get way more predictable results and better responsive behavior this way.

4

Figma treats everything as fixed elements on an infinite canvas, but browsers need proper document flow. Those negative positioning values like left: -120px and top: -55px? Red flags. They’re straight from Figma’s coordinate system and won’t work reliably in HTML. When you export SVGs from Figma, strip out all positioning properties and start fresh. Use your browser’s dev tools to position elements visually instead of copying Figma’s CSS values. I learned this the hard way after debugging similar issues for hours. Treat Figma as a design reference, not a CSS generator.