
Banco Sabadell supercharges its Galatea design system, with cutting-edge optimization and a groundbreaking validation tool
April 29, 2025
The Initiative: Tokenization, Library Optimization, and the Development of a Pioneering Figma Plugin
Sabadell, the fourth-largest bank in Spain, has shown a strong commitment to digital innovation. Since 2019, the financial institution has firmly embraced digitalization, enabling it not only to expand across all autonomous communities but also to strengthen its position in the business segment, one of its key strategic focuses.
A vital element in this transformation has been the development and evolution of Galatea, the bank's comprehensive design system, which supports applications for both individuals and companies, as well as internal developments. What began in 2020 as an initiative to prove that design consistency could accelerate time-to-market has evolved into a fundamental component of the bank’s digital strategy, allowing significant cost reductions in development and noticeably improving the time-to-market of new products and services.
The Team, Their Vision, and the Galatea Design System
Behind this transformation stands a group of individuals committed to efficiency and innovation. Alex De Fuenmayor, Lead DS and member of Banco Sabadell’s design team since its inception, Nicolás Cornwall, DS Manager at Banco Sabadell, and Manuel Serrano, Design DS at Eunoia Digital, a Galatea collaborator, have been the three key figures in this evolution.
According to De Fuenmayor, "the goal of this team has always been clear: to create tools that streamline projects and establish a robust design system as the central axis of our strategy". From this ambition, Galatea was born—a small project for informational websites that has grown into a robust, comprehensive design platform, pivotal for Sabadell’s plans.
The Galatea design system has been the cornerstone of Banco Sabadell’s design process, serving as a centralized repository of components and styles used by all designers at the institution. Its scope was broad, covering both customer-facing interfaces and business solutions, as well as internal developments.
Throughout its evolution, Galatea has proven to be a valuable tool, undergoing several major updates aimed at making it easier for the entire team to understand and use, while ensuring the system’s scalability. It had been demonstrated that having a robust design system generated significant cost savings for the bank. However, despite its undeniable success, the team identified several areas for improvement.
One major challenge was the need to provide a smooth and consistent connection between design and development, especially regarding the nomenclature and organization of interface elements. This was aimed at ensuring visual and functional consistency across various projects, avoiding inconsistencies that would otherwise require substantial time and resources to fix.
Moreover, the need for system scalability required a structure of libraries that, over time and with system growth, would be easier to manage, facilitating the introduction of changes and the adaptation to new needs.
For De Fuenmayor, “The goal of this team has always been clear: to create tools that streamline projects and establish a robust design system as the cornerstone of our strategy.”
Alex De Fuenmayor – DS Lead at Banco Sabadell, Nicolás Cornwall – DS Manager at Banco Sabadell, and Manuel Serrano – DS Designer at Eunoia Digital.
Strategic Collaboration with Sngular
Initially, Galatea was developed following an atomized approach, where UI components or "atoms" with standalone functionality (buttons, cards, avatars, form inputs, typography, color palettes, etc.) were worked on individually. However, as the system matured and the team better understood user needs, they realized the necessity to evolve toward a more sophisticated model.
"As part of Galatea’s natural evolution, we transitioned from an atomic system to a functionality-based one, which drove the reorganization and optimization project we undertook with Sngular," explains Manuel Serrano. This change responded to the growing complexity of the system and the need to make it more accessible for all involved teams.
To tackle these challenges and achieve a qualitative leap in managing their design ecosystem, Banco Sabadell turned to Sngular, based on its proven expertise with Figma, its active collaboration with other banks on similar projects, and a track record of success in addressing complex financial sector projects. Sngular’s value proposition, focused on innovation, scalability, and strategic partnership, perfectly aligned with Banco Sabadell’s aspirations.
This collaborative project focused on three fundamental pillars, interconnected and highly impactful: the implementation of a robust design token system, the restructuring and optimization of the design library architecture within Figma, and the development of an innovative plugin to validate design system usage in projects (also for Figma).
From Atom to Token
Tokenization became a fundamental element in optimizing Galatea. *Design Tokens function as units of information representing platform-independent design attributes. By abstracting them with semantic names, they become a single source consumable by both design tools and development platforms.
"In Galatea, we carried out tokenization by defining three essential types: Base Tokens for fundamental values without specific context; Semantic Tokens that add meaning through specific rather than generic names; and Component-Specific Tokens for particular cases that don't follow standard patterns," explains Elliot Ackland, Product & Design Systems Expert at Sngular.
Additionally, the process was organized using naming levels. The Base Level combines type, component, and item to define the token's purpose, while the Modifier Level adds context regarding variations or specific states.
"The technical implementation was our biggest challenge and also our greatest achievement," says Ackland. "We succeeded in making the system truly platform-agnostic, allowing React, Vue, and Angular to efficiently consume the tokens."
What once took days of constant communication between teams now flows naturally. Tokens have created a common language understood by everyone involved in the projects.
Toward a Smoother Library Architecture
The structural reorganization of the design libraries in Figma represented a decisive move to optimize Galatea. The original monolithic library, concentrating all components, styles, and assets in a single file, created performance issues, complicated updates, and hindered collaboration among large teams.
"The division into four specialized libraries emerged in response to the need to improve organization, facilitate parallel work, and prepare the system for expansion," says Irene Vega, Product & Design Systems Expert at Sngular.
There is a base library, serving as the foundation of the system, housing Galatea’s visual essence through Design Tokens that define colors, typography, spacing, and grid systems. This core library feeds all others, ensuring visual coherence across the platform.
Complementing this foundation, another library centralizes all graphic resources, such as icons, illustrations, and brand elements. This strategic separation not only eases updating and managing these visual elements but also significantly reduces the load on the other libraries.
Building on these, the key components library gathers the essential interactive elements of the interface. Buttons, form fields, selectors, and other basic components are developed here, leveraging the Foundations tokens and the visual resources from Assets, thus creating a flexible set of building blocks.
Finally, a more peripheral library elevates the system to its highest expression, combining basic components into more complex patterns and complete templates. This upper layer allows designers to rapidly create new screens and user flows without rebuilding elements from scratch, significantly speeding up the design process while maintaining user experience consistency.
As Irene Vega explains, "we opted to have a series of complex components separated from more manageable ones to facilitate creating new components, while also removing icons or other elements from view that designers should not use but rather receive already implemented by Galatea."
This "functionality-based division" (as opposed to a purely atomic system) was considered more suitable for the team’s needs and the system's maturity. Separating the libraries also facilitates scalability, enabling different groups to focus on specific areas of the system without creating conflicts or overloading a single file. Additionally, it simplifies asset and component updates, since changes in one library don’t necessarily impact the others.
"The reorganization greatly transformed our way of working for the better," comments Alex De Fuenmayor. "Before, we often had to wait for the system to load the entire library or resolve version conflicts. Now each team can focus on its area without blocking others."
The Guardian of Consistency
In this context, the need to standardize components and ensure compliance with corporate design guidelines across all applications and products became increasingly evident. Validating the correct implementation of the design system had become a manual and labor-intensive process, relying on individual project reviews.
Thus arose the idea of developing a plugin to automatically verify the correct implementation of design elements. The goal was also to improve communication and centralization within the design team, particularly after migrating to Figma.
This design tool not only provides objective quality verification but also eliminates subjectivity from evaluations. "With it, we no longer have an opinion on whether it’s done well or poorly—it becomes an absolute truth," says Jon Rojí, FrontEnd Manager at SNGULAR.
The plugin's operation is elegantly simple yet powerful. It meticulously analyzes the components and styles used in any Figma design, comparing them with the elements defined in Galatea’s official libraries. "As a result, it generates a percentage indicator of system adherence, clearly identifying which elements follow the established guidelines and which have been independently developed or detached from the system," Rojí explains.
The benefits have been multiple and significant. Visual and functional consistency among products has improved notably, ensuring more unified user experiences. Design teams have gained autonomy and accountability for system adherence, fostering a culture of consistency and minimizing design debt in advanced development stages. Meanwhile, the Galatea central team has significantly reduced the time spent on manual reviews, enabling them to focus on the strategic evolution of the system.
Designer feedback has been exceptionally positive, praising the tool’s agility and usefulness. The success has been so pronounced that there’s a vision to extend the functionality to the development environment and, more ambitiously, share the plugin with the global design community as a contribution to the professional ecosystem.
“We are seriously considering open-sourcing this plugin,” reveals Alex De Fuenmayor. “We believe many organizations face similar challenges, and our solution could benefit the entire design systems ecosystem.”
Tangible Results and Close Collaboration
Although detailed figures are not disclosed for obvious reasons, preliminary data shows a significant economic impact, with a major projected cost saving throughout 2024 thanks to the design system’s implementation. Expectations suggest that this new model will further boost these financial benefits in future years.
However, the project’s value goes beyond purely economic outcomes. Internal testimonials highlight a comprehensive transformation in work methodologies, with notably higher satisfaction levels among teams and improved efficiency in all design processes. The universal adoption of the validation plugin has been established as a key performance indicator (KPI) for monitoring and ensuring both visual consistency and strict compliance with system standards.
Banco Sabadell’s expectations when starting the collaboration with Sngular were high—not just technical solution implementation but also the exchange of knowledge and insights with seasoned design system professionals.
"At the end of the day, there aren’t many people who truly know about design systems—there are many people building design systems, but having deep discussions is rare. And Sngular has those people," highlights De Fuenmayor, stressing the importance of finding a partner with the necessary depth of knowledge. Manuel Serrano also praises the dedication and commitment of the Sngular team, noting that "they’re hard-working people, and we’ve been working side by side from the beginning."
Looking ahead, the outlook for Banco Sabadell and the continuous evolution of Galatea is extraordinarily promising, with solid foundations to continue innovating in user experience.
Our latest news
Interested in learning more about how we are constantly adapting to the new digital frontier?

Insight
April 21, 2025
AB360: A Pioneering Platform of Collaborative Intelligence for Sustainable Building

Tech Insight
April 14, 2025
Google launches its ultimate offensive in artificial intelligence from Cloud Next 2025

Tech Insight
April 2, 2025
🧐 What is Mockoon and why should you use it?

Tech Insight
March 19, 2025
Visualizing Software Quality with JIRA, Google Sheets, and Looker