UX Planet

UX Planet is a one-stop resource for everything related to user experience.

Follow publication

4 things no one tells you about prototyping in Figma.

Lorenzo Doremi
UX Planet
Published in
4 min readDec 5, 2020
Photo by Christian Erfurt on Unsplash

Everyone has his favorite prototyping software: some prefer Invision (horrible creatures of the outer world I guess), others who own a Mac prefer Sketch and XD, others Figma like myself.

I have chosen Figma because I started using Windows 7 and had to easily collaborate with other people. This was possible with Invision too, but after 3 days of frustration, I uninstalled it. After some months I started noticing that some practices I adopted weren’t explained in any tutorial, and all came from continuous stressing mistakes and problems I faced while both developing websites and apps and designing. Let’s find out what ruined my workflow and how I personally fixed it.

4) You have to adapt to the resize bias.

Oh god, sizes. Everything looks perfect inside Figma, but when you develop with the same sizes outside, everything looks humongous. Why? Because you never work with a frame the size of your desktop. So you instinctively enlarge font sizes and images to look visible in a smaller rectangle. But when you bring that to full screen, you finally notice how that 24pt paragraph sucks.

Photo by Alexander Andrews on Unsplash

If you experienced this problem, just follow more or less mindlessly size guidelines. Paragraphs should be around 14–18pt, subtitles 24–36pt et cetera. And in general, if it looks good on the small frame, just reduce it a bit again. Then, look at the preview. But never go too small.

3) Do not allow Google Fonts.

Wow, I can finally choose between 8965 different fonts! That is good for the first 5 minutes using Figma. Then, when you can’t even distinguish between half of them and the font preview mechanism is just bad, you’re going to pass hours and hours searching for the right font.

The easiest solution is this:

stop using Google Fonts, create a new project, and save a list of fonts you know and like. Like 20 of them for every need and style. And beware sharing your secret font recipes!

Uncheck them immediately.

2) Fluffy grid columns and rows.

Oh yeah, the Layout Grid is great! let’s center something inside a column!. Oh wait. You can’t.

Replace them with rectangles.

Sounds stupid, but the easiest way is to replace them with invisible rectangles and use them as a guideline to the centering system. This will allow you to correctly center the main objects like Icons in a mobile app design.

Oh you, evil columns.
Solved. Thanks, doppelganger rectangles.

1) Stop using desktop screen resolutions, but calculate the viewport instead.

Premade frame sizes provided from Figma are useful, but extremely wrong when speaking of desktop design.

The antichrist incarnated in a shortcut.

Why? Because those are the resolutions of desktop screens (and missing 1920x1080? really?) but do not calculate the real viewport.
What do I mean? Try designing a website using those sizes, then send the accurate numbers to the developer and prepare to see him scream. Why again? because every browser has its personal bar in the upper part.

Taking Chrome as an example (one of the most used browsers), it allows a viewport of 1920x969px on a 1920x1080px desktop resolution. That's a 143px difference. So, if you’re designing for the web, remember this number: 969px.

proof.

Conclusions

Figma is a great piece of software, and these aren’t inherently his problems, just misleading help-features that the more you know your job, the less you’re going to use.

Published in UX Planet

UX Planet is a one-stop resource for everything related to user experience.

Written by Lorenzo Doremi

A Jack of all trades UX guy. Mainly interested in human-computer interaction, contemporary sociology and art.

Responses (6)

Write a response

I've read quite a few "UX/UI trends in 2022" stories and while they are all interesting, they're mostly echoing the same trends. But this piece wasn't like that; the first half was quite surprising, especially since I was expecting to see stuff already listed elsewhere. Very engaging and inspiring! 🌟

--

Most of these are not UX trends at all.

--

Great article even if I have my doubts about the Air Gestures. Pretty cool feature but not applicable at the moment on Web. We saw a lot of proximity sensors especially during the covid but mostly to open doors. Are there any references about…

--

Splendid job by the author

--

you mention scrollyteling, here is how stroyboarding software can help with it https://makestoryboard.medium.com/how-can-storyboarding-help-visualize-ux-design-2e3d23434674

--

I doubt about the air gestures. I believe accessibility might be something realistic. More accessible products make better products.

--

great post. thank you.

--

Very insightful, made me think from a very different perspective.

--

Elightening and useful article. Great job!

--