I’m working on a team project and we hired a designer to create our website layout in Figma. But now I’m stuck. When I try to code the landing page, all the dimensions from Figma seem way too big. For example, it says the navbar should be 135px tall. That’s huge!
I’m having to guess and check to scale everything down so it looks right in the browser. This is eating up a lot of time I didn’t plan for, and we have a deadline coming up.
Is this a problem with how the designer set up the file? Or is it something in Figma itself? Does anyone know a quick way to scale all the dimensions down to realistic sizes for web use? I’d really appreciate any tips to speed up this process!
This is a common issue when transitioning from design to development. The designer likely created the mockup at 2x or even 3x scale for higher fidelity. To address this, you can use a scaling factor in your CSS. For example, if everything seems twice as large, try setting your root font size to 8px instead of 16px, then use rem units throughout your CSS. This way, you can maintain the proportions from the design while reducing overall size. Alternatively, discuss with your designer about providing a scaled-down version or including clear annotations for intended pixel sizes in the final implementation. Communication between design and development teams is crucial for smooth workflows.
I’ve been in your shoes before, and it can be frustrating. Here’s what worked for me:
First, check the Figma file’s resolution settings. Often, designers work at 2x or 3x scale for retina displays. If that’s the case, you can divide all dimensions by 2 or 3 to get web-friendly sizes.
Another approach is to use CSS variables for key measurements. Set these based on the Figma values, then adjust one central variable to scale everything proportionally. This saves time and maintains the design’s intended ratios.
Lastly, consider using a CSS framework like Tailwind. It has built-in scaling utilities that can help you quickly adjust sizes without manual calculations.
Remember, clear communication with your designer about expected output is crucial for future projects. Good luck with your deadline!
hey man, i ran into this issue too. its prob cuz the designer used a larger canvas size. u can try scaling everything down by 50% as a starting point. or ask the designer to export assets at 1x scale. good luck with ur deadline!
yo, i feel ur pain. been there done that. One trick i use is the inspect tool in figma. it shows u the actual px sizes for stuff. also, try using percentages instead of fixed px in ur css. that way it’ll adjust better to different screens. hang in there bro!