Optimally presenting Figma-based designs with SwitchResX and the right shortcuts

- Posted in figma workflow

This is one of those nerdy things that I keep coming back to.

In this remote world, we are often screen sharing designs. I believe you need to be accutely aware of how the other side is receiving your output.

Next to making sure you output good sound (a good microphone helps) and while presenting, being wary of not too much “swaying” around, there is one thing that is not that apparent, until you see it on the receiving side. That thing is how your own screen resolution affects how you are able to present designs.

Basically, many designers work on a 27″ desktop screen. If you present directly from a 27″ screen without doing anything specific, the other party is going to have a hard time seeing things from their laptop. The same counts for recording screencasts.

This topic is top of mind because I’ve been recording some videos for the shadcn/ui docs.

So how do you find a good middle ground?

I use this macOS app called SwitchResX which allows you to bind a resolution switch to hotkeys.

I bound the regular resolution of my 27-inch display to F16. This creates the visual equivalent of 2560×1440 (even though the display is actually 4K). I use this when doing actual design work and working.

But when I have a meeting, or I am recording a screencast, I like to hit F17, which I bound to setting up the display for the visual equivalent of 1920×1080. This makes it much clearer to the viewer what is going on.

I also give workshops about Figma often. When screen sharing an app like Figma, and discussing the intricacies of the UI, it makes a world of difference to the viewer that the controls are slightly bigger.

The receiving side might be on a laptop, watching your screen share in a Google Meet meeting, already reducing the visible size once again.

Depending on what you are doing, there’s more you can do:

  • For presenting designs: You can hide the Figma UI using ⌘+/ and use N or ⇧+N to jump between designs
    • Jumping between designs helps create a static image that then has time to get uploaded, for clarity on the other side – swaying around too much while sharing creates a blurry image when network conditions are bad
  • You can zoom completely into specific frames using ⇧+2 to Zoom to Selection
  • For talking about Figma itself: you can also change the size of the Figma UI itself. There’s a shortcut for this: ⌥⌘⇧+ or ⌥⌘⇧-.

I hope this helps someone in their workflow to present designs in a smoother way!

Leave a Reply

Your email address will not be published. Required fields are marked *