Design with Real Data in Figma

Introduction

Design systems thrive on consistency, but consistency alone doesn’t make a design believable. To truly test a product, you need to see how it behaves when real content flows through it.

That’s where designing with real data makes a difference. Instead of filling screens with placeholder text or static numbers, you can integrate dynamic, real-world content directly into your screens and prototypes. This approach creates realistic designs, sharper usability insights, and stronger stakeholder confidence.

In this article, we’ll explore three ways you can incorporate real data into your design workflow: Figma variables, Google Sheets, and JSON.

To ground these techniques in practice, we’ll walk through three realistic scenarios: an e-commerce product details page (PDP), a flights booking platform, and a restaurant listings page.

Why Design with Real Data?

Before diving into techniques, it’s worth understanding why real data matters in design.

• Improved design accuracy: Realistic content highlights spacing, truncation, and layout challenges earlier in the design process.
• Better usability testing: Participants respond more naturally when prototypes reflect actual scenarios.
• Stakeholder confidence: Designs feel polished and reliable when backed by authentic content.

Using Figma Variables for Real Data

Figma variables allow you to define dynamic values—like text strings, numbers, or booleans—that update across your designs, ensuring consistency while also giving you flexibility to test different scenarios.

Why Use Variables?

Variables are ideal when you want to test how your interface adapts to different scenarios. This could be for a single screen or an entire flow. They’re also useful for localised content, where multiple translations need to be tested before a design can be signed-off.

Example: E-commerce Product Page with Translations

Imagine you’re designing a product details page (PDP) for an e-commerce store. The same layout must support multiple languages: English, Portuguese, German, and French. Instead of manually creating four different versions of the page, you can combine centralised components and use variables and modes to manage the translations in one place.

Here’s how you can set it up:

1. Define Text Variables
   • Create your variables such as product-name, product-description, and product-cta.
   • For each variable, create values in all four languages.
2. Create Language Modes
   • English Mode: Shows “Add to Basket”.
   • Portuguese Mode: Shows “Adicionar ao Carrinho”.
   • German Mode: Shows “Zum Warenkorb hinzufügen”.
   • French Mode: Shows “Ajouter au Panier”.
3. Preview Across Languages
   • Duplicate your default frame and then switch between modes in Figma to instantly view the full product page in any of the four languages.
   • Spot issues such as text expansion (e.g., German labels are often longer) or alignment problems early in the design process.

Benefit: This technique makes localisation testing far more efficient. It ensures that designs remain consistent across languages, prevents layout breaks, and builds stakeholder confidence that the system can scale globally.

Integrating Google Sheets with Figma

The Google Sheets plugin bridges the gap between structured data and your Figma components. By linking a spreadsheet, you can populate and refresh text, images, or numbers directly inside your screens and prototypes. This method works particularly well when dealing with list or grid layouts where elements are repeated—like flights.

Why Use Google Sheets?

Sheets are perfect when your screens or prototype depends on a lot of structured but frequently changing content. They make it easy for non-designers (like operations or marketing teams) to manage the data, while designers simply refresh it in Figma. This keeps prototypes current without slowing down your workflow.

Example: Flights Booking Platform

Using our flight data spreadsheet, you can design a screen that lists routes, prices, and airlines, all powered by real data.

Here’s how you can set it up:

1. Prepare Your Spreadsheet
   • Use columns such as Departure City, Departure Airport Code, Price, Duration etc.
   • Keep each row as a unique flight option.
2. Connect with a Plugin
   • Install a plugin like Google Sheets Sync.
   • Map the layers in your Figma components to the column names in your spreadsheet e.g. Departure to the city text layer, Arrival to the destination text layer, and so on.
   • Once all your layers are mapped, run the plugin by selecting the ‘Fetch & Sync’ button.
3. Update in Real Time
   • When new flight data is added or updated in the spreadsheet (say, prices drop or flights sell out), your can refresh the plugin in Figma.
   • If you have used the same components in your prototypes, you can also update these instances as well.

Benefit: This avoids manually entering data into repeated list/grid layouts. Testers get to experience realistic search results, and stakeholders see how the system handles data changes without you duplicating screens for every state.

Populating Designs with JSON Data

For projects where data comes from APIs or large structured datasets, JSON can be the perfect fit. By importing JSON into Figma, you can simulate how real systems will populate content in production. This approach is especially valuable for listings and hospitality websites/apps, where accuracy and presentation of information matter.

Why Use JSON?

JSON is the closest you can get to real production data in a prototype. It’s structured, scalable, and mirrors how APIs deliver content in a live product. Use it when you have an existing data source and your design involves lists of items—restaurants, hotels, or venues—where each listing pulls multiple attributes.

Example: Restaurant Listings App

Ensure you have a valid data structure. Our demo JSON file includes data for restaurants such as:

• name – e.g., The Ivy Cambridge Brasserie
• cuisine – e.g., Contemporary British
• rating – numerical values like 4.5
• price_level – £, ££, or £££
• address – street, city, postcode, and country
• google_reviews_count – e.g., 10,643 reviews

Here’s how you can set it up:

1. Prepare Your JSON File
   • Ensure the structure is as simple as possible, with keys for each item’s attributes.
2. Import via a Plugin
   • Use a plugin like JSON to Figma.
   • In the same way as we did for Google Sheets, in your card component, map your layer names to your JSON keys e.g. name to the card title, cuisine to a subtitle, rating to star-rating, and so on.
   • Create your listing layout and then insert your component with the updated layer names
   • Duplicate your component as many times as you wish.
   • Select all instances of the component and then run the plugin to sync the data.
3. Simulate Real Scenarios
   • You can swap JSON files (with the same key/value structure) to test different sets of restaurants—for example, listings from another city or restaurants with lower ratings.

Benefit: This produces screens and prototypes that feel like a real restaurant discovery websites/app. Test participants respond to recognisable names, real addresses, and meaningful ratings, while stakeholders can clearly see how the design scales with authentic hospitality data.

The Benefits of Real Data in Prototypes

Working with real data does more than improve aesthetics—it enhances the entire design process.

• Accuracy: Identify design flaws earlier by testing with realistic values.
• Productivity: Save time by automating content updates rather than editing manually.
• Confidence: Give stakeholders prototypes that feel close to production quality.
• Consistency: Maintain alignment with Flex Design System tokens like font-s and content-width.

Final Thoughts

Designing with real data in Figma is not just about making screens look better—it’s about making them work better. From an e-commerce PDP with translations using Figma variables, to a flights booking platform powered by Google Sheets, to a restaurant listings website populated by JSON data, each method has its place.

• Use variables when you want to quickly test multiple scenarios or translations in a single design flow.
• Use Google Sheets when you need to manage structured content that changes often.
• Use JSON when you’re working with existing datasets or dashboards that should behave like live systems.

By weaving these practices into your workflow, you can move beyond placeholders and bring your designs closer to the real-world scenarios they’re built for.

Links

• Preview Flex Design System in Figma
• Purchase Flex Design System