You will probably agree with us — Lorem ipsum in your designs and prototypes usually doesn’t cut it. Adding real data to prototypes is something many designers need and want but also something that is not always straightforward in implementing. If you design in Figma, the platform itself does not let you add real data to your design. Luckily, multiple plugins and external tools exist to help you solve this problem.
So, which ones to use?
We categorised these tools into three segments, based on their functionalities and how they integrate with your design process. While some are more functionally limited, others are more complex but offer a much larger variety of features.
Before proceeding to our list of tools, we'd like to talk a bit more about the importance of real data in prototyping.
Why Use Real Data for Prototyping?
.jpg)
First of all, prototyping with real data allows you to create realistic interactions and provide better user experiences (and you know that today user experience is considered to be competitive advantage number 1!). Secondly, it enables designers to focus on UI and UX and spend less time adding mock data to prototypes and designs.
It can also give you much more insights about how your interface works as well as point out all kinds of imperfections in your layout or design, such as edge cases and alignment issues. At the same time, using real data lets users have a better understanding of your idea and therefore helps them provide more accurate feedback.
Most likely, with dummy content in the prototype you will focus on the overall prettiness of your design. Despite looking good, it unfortunately might not always highlight all the flaws. Real content gives you much more - you can immediately see that, for example, the text on the front page doesn't make sense or the name box is too small. With the help of uploading real data into your design, it's also possible to create drop-down menus or predictive searches.
Therefore, you'll benefit a lot more from using real data, such as actual photos, figures, contact details, addresses, transaction information instead of fictitious content. You'll just get a better prototype (and eventual product) in the end!
3 Ways to Add Real Data into Your Designs
Although Figma is a really great environment for designers in various regards, it lacks the functionality to add real-life data in designs and prototypes. At weave.ly we know quite a few methods how to do that and decided to share them with you:
1. Plugins that Let You Stay Inside Figma but Are Functionally Limited
The first segment of tools is data population plugins that are easy to install in Figma and that will allow you to almost effortlessly import real data into your design. Yet, that's basically it... Since they are not proper prototyping tools, there's not much else you can play around with. Another remark, they do let you add real content but it won't be live!
Google Sheets Sync
At first glance, it's a perfect tool, as it does exactly what you need - syncing data from a Google spreadsheet into your Figma file.
It's also quite easy to set up. You just create a shareable google spreadsheet and make columns for all types of data you want to appear in your design. Rows and columns are used to populate layers in Figma with the header row containing all of the labels for every column.
This way, headers should match your layer name in Figma. For example a "Call to Action" header in the spreadsheet should match a #CalltoAction layer name in Figma. Don't forget to use the first tab in Google Sheets for the data you want to sync.
It is also perfectly easy to update the content at any time you need it. You'll just have to adjust the data in your spreadsheet and run the plugin again.
Here's two easy steps you need to make to sync your google sheet files with your design:
In addition, with Google Sheets Sync you get several more features:
- Including URLs with images in the columns - setting image backgrounds
- Swapping out Components for specific instances (including Variants)
- Changing colours of your layers
- Manage your data with all of the benefits and features of a spreadsheet
By the way, it is not an official Google product, but a plugin created by David Williames. Here you can find more examples of how to use the plugin.
Unsplash
A fun fact: the Unsplash team really loves Figma, having switched there from Sketch a few years ago.
In the case of this plugin, real-life data takes the form of images from the Unsplash portfolio. You can place real images into your design directly from their platform without leaving Figma - convenient!
It is as easy to use as to install. Search for "Unsplash" in the plugin panel in Figma and download the plugin. Once installed, you can search for photos by keyword, and by selecting a shape that you want to fill, insert them into your design. Here's how:
If you need to scale the image, don't worry you won't lose the quality of the image.
Some designers also appreciate a random image selection feature and the inclusion of presets. However, beware that the plugin is still in beta meaning there could still be some bugs.
To sum up, the Unsplash Figma Plugin is a great way to quickly and easily upload free stock images of a good quality into your Figma designs. Yet, it is really only limited to this functionality.
Content Reel
Created by Microsoft, Content Reel is a Figma plugin that assists you in adding text, URLs, images and icons into your designs. It also allows you to upload your own datasets which we think is a big plus.
As usual, you can find the plugin in the Figma plugin panel and immediately install it. Once done, the Content Reel interface will provide you with a variety of content options to add to your design. Published collections of text strings are really handy!
You can select your text or image layers and click on the relevant element in the plugin. It will be inserted in all the selected layers instantaneously. For example, if you want to create a company's contact profile, Content Reel will suggest you various company names, addresses, phone numbers and email addresses to choose from. Furthermore, you'll also be able to easily customise the format of the data you're adding via a drag-and-drop UI.
Look, how easy it is:
On top of that, you can change the font size and colour, align the text or resize and crop images.
Since sharing content with the community is at the core of Figma, of course you can also do so with Content Reel. The tool allows you to use custom content shared by other users and create your own to share with them.
Another great feature is a possibility to create and manage descriptive metadata, including keywords. This can later help search engines find your content.
2. Prototyping tools with extensive functionalities but that force you to go outside Figma
This group of prototyping tools provides complex solutions in terms of adding real data to your design. What's more, they're not only limited to importing real content but allow you to work with live data in your prototype! The dynamic nature of live-data prototypes create personalised user experience and provides users with even better context.
When you were searching for prototyping tools to add real data into your design, you might have come across Framer. Formerly a quite powerful prototyping tool, it is now mostly a web builder (You need to know a bit of programming to feel comfortable in Framer). With regards to real data, Framer enables you to populate your design via publicly available APIs.
Considering the fact that Framer is transitioning from prototyping to web building, we will focus on several other tools. There is one thing you should keep in mind about these tools in general — you'll need to import your designs from Figma to the tool platform. Another aspect is that not all features are available for free.
Axure RP
Axure RP is a UX tool that helps you build functional prototypes and is a true pioneer in the prototyping market.
Before you proceed to adding real data to your prototype, you'll need to import your designs from Figma (also XD or Sketch) into Axure RP by installing their plugin. Fortunately, imported Figma layers are converted to widgets, and with the structure of the layers being maintained you can still adjust your designs if needed.
After importing, you have several options to add real data to your design. Axure lets you copy data from external spreadsheets like Microsoft Excel and Google Sheets and paste it as a table widget. If you work with Axure's repeater widgets (used to display repeating patterns of widgets), the procedure is basically the same. You can create a new repeater, open the repeater dataset and paste your data in there. Dataset cells in repeater can also contain images and links. For instance, you can choose any desired image file through browsing your computer.
Here's an example of populating a design with real data using a repeater:
Protopie
Protopie is a fairly famous prototyping tool that allows you to create, test, and share your prototypes. The tool is compatible not only with Figma, but with Adobe and Sketch.
So, first you prepare your design in Figma (or elsewhere). Afterwards, you'll have to install a Protopie plugin that will facilitate the transfer of the designs to their platform. Once having switched to the platform, you'll get access to a large variety of features for prototyping. Real-life data being of them. Basically, you can populate the fields of your prototype with the live input of actual users. This is great, because as you know using live data significantly increases fidelity and functionality of the prototype.
However, when it comes to importing real data to your design in bulk, it is not as simple with Protopie — which is sort of surprising considering the general complexity of the tool.
At the moment, embedding real data like images, audio or video URLs into prototypes is only possible to a certain extent with Protopie Connect and IFTTT (Webhooks) integration that are available in paid tiers of the tool, Pro and Enterprise. With the Enterprise plan, you can, for example, connect to public APIs through custom Plugins. However, features such as reading data from CSV files is currently not supported.
3. Prototyping tools with rich functionality that let you stay inside Figma
In our opinion, tools in this segment are the most convenient in use, as they let you stay in one ecosystem. You may wonder what's so crucial about staying inside Figma? Seems like it's not a big deal if you take your work from Figma, export it to the platform like Protopie and do all the tricks directly there?
Well, to many designers it actually can become quite a big deal!
Imagine you've already exported your prototype, uploaded all the necessary data and started testing but then.. your design changes. Furthermore, with the rising popularity of design systems, it’s becoming especially crucial to maintain all design assets in a single ecosystem.
Weave.ly
Weave.ly is a new code-free prototyping tool operating as a plugin for Figma. As a designer, you get to stay in the same environment without any need to export your work to some other platform. At the same time, you have access to bunch of prototyping features you wish Figma had, such as conditional interactions, working input, maps, camera access, etc.
Adding real content into your design is basic weave.ly functionality which takes two steps to complete.
First, using the weave.ly plugin you tag layers in your Figma design with the desired functionality. In this case it’s a matter of indicating which frame will contain the data.
.png)
Second, weave.ly has its own spreadsheet system which enables you to import data directly from a CSV file. In the weave.ly editor you bind the columns of your table to specific elements of your design
.png)
That’s it, weave.ly will now automatically generate a web app from you design that contains the data from your CSV file. Moreover, if you update data in the spreadsheet your prototype will automatically update as well!
.png)
You can also connect to any external data source through a Rest API. Various services and softwares like Wordpress, Webflow or Google Sheets have an API you can connect to. Many other services have public APIs too. You can just search for something that interests you specifically and then check the developer section of the website.
Bravo Studio
Bravo Studio is a no-code platform that mostly focuses on building production-ready apps. The reason we included it in the list (or excluded other app-building tools) is their extensive integration with Figma.
With Bravo you can create a design in Figma (or Adobe) and then connect your design with real data from Google Sheets by using a Sheety API. Apart from that, users can connect their mobile apps with Airtable, Webflow, Wordpress, Integromat and many others via APIs.
Building a prototype from you Figma design with real data in Bravo happens in four steps.
First, you’ll need to add Bravo tags to the names of specific layers in your design. This allows Bravo to infer which parts of your designs are to contain data. You can use their Bravorizer plugin for this.
Second, you’ll need to create an API from your google sheet using Sheety. This will enable Bravo to read and write data from and to your google sheet.
Third, using Bravo’s API collection builder you’ll need to configure the right API calls to your auto-generated Sheety API URLs to retrieve the data you need in your prototype.
Finally, you’ll need to instruct where to show which data elements of your google sheet by binding specific layers of your design (which you tagged in the first step) to data coming from the Sheety API.
And that's how you do it:
