Sketches to Dashboards: Figma’s Role in Designing Data-driven UIs

Regardless of the industry, from health to marketing, each niche uses dashboards to visualize different metrics which have a significant impact on their business decision process.

The demand for dynamic, informative, and stunning dashboards has grown exponentially. In their wishes to give the clients what they want (or surpass their expectations), the BI developers have harnessed a powerful tool like Figma. Now they’re transforming boring sketches into a captivating design, which is later turned into an interactive and impactful data-driven dashboard.

In today’s article, we’ll see why Figma is our ally when it comes to going to the competition to make the most shining and useful dashboard to fulfill the wishes of our clients.

So let’s start the journey, folks 🤠

What is Figma?

So far our team has been composed of dynamic SQL objects, cursors, JSONs, and more, but now it’s time for something different, where the main topic is related to our creative side and our eye for beauty.

Our new ally, Figma, is a super-capable design tool that supports us in the process of creating everything from websites and apps to logos. In our case, it’s particularly outstanding for designing dashboards

Personally, I believe that Figma has successfully replaced pen and paper in certain cases, although I still enjoy making sketches on paper from time to time

If you’re interested in giving Figma a chance, here’s a cool resource to help you take your first baby steps on an amazing journey into the world of design.

Crafted components for Tableau

There are countless things you can do using Figma, but personally, I use it to create things like background images, navigation bars, and complete dashboard design that can be easily modified (especially when you’re dealing with a demanding client, you know how it can be).

Navigation bars

Below are a few navbars I designed using Figma and integrated into Power BI and Tableau dashboards.

Some navigation bars I designed with Figma and used in Tableau and PowerBi

Backgrounds for reports

I don’t really like using all-white dashboards; therefore, i’m exploring ways to add color or alternative background styles to my dashboard designs.

Some of the backgrounds i used in my designs

Sketches

I have to confess that there are times when I still do my sketches on paper, particularly when a design idea strikes unexpectedly. However, I prefer using Figma for my sketches because of the convenience of quickly sharing them with others.

Some of my sketches for a dashboard

How do I use it?

The approach I take when creating a new dashboard involves several steps:

1. have the first discussion with the client to gather requirements for both data and, of course, the design aspects (particularly focusing on the color pallet)
2. do a bit of research for inspiration (my favorite sites for inspiration are: Dribbble, Behance, and Pinterest), and think about what types of charts o should use. I highly recommend exploring these platforms for ideas.
3. open Figma and create a sketch based on the client's description
4. present my prototype to the client and discuss on top of it, noting any requested changes and additions
5. implement the changes within Figma and go back to the client for the final confirmation
6. once i receive the awaited approval from the client, i move on to executing the design using either Tableau or Power BI
7. reconnect with the client for a follow-up meeting, for any remaining adjustments.

Example

I started with this design

After some discussion and research time, I changed it and ended up with the second version of it

and finally, the final Tableau dashboard looks like the one below

Summary

Figma has become my partner in crime when it comes to turning sketches into interactive and eye-catching data-driven dashboards. It saved my life from the hassle of redoing work when the client brought a different design requirement or any other element that affect the overall look.

And to be honest, learning Figma is relatively easy and can lead to an awesome experience.

So what are you waiting for? Take the plunge, craft those stunning dashboards, and let Figma be your sidekick on this creatively fulfilling adventure.

Expand your knowledge, unlock new opportunities, and stay ahead in this fast-evolving data landscape. Visit my article collection and embark on an exciting journey of discovery today. Happy reading!