7 Components for Designing with Data
These packages will help you strengthen your prototypes with data and measure how people interact with them.
Thousands of packages have been added to Framer X since the launch in late 2018. Though there are many great ones, I've made it my mission to seek out some clear category winners. These tend to line up nicely with the functionalities that make it easy for anyone to turn a basic design into an advanced prototype.
As a product specialist at Framer, the biggest challenge I see product people face is finding an easy, practical way to express their idea they to their wider team through a prototype. The products our users work on vary greatly, from banking apps to gaming systems, but one thing is true for all—the right components save valuable design time and make a project dramatically more effective.
This blogpost outlines a range of packages that can infuse your designs with data or help you collect information on how people use your prototype during testing.
A chat showing real data.
One of the best things about Framer X is that you can design interfaces and simultaneously stress test them with real information.
Here are a few packages that let you do this in just a few clicks.
Download this component, paste in an API, and connect the component to a design. Data Stack takes care of the rest, and fills in your designs with real data, making it easy to validate new ideas on the fly.
This component functions very similar to the Data Stack one above but works by linking to a specific Google Sheet. This is a great way to populate your design with data you may already have on hand. Update the data in the sheet and watch those changes be reflected in your prototype.
Is your team using Airtable instead of Google Sheets? No problem. After fleshing out your idea on the canvas, download this component, connect it to Airtable, and watch your design come to life.
I hear from a lot of teams that use GraphQL to search and filter data in their apps or products. This package will show you what’s possible by incorporating GraphQL into your work in Framer X.
If you want to start work with real-time data, this package is for you. Be sure to check out our dedicated guide on how to hook this up to your prototypes. Product designer Max Steitle also wrote a great blogpost on how to create a working chat prototype with Firebase.
Enjoying this post?
A graph showing active users.
Being able to collect user data as people navigate through your prototype is powerful. Getting this information during the design phase makes the entire process much faster and more efficient because you don’t have to wait for another team to build something for you to test.
Here are the best packages for tracking behavior and collecting data with Framer.
Hotjar generates informative heatmaps that show how users interact with your website or apps. Now, you don’t even have to have a finished product before you’re able to get this information. Download this package, connect it to your Hotjar account, and add it to your project to see how real people interact with your prototype.
Google Analytics is no longer just for live products. Add this component to your next project to gather data under all the same metrics—session duration, goal conversion, behavior flow, and more.
Looking for more?
These components are a simple yet effective way to enrich your prototypes with data or measure users’ interactions at an early stage of the product design process.