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.
Build something with your company’s API
Not every company has a public API like Dropbox, but there’s a good chance you can get access to an internal API at your company. I’ve found that engineers are usually excited to see designers building on top of their API and are thrilled to lend a hand. If you work on a product that has an internal API, you can use the same techniques to start designing with real data.
“When we don’t work with real data, we deceive ourselves”
― Josh Puckett
The goal of pulling real or realistic data into our designs is to bring us closer to the final product. By designing with real names, real photos, and real content, we gain empathy for the people who use our final product.
Bringing the Dropbox API into Framer X
Designing with actual user data is something we’ve long dreamed of but was always just out of reach. We had built a Framer Studio module that pulled user data from the Dropbox API (using OAuth) but it required a number of technical steps and JavaScript knowledge to set up. Larger companies with dedicated design tool teams have built powerful Sketch plugins that pull in anonymized user data, but we’re just not there yet.
With Framer X, we were able to quickly create a Finder component that pulls in the data exactly as it exists in your Dropbox. In the example below, I authenticated my personal Dropbox account with the component so what you’re seeing are my real Dropbox folders.
Connecting the Dropbox API not only enables our team to design new features with their own folders as source material, but we can also supercharge design research by letting users see their actual content on the screen.
Now that we have access to real data in Framer X, we can bring almost any design to life with real data structures. In the Dropbox Desktop Kit (see below) you’ll find this fully interactive Finder window — give it a try!
Dropbox Desktop Kit X
You can now download the Dropbox Desktop Kit in the Framer X Store. We rebuilt it from the ground up with code and real data mixed in to make the components more powerful than the original Desktop Kit.
Inside you’ll find over a hundred macOS UI components ranging from buttons and push notifications to working applications.
😊 Download and enjoy!
Download the Desktop Kit in the Framer X Store and let us know what you think! We’re planning to add Windows 10 components soon.
Huge thanks to Justin Tran for the illustration, Wes O’Haire for helping create the Desktop Kit, and Andrea Drugay for helping write this post.
Want more from the Dropbox Design team? Follow our publication, Twitter, and Dribbble. Want to make magic together? We’re hiring!
