Project Overview
At our company, we manage a diverse suite of web products, including internal portals for employees and external platforms serving millions of users.
With the transition from Sketch to Figma, we urgently needed a comprehensive component library in Figma to streamline and standardize our design process.
I took the initiative of creating a component library in Figma, enabling our design team to focus on crafting consistent and complex interfaces without having to spend time on the technicality of creating components.
About the Project
Timeline: 2024
Role: UI/UX Designer
Client: Leading employee benefits provider (legal group plans)
Challenges
- Some products had outdated styles, while others were rapidly developed using MUI React JS components, leading designers to rely solely on wireframes or resort to Photoshop and screenshots to visualize the final application screens.
- Our products rely heavily on large data tables, which are tedious to manage with design tools. The designers needed efficient solutions.
Solution
- Implement cross-product component audit
- Create a scalable component library in Figma
- Test the library component within the team
Impact
- Days of work reduced to a single click.
- 4 times faster design process.
- Cross product accommodation
Now, let’s dive deeper into the details.
The Idea
Our design process includes wireframing before high-fidelity designs. With our move to Figma, we switched from Miro to FigJam.
At first, designers saw this as an unnecessary extra step. Why wireframe in FigJam only to recreate everything in Figma later? Why not start directly in Figma?
Well, here’s the issue. When the designer presents an early draft using hi-fi elements, stakeholders often mistake it for the final design, even if it’s just a concept. This leads to confusion, panic, and frustration because they feel left out of the decision-making process. Then, we have to reassure them—”This is just the first draft!”.
We couldn’t afford any friction in our processes with stakeholders.
That’s when it hit me—why not create a wireframe mode using Figma variables?
This was a game-changer!
Now instead of spending days or even weeks of intense hi-fi prototyping, you can just do 1 click, and switch from wireframe to hi-fidelity mode.
Well, creating the design system accommodating this idea was of course not a one click job 🙂
The Approach
- Exploit the full potential of Figma
- Work smart, not hard
- Agile
Leveraging Figma’s variable modes and advanced prototyping, I designed components with full visual control, allowing seamless adjustments through variables.
Although the product team has on its radar the initiative to align all products with one general brand style, for now, the designers have to deal with 2 different existing design styles.
With this new component library
we have 3 in 1
Work smart, not hard:
My approach was to create powerful functional elements that can be re-used to create other components. I used the properties, nested components, and variables to craft the main master components that later were used to make other.
After completing most of the main components, I focused on data tables.
My thorough research of data tables in the Figma community left me with the only option, crafting my table component that would meet our team’s needs. It wasn’t an easy journey but the outcome was great.
The designer can add, and remove as many columns as needed, quickly change the type of the column from data to icons and more, and resize the table both vertically and horizontally.
As a result,
working with data tables is now 4 times faster
I also included some basic micro-interactions which give a nice touch to the prototype when you share it with stakeholders.
Another example of “nice to have ” functionality was the interactive dropdown menu within the component library.
This saved so much time when communicating one of our design projects, eliminating repeated stakeholder questions like, “What are the selection options in that dropdown? Make sure the list is correct.”
Conclusion
The component library made a significant impact on our product design workflow.
- Days of work reduced to a single click.
The process of converting wireframes into hi-fi designs is now eliminated for everyone in the design team. - 4 times faster design process.
Smart components are easier to use and re-use. Enhanced table components are a major part of our team’s daily work, so managing large data tables with just a couple of clicks was game-changing. - Cross product accommodation
The new component library was able to provide components for 2 existing design systems. Which makes the communication and delivery process of the current designs more flawless.
Whats Next
This project is ongoing, I am continuing to add more components and refine the existing ones based on the team’s feedback. Meanwhile, we are working on the guidelines and documentations.
While trying to meet the designer’s daily needs, I also started to implement something similar for product owners and other parties.
- Adding new and complex components
- Building a product-specific component library in FigJam to boost the non-designer team’s efficiency.
