Why we should use real data to design in Figma

Kernel logo

by Kernel

  ·  

Feb 21, 2022

For any successful product team, it’s undisputed that analytics and user research are integral to understanding users, their needs and pain points. We focus heavily on this data, and rightly so. But what about the data we use when designing solutions in tools like Figma?

I’m talking about images, customer info, figures, how people name things… you get the idea. Most of us only have dummy content available to design layouts and inform what we build. But too often, this leads to hard limits on the way we work, what we create, and ultimately, what our users experience. 

At Kernel, we believe there’s a better way. That every designer should be able to quickly and easily use real-life data in their designs, regardless of their technical ability or where they work. 

Design tools have come on leaps and bounds in recent years

There’s no denying that over the last five years or so, Figma has revolutionised how we work as designers. Not only in making our workflow more efficient with functionality like constraints, styles and auto-layouts, but in setting us up for collaboration and communication in product teams. 

That’s essential when a big part of succeeding as a designer is our ability to sell ideas, validate the problem we’re trying to solve, and bring those helping to solve it along on the journey too.

Figma cursors working on Kernel logo

But we think there’s an opportunity to go a step further 

Think about how we actually use Figma day-to-day, and what we make as a result. A series of static screens with fake customer info. A partly-working prototype with dummy figures. A bunch of mock-ups with stock photos. Sound familiar? 

For all the incredible progress we’ve seen, one part of our work as designers remains largely unchanged. There’s still no easy way to use real-life data in our designs, and as a result, there are limits on what we can produce. 

Designing without real data leads to a whole host of problems

  • We look at the problem through a narrow lens
    We end up focusing on the optimal state, or perfecting pixels, instead of considering all the contexts and use cases someone could experience.
  • This increases bias in our work
    If we take a best guess to fill in the gaps of data ourselves, it’s not representative and relies on our own mental models. So we’re likely to miss things that are meaningful or important to users.
  • Because of that, we make worse decisions
    We can’t fully consider edge cases, errors and all the problems users might face without seeing real data and content in our designs.
  • It takes us longer to get to the impact we want
    When we test static designs, the quality and accuracy of feedback lacks detail. So we delay asking the right questions or spotting things that data would show us instantly. 
  • The result? There’s a gap between the designs we make and the product our users interact with
    This seems almost inevitable given that most tools over index on solving visual problems right now. 

We think there’s a big opportunity to change this, building on the incredible platform Figma already provides.

Kernel plugin linking layers to data

We believe using real data in our designs should be the norm

At Kernel we want to help every designer to use real data easily and quickly, regardless of their technical ability or where they work. 

Some people have already developed tools like Google Sheets sync and Unsplash to help designers reach the next level of realism. Other companies have invested in building their own internal tools from scratch. Microsoft’s Content Reel is a great example, which they generously made available to the rest of the design community. 

But although these are all steps in the right direction, which deserve celebrating, these tools can still be manual to use and limited in their functionality. What if we created a world where working with data was seamless? 

We’re starting to explore how we could solve this, by empowering designers with access to tools that would typically need an engineer’s hand to build. By pulling the power of code into Figma, rather than pushing designers into coding tools. Think of it like the layer beneath the interface; the logic and content that drives a product’s behaviour. 

Kernel plugin populating real data in Figma

3 reasons using real data in Figma will take our designs to the next level 

  • We create better things, faster 
    When we plug real data into our designs, we get insights straightaway. Instead of focusing on our prototype or mocks looking pretty, we can see that custom name field that’s super long, a line of text that loses its meaning, or a photo that’s just not appropriate to pop up on screen. 

    Instead of making decisions based on our biases, assumptions or the optimal state, we design in reality and inform better hypotheses. We ask ourselves important questions faster, or questions we wouldn’t otherwise ask at all. In turn, we discover potential risks, hurdles and constraints sooner, and create a better experience for users. 

    By using different data sets, we can also stress test our design and iterate more quickly, especially for situations like designing in different languages.  
  • We focus on the most important problems
    We see how people will actually experience things, in a range of scenarios, before we even get to user testing. And when we do test, we get richer feedback, because people react more deeply with data (especially if you’re using theirs) than if they’re seeing a static mock.
  • We increase team efficiency
    Knowing about potential risks, hurdles and constraints earlier helps product teams with planning, scoping and sizing. There’s less toing and froing between design and engineering during build too, because neither discipline is surprised when designs get implemented; they’ve already seen what they’ll look like in the wild.

    Add to that the time saved on constantly updating content across all your designs, and the effort reduced in maintaining different file versions - it’s a win win. 

Ultimately, this leads to better outcomes

Here’s the bottom line: using real data helps us design better products. That’s good for customers, businesses and those within them.

We’d love to know what you think 👇

We’re at the very start of our journey and there’s a long way to go. We’d love to hear your feedback, questions and ideas – whether you’re a designer, engineer, product manager, writer, or someone else! 

Share your thoughts on Twitter @usekernel or drop us a message at hello@usekernel.com.

https://www.usekernel.com/using-real-data-in-figma

Try the Figma plugin

We’re onboarding designers and product teams to be part of our early access program

Try the Figma plugin

We’re onboarding designers and product teams to be part of our early access program

Thank you for signing up to test Kernel. We'll be in touch soon to get you set up!
Oops! Something went wrong, please try again

We’ll only contact you with relevant information, no spam