Skip to main content

So I have a problem with viewing my design in Figma.
I am designing a desktop app interface on a 1440px frame, which suppose to be some kind of standard for desktop apps, and I am using component libraries such as shadcn.
The problem is that library components use font size 14px, which is same as the size that is used on Shadcn website.
BUT when I use those components in my design, they are just too small for the window and 14px text is barely readable.

I tried to understand what is wwrong so I took a screenshot of the Shadcn dashboard example in the browser, pasted it into Figma and tried to match font sizes. And I needed to use font size 18px to visually match the text on the screenshot.
I also looked at Notion desktop app, as I personally consider this app to be some golden standard - good layout and texts are readable, but not too big.
So I took screenshot of Notion app, pasted it into Figma matched font size and again - 18. And if I inspect the text through developer tools, the font size is 14.

I found out that this happens, because my system uses 125% scaling, so everything is scaled up, and the font that is technically 14 is scaled up and visually is 17.5/18.

So here is the problem: I can't use original components for my designs, because they are just too small, while in the reality they will be scaled up. And therefore I just don’t see how my design will look in real life. The solution is to just remade all the components with custom sizes, so they look like they would in reality.


I also tried using preview but it didn’t really help, at least in the way I expected.
When I am using preview in "Actual size (100%)", the elements' sizes and fonts are scaled to match the system, but the frame itself is scaled up and occupies the whole screen, which makes the frame 1800px wide, not 1440. So it doesn't really help because the design is much bigger than it is.

And if I choose other scaling options, like "Fit width and height" or "Full screen", it's even worse, because even though the frame size is roughly 1440px, but then the fonts are actually 14px and they are barely readable

So, again, it is recommended to make designs on frames with sizes that correspond to the size of windows of the app in the system, but component libraries use sizes for elements and fonts, considering the scaling by the system.
BUT then, these components are impossible to use in frames with sizes corresponding to app windows, because they are simply too small.
And I just can't understand how to make design and to see how it will look in reality

So I want to know how experienced designers handle this. Do you design desktop apps on smaller frame sizes, or do you scale frames in some way?

Or that's me who is doing something completely WRONG?

Be the first to reply!

Reply