Designing with real data

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. We’re excited to share a few components we created in our first week of experimentation.

Localization testing with Google’s Translate API

Wish you could quickly translate your text into German to check if you’ve left enough room for localization? We created a translator component that uses the Google Translate API to convert your text into over 100 languages.

Dynamic wallpapers with Unsplash’s image API

Want to quickly display your design in a realistic browser environment? We created a browser component that places your page in a Safari or Chrome browser with a random wallpaper from the Unsplash API.

Realistic browsers with Statvoo’s favicon API

In our previous Desktop Kit, we only included a Safari browser despite Chrome having almost 60% of the market share. Using the Statvoo API to pull in a site’s favicon, we were finally able to create a realistic Chrome tab.

Community made components

There are so many incredible data sets made available in public APIs that we’re only just beginning to scratch the surface of what’s possible. The community has already published some amazing components in the Framer X Store that allow you to pull in things like realistic avatars, interactive Google Maps, playable YouTube videos, and even a Spotify player.