How Repsol rethinks the way the world interacts with energy | Figma Blog

Repsol is using design to make energy more understandable and encourage consumers to participate in the transition toward sustainable energy. After creating its first internal design team, the company partnered with Mendesaltaren to build the Oxygen design system in Figma. The system unified design across products, improved collaboration, and reduced product implementation work by 30%.

Making Energy More Tangible

• Repsol’s design team aims to “humanize” energy and help people become active participants in how it is produced and consumed.
• An electric car-sharing app shows users how much energy they consume while driving and rates their efficiency.
• Another app feature lets users see where their electricity comes from, including nearby solar panels and wind turbines, alongside current weather conditions.
• These experiences turn energy from an abstract bill into something visual and interactive.

Building One Design Language

• Repsol serves diverse audiences, including drivers, industrial customers, employees, and teams managing refineries and supply chains.
• Before the design system, different products taught users different interaction patterns and languages.
• The Oxygen design system provides shared patterns, components, interaction guidelines, and developer guidance.
• Built in Figma, it creates consistency across products while allowing teams to adapt designs to different purposes and audiences.

Figma as the Collaboration Hub

• Figma became the central workspace for design, communication, feedback, and executive presentations.
• Repsol can work simultaneously on more than 15 projects across internal and external teams while maintaining consistency.
• Designers replaced tools such as Sketch, InVision, and PowerPoint.
• Product owners, technology leads, and executives can review and iterate on designs in parallel.

Measuring Design’s Impact

• Mendesaltaren developed two plugins to help Repsol measure design performance:
  • Figmetrics tracks how components are used across Figma files.
  • MSVM keeps design, product, business, and technology teams aligned around a shared source of truth.
• The new system and processes reduced implementation work by 30%.
• Repsol can now track savings in time, money, and effort, making design’s business value more visible.

Repsol’s experience shows how a centralized design system can improve efficiency while making complex subjects more accessible. By connecting consistent design practices with measurable results, the company is using design as a tool for both digital transformation and its transition toward net-zero energy.