I led the transformation towards a more scalable and streamlined DS.
Key innovations included mentoring, enhancing collaboration between designers and developers, and introducing variables and tokens for flexibility in themes.
A crucial breakthrough was implementing variables as tokens to streamlining the handoff process with a JSON export, ensuring consistency and speeding up the system's deployment.
Token Implementation
With Figma's updates, I saw an opportunity to enhance scalability by implementing variables as tokens. This required a complete overhaul of our design process, from color styling to mode variations. By working closely with developers on the taxonomy of these tokens, we aimed to eliminate the need for a translation layer, ensuring efficiency and consistency.
I also took on a mentorship role, guiding the junior designer.
As he gained confidence and skill, I gradually shifted my focus towards strategic aspects, particularly collaboration with our front-end developers. We established bi-weekly meetings with the front-end lead to discuss design system queries, fostering a closer relationship between the design and development teams.
Streamlining Dev Handoff
One of the challenges we faced was the cumbersome handoff process, particularly when developers had to manually copy each new token leading to human error. To address this, I researched ways of exporting variables as JSON files, which, after consultation with the lead developer, proved to be a valuable addition to our workflow. This facilitated instant synchronization between the design and development teams, ensuring Figma remained the single source of truth.
Conclusion
By adopting the new design guidelines and integrating advanced variable features from Figma, we significantly improved the design system's functionality and efficiency. This not only facilitated easier transitions between light and dark modes but also allowed for customization based on customer themes.
This approach also helps to strengthen the relationship between the development and design teams, fostering unity and collaboration
Ultimately, these efforts led to a more streamlined design system launch, enhanced consistency, and reduced time to market.
