Power Your Designs with Real Data in FramerPower Your Designs with Real Data in Framer

The best products rely on data-driven experiences to adapt to users’ ever-changing preferences. Is your team set up to build and test with real data? Keep reading to learn how Framer makes it easy with a new data component.

Jump right to the example file

Here’s a scenario — you’re participating in a user test for your favorite music app. You love heavy metal and you absolutely hate pop music. During the user test they only show you pop songs as recommendations. Is it possible your mind veered from thinking about the user experience of the app to the awful music taste of the designer who built the app? Are you finding it harder to see yourself reflected in the app in your hands?

At the end of the day, design is the manipulation of stimuli and information, so working with the stimuli you are trying to generate feedback from is key to the success of the product you are building.

Real data, made easy

We know that prototyping with real data can benefit your product exponentially, but why isn’t everyone doing it? Historically, sourcing and incorporating this data into your designs was difficult and time-consuming. How often have you meticulously replaced the titles, descriptions, and images on dozens of cards by hand?

To help make that a reality, Customer Success Engineer Iain Kettles has released a new Data Component complete with innovative features to ensure that adding real data to your projects is no longer a headache. Continue reading to explore this ins and outs of this handy new component.

Populate your designs with real data, in seconds

With the Data Component, you can bring data from most sources in a matter of seconds to begin populating and testing your designs with relevant user data.

At the moment, the component supports API, JSON, CSV, TSV, and Airtable data — with plans to support more in the future. You can even use multiple data sources and test your designs with different data sets by seamlessly switching between the different sources.

The Data Component will create as many design components as needed based on the rows of data from your source — no need to worry about creating the correct amount before hand, the data will populate dynamically.

So you’ve got data in your designs. Now what? Let’s take a look at some other functionality the component offers.

Stress test your designs and iterate quickly

Once you’ve populated your designs with data, you’ll probably realize your design doesn’t scale perfectly for every case and there’s some situations where the data doesn’t fit. This is great, because you’ve caught an edge case in your design you couldn’t have found with just using static data alone. You’ve saved yourself from a meeting with an annoyed engineer!

Now you’ve gathered insights from stress testing your design. You’re ready to alter your design component on Framer’s canvas to accommodate the newly discovered edge case and watch the changes trickle down through your prototype.

As the data begins to populate, you can choose how to arrange the items. Framer’s built on top of common web technologies, so we can piggyback off the advanced layout options in the browser. We can responsively scale the items based on the given space, have them wrap across multiple lines, and even set the number of columns to display.

Our designs should be inclusive, and that extends all the way to the UX around how data loads into our prototypes. Not everyone is running light-speed internet connections. We need to take them into account when we’re prototyping and ensure they’re not left staring at a blank screen while the data is traveling through the wires.

The Loading State control allows us to define a visual state that’s displayed while the data is loading. Our prototype is fetching real data over the internet, so we don’t have full control over how long that takes. By combining this with the Loading Delay control we can set the minimum amount of time to wait before displaying data, and accurately simulate scenarios with slower connections. Cue the elevator music.

There’s also an Empty State control which is displayed when no data is returned from our data source. Rather than users looking confused at a blank screen wondering who stole their data, we can display a generic empty state that’s used across our prototype, or inform the user a team of well trained monkeys has been dispatched to look into the issue.

Creating advanced interactions with real data

If stress testing your designs wasn’t enough, we’ve baked some advanced interactions into this component that should spark some ideas.

On item tap interaction

How many times have you had to design a different detail view for each item that was meant to be clicked in a user test? Good news! You never have to do that again.

You can create one instance of a detail view and change the data dynamically depending on which card the users taps.

Open example file

Search interaction

No more fake search bars. Let’s allow users to type a location into an input field and see their expected results when testing a prototype.

By combining this component with the Input from Framer’s Default Components, you can build a context-aware search prototype that has all the bells and whistles you’d expect from a real application. It’s got fuzzy matching built in, meaning we can make typos, enter a non-exact search query and still get relevant results.

Open example file

Sort items interaction

We can search easily, but what about sorting? Using the property controls you can configure your prototype to sort on a specific field and choose which direction it should sort in. The Data Component will take care of the rest—it’s never been easier to show the most expensive product first.

Open example file

Easily extendible for enterprise customers

The Data Component is a generic component, but it’s very easily extendible and customizable to fit enterprise team needs.

You can see how the design team at Farfetch created their own data component to pull in product cards from their website to save tons of time in their workflow.

Designing with real content and data is easier than ever in Framer. Get started and start supplementing your workflow with real data today.

Head over to the Insert Menu to get started with even more premade data components.

Don’t have an account? Sign up for free here.

Found a bug or have a cool idea for the component? Leave them in the GitHub repository or contact Iain on Twitter.

Like this article? Spread the word.

Sign up for our newsletter

Join our newsletter and get resources, curated content, and design inspiration delivered straight to your inbox.