Accelerating Tableau with Figma
How a design system for creating new dashboards has enhanced the quality of delivery and contributed to validating our data products.
An alternative Design System
In the Data Analytics team at Oi, we create Tableau dashboards to track the company’s data. Beyond other activities, these dashboards are developed on-demand when other departments identify specific data needs.
There is a discovery and creation phase before reaching the development stage. It was at this point of creation that we incorporated Figma to facilitate prototyping. Thus, we created an “alternative design system” focused on the data analysis our clients perform, with the necessary flexibility to explore new scenarios.
We standardized the visual and functional elements that are part of our ideal Key Performance Indicator (KPI) presentation model. Then, we evaluated the possible combinations to create new dashboard layouts, and with some variants, properties, and a bit of auto-layout, we arrived at a practical set of components suitable for different levels of proficiency on Figma – from beginner to advanced. This includes collaborative and real-time work with the client’s team.
But the objective goes beyond the ease of fitting cards and creating new layouts within Figma. Just as a design system can have its components “coded” to facilitate development, we started “coding” for Tableau — thanks to Antonio Neto. We are making progress with each object or worksheet, for those who use Tableau, to make them ready to be connected to the production database!
These elements are applicable to the layout with cards as done in Figma and validated by the client’s team, making the transition between prototyping and development simpler and reducing delivery time. In practice, this solution not only ensures the quality and efficiency of the dashboards but also helps reduce rework and inconsistencies.
Creating components in Tableau
Continuing with how we work with dashboard development at Oi, our Data Analytics team takes a multidisciplinary approach to working with data. Our focus is on building a data product that facilitates user interaction and makes analysis more intuitive. But in an approach like this, where the quality of our work depends on the quality of previous deliverables from Data Engineering or Environment Quality, how can we contribute?
To help address this, as we saw in Anderson Paes’ previous post, we standardized visual and functional elements by developing a library of components in Figma, offering various chart options and their respective combinations in analysis cards.
And now, we have taken a new step: we have created “bookmarks” within Tableau.
Contrary to what the name suggests, these Tableau bookmarks are not remarked points in a dataset such as a collection of pre-set filters. They are templates – or components – that make chart creation easier for those who are not yet experienced in building charts within the tool.
Thus, a user without experience with Tableau can follow a step-by-step process and, using these templates, find a graphical option we previously developed to analyze their own database.
The idea here is simple: if prototyping in Figma was simplified with the development of the library, now we can also simplify development in Tableau. In practice, we have taken another step in building a “design system” for Tableau.
And there’s more, we don’t just intend to standardize and simplify the development of data solutions. We already have plans for new stages and phases – exciting surprises are coming!
For now, let’s test the current solution with users to gather feedback on how to improve. Soon, we will bring news of our progress and the new things to come.
This is a work in progress.
By Anderson Paes e Antonio Neto
