Published on | Prototyping: From UX to Front End — Medium Zach Grosser

Figma is an incredibly powerful design tool. It’s well-known for it’s real-time collaboration, and web-based interface. With a couple quick URLs, Figma becomes a powerful presentation tool too.

@figmadesign hack of the day: add “?viewer=1” to any URL for a buttery smooth viewing experience

— @zoink

Here is what my Figma file looks like:

I’m using the desktop client which, much like other popular desktop apps today (Slack), is an Electron-based app.

By clicking the share button in the top right corner, you can enter an email address to invite others to collaborate, or generate a shareable link:

It’s this shareable link that we’ll be altering. Mine looks like this: http://ift.tt/2mPBnpV

I’ve connected to a secondary display, full-screened a Chrome window, and can now paste in one of the two following URLs:

figma.com/mobile-app

This requires login to a Figma account in this browser.

http://ift.tt/2mnVEqD?viewer=1

This is just the aforementioned shareable link with “?viewer=1” added to it.

The difference between the two highlighted below:

mobile-app

Left: Figma app on primary display, with frame selected | Right: figma.com/mobile-app in Chrome while logged into Figma account

?viewer=1

Left: Shareable link opened in Chrome | Right: Shareable link opened in Chrome with ?viewer=1 appended to it

While ?viewer=1 is super fast, smooth, includes the menu in the upper left corner, and does not require login, mobile-app is a little cleaner with the black background and no user interface. You can switch between Frames (Figma’s term for an artboard/canvas) as you would between multiple slides in presentation-specific software. With the 1.4.2 release of Figma you can switch between Frames easier using “N” and “Shift + N.” Whichever Frame you have selected is the one that is displayed on the secondary display. And if you’re in fullscreen mode (⌃⌘F or View > Enter Full Screen) you can hide all of Chrome’s UI (⇧⌘F or View > Uncheck “Always Show Toolbar in Fullscreen), so that only your Frame is visible.

The really impressive part is that you don’t necessarily have to plug your computer into the secondary display. Your presentation display could be a different computer, in a different location, and even—since Figma is web-based—using a different operating system.

If you’re purely looking to present from a browser, Google Slides will let you do this (from the Google Slides menu: File > Publish to the web… > Publish), but a refresh is required for any changes whereas Figma is always live.

Thanks! ✌️

Special thanks to Dylan Field and Rasmus Andersson.

Interested in getting started in presentation design? Check out:

Presentation design, an intro

Using Figma for Presentations was originally published in Prototyping: From UX to Front End on Medium, where people are continuing the conversation by highlighting and responding to this story.

Using Figma for Presentations

Cool stuff, every week

More Articles