I’m new to frontend development and working as an intern at a startup. They gave me a Figma prototype to convert into HTML/CSS. Whenever I copy measurements from the design file like margins, padding, or font sizes, everything looks oversized on the actual webpage compared to the mockup.
I found that scaling everything down by 0.75 makes it look more accurate, but this feels like a hack rather than a proper solution.
Is this sizing mismatch a common issue? Should the designer adjust their settings or is there something wrong with my CSS approach? Any guidance on the correct way to handle this would be helpful.
This issue often arises due to differences in pixel density and browser zoom settings between Figma and your actual webpage. Figma typically uses a standard 1x pixel density, while many browsers operate at higher densities or with a zoom level exceeding 100%. The scaling factor of 0.75 you mentioned suggests your browser might be set at 125% zoom. Instead of manually scaling elements, ensure your browser is reset to 100% during development and that Figma is also viewed at 100% while measuring. Additionally, check if the Figma design was optimized for a specific screen type or size that might not align with your testing parameters. It could be beneficial to consult with your designer about the intended display specifications.