Ruangguru Era: Taking Design Systems to the Next Level 🔥

Moving to Ruangguru was a new challenge—and a bigger playground. This time, I got to push the boundaries even further, especially with Figma’s Local Variables. This nifty feature made it super easy to switch between styles, like going from Bahasa to English mode or swapping assets between different products. It was like leveling up from a solid foundation at IDN Media to something even more flexible and robust at Ruangguru.

Stay tuned—this story is just beginning.


The New Story Begin!

Before I came on board, most of the core variables and styles were already well-documented in Local Style, covering essentials like Text Style, Effect Style, Color Style, and Grid Style. Key components were also established as Master Components and neatly listed in Assets.

However, the main question was still unsolved:

“How do we handle unique styles for each product?”


Temporary Solution: Separate Files per Product

Our initial solution was to separate the Design System library for each product, with a dedicated library for each unique theme.

The upside? This solved the problem of creating distinct styles per product. The downside? It required substantial time and effort to maintain multiple Design System files.

image.png


Enter Local Variables: Game Changer!