This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Ryhan Hassan
Posted Aug 16 - Read on Facebook

Not sure if other folks have tried this yet, but just wanted to share a quick technique for prototyping things on desktop.

I've spent a bunch of time at Dropbox experimenting with native UI like the menubar app, windows, and overlaid UI (like the Dropbox badge). By default with almost every prototyping tool I've seen, designers tend to try to fake a user's desktop, which means that you miss out on seeing how well it interacts with a real desktop environment.

Rather than recreating / faking a user's desktop within a prototype, I've found it super useful to just bundle Framer within Electron. This way I can try out and present a prototype within the context of my actual desktop, and see how well it interacts with my real windows.

On top of the built-in templates for menubar apps and windows, it's also been interesting to make interfaces that float on top of other windows by sizing a prototype to the full width/height of the screen and setting a transparent background.

Anyways, hope this is helpful!

6 Comments

Westin Lohne

dope.

Josh Puckett

Strong hire 💪🏽

Jiho Choi

Great!! That's what I want:)

Jared Palmer

Ryhan Hassan nice. just tried this myself with webpack-dev-server running concurrently

Gregory J. Orton

Any tutorials on 'bundling' electron with framer?

Ade Adegoke

Wow that looks great, do you mind sharing the code ?

Read the entire post on Facebook