Back
Figma

Distraction free prototypes on Figma

A simple chrome extension that focus the attention getting rid of the floating UI.

Last week was the first prototype internal testing at Torca and I wanted everything to be as perfect as possible so I set up a computer specifically for this purpose and decided that the testing was going to be comprised of the prototype on Figma and a Typeform right after followed by some conversation about the experience.

Each of these tools or steps in the testing provided something valuable:

  • With Figma, I could quickly iterate over the prototype in case something needed to be amended like errors, typos or stoppers/blockers.

  • Thanks to Typeform, I recorded the feelings and feedback just after the journey we were testing.

  • And the conversation allowed us to obtain more insights about the entire process and overall mood.

But one of the things I wanted to improve was the way Figma deals with prototypes.

I understand is not a tool as powerful as other dedicated prototyping tools, but is getting significantly better over time and the ups are bigger than the downs so if I could fix that one little thing, we would be good to go.

The thing in question is the overlay that appears inside a prototype when you move your mouse cursor all the way to the top or the bottom. I know this can be avoided by using the fullscreen mode, but I don't want to test like that. It doesn't feel real to me.

Figma on prototype mode showing the overlay

So what I did with my limited dev skills was hiding that using the inspect mode on chrome and it worked like a charm. No more distracting UI floating around.

But as this is something I'll be using often I wanted this to be easily accessible, so a chrome extension sounded like the right thing to do given Figma doesn't have native support for plugins or hacks like this.

This is the video about how it works and below you'll find the link to the extension in case you find it useful for your flow.

Link to chrome store: https://chrome.google.com/webstore/detail/figma-clean-prototypes/dllfomnenkbbgfifpmgmggpplpfkafin?authuser=0