Mockup scale

Why a Figma mockup can look too large or too small and how to compare it with the future page.

In Figma, the same mockup can look large, small or cropped. That depends not only on the design but on the viewing mode, window size and system scaling. So concluding that "everything will be huge on the site" from a picture shrunk to screen width is unreliable.

A mockup shows a solution for a specific width. A working site has to behave well at countless in-between sizes that one static screen cannot describe.

Fit width shows the whole but changes the size

When a wide mockup is fitted onto a laptop screen, the app scales it down. This mode is convenient for judging the composition, but text and buttons look smaller than without scaling.

"Actual size (100%)" shows the frame at its original scale. According to Figma's help, a wide mockup in this mode can be cropped on a small screen. That is normal: it does not turn into a mobile version automatically.

Mockup width is not text width

A design can be drawn on a wide canvas while the content occupies a limited central area. On an even wider monitor, the background and decorative elements may continue while the text stays at a comfortable reading width.

So compare more than the outer edge of the frame. Look at the content width, font size, spacing between blocks and how the edges of the composition behave.

A narrow screen needs its own solution

A desktop mockup opened on a phone usually does not demonstrate the future mobile site. In responsive layout, columns rearrange, images are cropped differently and navigation changes shape. Sometimes general rules are enough; sometimes separate mobile mockups are needed.

If the exact behaviour of a complex block matters for the project, ask to see it on a narrow and an in-between screen before development. A static desktop frame does not answer that question.

Check a scenario, not one screenshot

Open the prototype in several modes and compare it with the target devices. Judge whether the text is easy to read, the actions are distinguishable and important content is not hidden. If needed, the designer will explain which elements stretch, which stay in a container and where the composition rearranges.

A mockup helps agree on direction. The final check of scale and behaviour happens on a working page opened in a browser at different window sizes.