Building Feedzai’s First Figma Charting Library: A Summer Experience

The beginning

This summer, I felt the need to do something different than relax on beaches and soak up sun. Instead, I ventured into the world of internships. Prior to the end of the first year of my Master’s degree, a teacher told us about an opportunity: applying for a summer internship at Feedzai. Since I was feeling a thirst for learning more about the world that I will be facing after graduation, I decided to apply to this internship in a team that works in a field that interests me a lot: Data Visualization.

The project

The internship was focused on building the “Figma Chart Component Library”. The main goal of the project was to create a Figma Library of charts that would help Feedzai’s Data Visualization and UX teams in their mockups creation process. The charts used to be created manually and from scratch, each time.

In addition to helping the teams, this library was also designed to enforce a set of standardized styles in charts, and avoid inconsistencies such as the color of the axis, typography, or the thickness of the lines.

Organizing the libraries

From the beginning we knew we wanted to create our own library. This was necessary to fulfill our flexibility and personalization needs. But this didn’t mean that we couldn’t find some inspiration from the materials that already exist on the internet. Therefore, at the beginning of this journey we focused on finding inspiration in existing libraries, such as Ant Design Charts for Figma and Feedzai’s Altair theme.

From this research, we moved to brainstorming what the team needed, what elements were important, and why. After some conversations, we settled, for now, on three different charts: line, bar, and scatterplot. The recurrence of the visualizations was the main criteria.

Inspiration: check.

Charts for the library: check.

But how do we organize it in a way that is friendly for developers to maintain and for users to use?

We decided to split the component library in two. One component library contains what we called the Base Components — all the elements such as text elements, ticks, grids, marks, and axis. The other is the actual charts.

This type of organization allows the user to choose if they want to enable just the Base Components, without the weight of the charts in the Figma files.

Bar Chart component organization

Problems and solutions

Just like almost everything in the world, creating something always comes with challenges. These components were no different. Building some components was a relatively straightforward task. Others required more work and research. Although this was challenging, my pre-existing Figma skills were definitely upgraded.

Axis: We had the goal of creating a set of axes — quantitative, discrete and continuous — that would meet the team’s requirements. For example, the team needed for the axis to resize automatically when the user changed its size. To achieve this, we used the auto-layout functionality. This was also very useful in the spacing mode of the characters in the axis because, if we gave a particular spacing between each label, for example, when resizing, the space remains the same. This leads to a possible distortion of the component; when we use auto-layout, the spacing is guaranteed and the resizing will always be proportional between the tick labels.

Tick line:

We implemented a Tick Line component to create dynamically sized charts, where the ticks, grids, and other elements were perfectly aligned and resizable. It combines the Text Elements, a segment of the baseline, the tick element, and the individual grid line — a later addition that was put in place after brainstorming with the UX Team.

Grid Line: The Grid Line component, as explained above, was built within the Tick Line. To use it, the user has to enable the hide mode — that by default is disabled — from the grid line element inside the component. This was a solution to guarantee enough flexibility to the element. This way, users who want to create their own charts using the Base Components can control how it looks.

Bar Charts: The goal was creating a dynamically sized bar chart. We also wanted each individual bar to have different heights. To achieve this we used, again, the auto-layout feature and, with help of the UX team, we implemented padding — horizontal or vertical, depending on the position of the chart. This feature allows us to have the resizing setting as Fill, but give different heights to the individual bars.

To put the charts together, we used the absolute position feature throughout the library components. This feature was particularly important in the overlapping of, for example, the axis and the bar elements to create the Bar Charts. It gave us the freedom to place the front element on top of the bottom element, create a group with both, and add some constraints so they would resize successfully.

Final Thoughts

I’m particularly happy with the final result. This Figma Chart Component Library was built on top of hard work and research that enabled us to achieve our goals. I’m confident that this library will have a positive impact in the next few years for the Data Visualization and UX teams, in their way of creating mockups in an agile way.
I’m also very happy with this internship and the things that I’ve learned, in both a professional and personal way. I learned a lot about what I could expect in the future, how to seek help, and learned not to try to discover everything by myself.
I would like to thank the Data Viz Team that welcomed me. To Beatriz Feliciano, Javier Pérez, and João Palmeiro for the patience, kindness, and help and especially to Rita Costa for the amazing support throughout the Internship and for your willingness to help me promptly.
I would also like to thank Inês Almeida and Márcio Moreira from the UX Team for the availability to help and to Feedzai for the incredible and enriching opportunity that this internship was.

And to anyone who is wondering if they should apply to an internship at Feedzai, the answer is: ABSOLUTELY. The culture of help that exists between people is amazing and the things you learn make it worth working during the summer break.