Image for post
Image for post
Illustration by Justin Tran

How Dropbox uses Framer X and real data to design

Earlier in 2018, I wrote about desktop prototyping and how setting plays an important role in designing for desktop interfaces. But the desktop kit lacked one crucial component — real data.

With the release of Framer X, our team set out to rebuild the Desktop Kit from the ground up with real data at its core.

Bringing real data into Framer X

Framer X looks and feels like any other design tool, but under the hood, everything is built on React. This means anyone with a little React knowledge can create new components that do just about anything you can imagine. …

Image for post
Image for post

How setting plays an important role in designing for desktops

At Dropbox, we design many interfaces that users experience on their desktop computers. What’s special about desktop design is that we can’t predict what the user’s screen will look like — messy desktops, noisy wallpapers, hundreds of Chrome tabs, the list goes on.

Despite knowing that most desktops are cluttered and full of distractions, I’m so often guilty of presenting my work as if it were on display at the MoMA.

Image for post
Image for post

Soft-pastel backgrounds, chromeless browsers, and no desktop noise all add up to a beautiful but unrealistic setting.

Designing for the real world

While it’s great to present work in a sanitized format, it’s also important to remember that those scenarios don’t actually exist. In fact, a user’s environment is usually a busy, distraction-prone space. …


Zach Johnston

VP Design at Twingate. Previously Framer, Dropbox, OpenGov.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store