1. Context
When I joined XP Investimentos, the Soma design system (created in 2021) was already in its fifth version, supporting 13 brands, each with Dark and Light themes. The mobile version for the app had been implemented and was in use across the company's teams. The web version was still in development, with most core components already built.
The plan was to follow the model established in the mobile version: an atomic design approach that organized the design system's components into groups based on complexity. This structure produced Core Components, Recipes, Compositions, Micro Templates, and Page Templates.
1.1 About XP Inc.
One of the largest financial platforms in Brazil. Founded in 2001 with the mission of democratizing access to investments, XP grew from a small independent brokerage into a NASDAQ-listed group, with over R$1.5 trillion in client assets. It offers highly complex financial products to a massive user base, which makes design work especially challenging, where every decision affects a large volume of people in high-stakes situations involving their money.
2. My Main Contributions:
- Defined grids and responsiveness standards that were lacking;
- Developed a new, easier to maintain documentation model;
- Created and adjusted many components and Micro Templates;
- Owned the rollout and monitoring of Micro Templates across the company's platforms;
- Migrated one of the company's portals to the new version of the DS;
- Pioneered the use of new Figma features, such as slots and wrapping
A few Soma components used in "Meus Objetivos" (My Goals), an XP app's feature.
3. Use of AI Tools
AI was an important part of my work. For security reasons, the company has its own internal system called Jarvix, which provides access to several LLMs through a chat interface. I used this tool regularly to resolve technical questions, gather requirements, and document components.
Given the nature of the business (finance) and the associated security considerations, the use of AI for UI and component creation was more limited, staying within Figma's native resources, such as Figma Make and Agent. With Figma Make, for example, I built a tool to make the grid system I designed easier to visualize and understand.
I'm currently studying front-end development so that, with the support of AI, I can contribute even more deeply to design system teams.
4. Process
- Created the Design Backlog Item for each Sprint (two weeks), including Definition of Done, objective, and estimated effort;
- Design phase: requirements gathering, reference research, alignment meetings with other teams, design critiques, and documentation;
- Handoff with the engineering team;
- Design QA on previously delivered components, carried out in parallel.
A few examples from "Meus Objetivos" (My Goals), an XP app's feature, using Soma.
5. Next Steps
- Expand adoption of the Web library across the company's squads;
- Apply Micro Templates and create Page Templates;
- Evolve Motion Design on mobile and extend it to Web;
- Explore and test new AI tools.
3. Impact & Reflections
Results:
The company is already seeing the results of the design system's implementation in its mobile app, which — as mentioned earlier — is at a more advanced stage than web. On web, where I currently work, we're in the implementation phase across teams, with the first products using the design system still to launch.
One of the most notable results was the iF Design Award 2026, received by the XP app's "My Goals" feature. Built by another team within the company, the feature used Soma DS throughout its entire flow.
Key Learnings:
As my first experience on a squad fully focused on Design Systems, my practical knowledge in the field grew exponentially — from building highly complex components and templates to understanding governance and collaborating with both internal and external teams.
