I’m working on converting a Figma design to HTML/CSS for a landing page. Everything looks fine except for image sizing, particularly my company logo. When I take the exact width and height values from Figma and apply them in my CSS, the logo renders much smaller than expected in the browser.
I have two main questions:
- What export resolution should I use when saving the logo from Figma (1x, 2x, or 3x) for a standard web project?
- What unit system does Figma actually use - pixels or points?
I’m confused about the sizing discrepancy and want to make sure I’m following the right workflow. Any guidance would be helpful!
Your logo sizing issue is probably caused by device pixel ratio and how browsers handle high-DPI images. Figma uses CSS pixels, so when you export at 2x or 3x for retina displays, browsers automatically scale them down to fit the actual size. For regular web projects, just export at 1x and use those exact dimensions in your CSS - it’ll match what you see in Figma. If you need to support high-DPI displays, export multiple sizes and use media queries or srcset for responsive design. Also check if any CSS styles like max-width are messing with your image display.
This sizing issue happens because you’re not accounting for the image’s natural dimensions vs. your CSS dimensions. I’ve hit this problem tons of times. Figma uses CSS pixels, which should translate directly to your browser. But if you export at 2x or 3x resolution, you need to explicitly set width and height in CSS to match your Figma dimensions. Otherwise, the browser shows the image at full exported size. I’d export at 1x first to get your layout working. Once that’s sized right, export higher resolution versions for retina displays using the same CSS dimensions. Also check for inherited styles or container constraints messing with your image display - parent elements can cause weird scaling.