Working with engineering
Developers are in the room from the first sketch. We share names, tokens and versions, and we decide together: it’s how we ended up splitting Terra’s fonts by language, cutting their weight by 70% without touching the brand.
About
Hola! I’m Xavier.
I make the parts
other designers build on.
I’m a product designer from Barcelona. Today I lead Terra, Mango’s design system: the tokens, components, documentation and rituals that help designers and developers across the company ship web and apps that feel like one brand.
I got here the long way round: motion and brand work first, then product design for apps at Massimo Dutti and Mango. Each step made me care a little more about the things underneath the interface: structure, naming, the conversation between design and code. Design systems turned out to be where all of that meets.
Why systems
Why I enjoy building design systems
A good design system is invisible. Nobody notices it; they just notice that the product feels coherent, that new features ship faster, that dark mode works everywhere on day one. I like that kind of quiet impact.
I also like that it’s never finished. A system is a living product with its own users, roadmap and releases. It rewards patience and attention to detail: two things I happen to have plenty of.
What I care about
Three things I don’t compromise on
Accessibility
It belongs in the foundations, not in a checklist at the end. Contrast is checked at the token level, focus states are designed, and semantics are part of the component, so every team inherits them.
Scalability
Global, semantic and component tokens let one system serve light and dark, every breakpoint, and several themes (Shop, Outlet, internal tools) without copying a single component.
Path
Where I’ve been
Work
- MangoProduct Designer, Design SystemSep 2024 – PresentLeading Terra across web, mobile and internal products: foundations, components, patterns and guidelines, built with designers and developers into one consistent, scalable and accessible language.
- MangoProduct Designer, AppsJan 2023 – Aug 2024Led the design of the mobile app and drove the evolution of the app experience.
- Massimo DuttiProduct Designer, web and appApr 2022 – Dec 2022Designed the brand’s web and app experience, running experiments and agile tests to validate ideas, and used Hotjar to find pain points. Helped build the company’s design system in Figma.
- RicohUX/UI Designer, earlier Communication & Marketing SpecialistFeb 2018 – Apr 2022Designed landing pages, marketing sites and emails, with a small first design system to keep them consistent, and redesigned for conversion from performance data. Also supported the web team in the early steps of renewing the site for a more digital value proposition, and produced audiovisual content for campaigns.
- Wylma Blein AgencyVisual CreativeOct 2015 – Nov 2017Audiovisual campaigns for clients across industries: graphic and layout design, motion graphics, animation and video.
- FreelanceMotion, brand and video for campaignsSep 2012 – Apr 2022Graphic design, editorial, web, motion graphics, photography and video for brands and institutions.
- B-sionCo-founderJan 2011 – Dec 2013Ran a small production company focused on graphic design and web design.
- Ajuntament de Vilassar de MarCommunication SpecialistSep 2010 – Feb 2018Took the city council’s mobile app from ideation to launch, and ran internal communication, social media, audiovisual resources and the council’s websites.
Education
- MrMarcel SchoolDesign Systems2024 – 2025
- K-SchoolMaster in UX/UI: user experience, usability and interface design2020 – 2021
- Universitat Autònoma de BarcelonaMaster in communication management for companies and institutions2016 – 2018
- Tecnocampus Mataró · UPCBA in Audiovisual Media Studies2008 – 2013
Courses & certifications
- Into Design Systems AI ConferenceInto Design Systems2026
- Accessibility testing for developersweAAAre2025
- Digital accessibility auditsweAAAre2025
- Digital accessibility KPIsweAAAre2025
- Semantic HTML for designersweAAAre2025
- Into Design Systems ConferenceInto Design Systems2025
- LottieFiles for FigmaLottie2025
- Accessible Technology DesignEuropean Commission2024
- Data-driven design: quantitative research for UXInteraction Design Foundation2022
- Agile methods for UX designInteraction Design Foundation2022
- Mobile UX designInteraction Design Foundation2022
- SVG graphics: illustrating and animating with codeJavier Usobiaga2019
- Remote team managementMicrosoft2019
- Microsoft Collaboration: SharePoint, Teams and GroupsMicrosoft2019
- After Effects expressions for motion graphicsGabriel Suchowolski · microbians2018
- Live sound, stop motion and 3D animationGlyndŵr University, Wales2008 – 2010
- 3D modelling with LightwaveFX Animation2009
The full list lives on LinkedIn(opens in a new tab).
In 2016 I also designed two free OpenType fonts: Munich(opens in a new tab) and Melbourne(opens in a new tab).
Off screen
A little personality
When I’m not pushing pixels or renaming tokens, I’m probably travelling somewhere new, digging for music, or walking around with a camera. Photography taught me most of what I know about composition and light, and about waiting for the right moment.
I’m open-minded, always learning, and happiest in teams where people ask good questions.
Contact
Let’s talk
on LinkedIn.
Whether it’s a design system that needs care, a role you think I’d enjoy, or just a question about tokens, that’s where I read everything.