Primeros pasos
Explora, crea y colabora 🚀
Si estás comenzando a diseñar con Energy, este es el lugar indicado. Aquí encontrarás una guía con todo lo que necesitas para arrancar y poner en marcha tus proyectos.
Energy es el sistema de diseño de Repsol, un conjunto de recursos reutilizables que te ayudarán a crear sitios web e interfaces de usuario de manera rápida, consistente y eficiente dentro de nuestro ecosistema digital. Con Energy, no solo ganas velocidad en el diseño, sino también coherencia y accesibilidad en cada producto que construimos.
Figma Repsol
En Repsol, el equipo de diseño trabaja desde Figma, nuestra herramienta central donde alojamos las librerías y recursos para todos nuestros diseñadores. Este Figma corporativo no es solo un espacio de trabajo, sino el corazón de nuestra metodología de diseño, creada para asegurar que todos los equipos hablen el mismo idioma visual y funcional.
Tener una metodología definida nos permite diseñar con eficiencia, coherencia y alineación estratégica. En lugar de reinventar la rueda en cada proyecto, construimos sobre una base sólida que nos hace más rápidos y eficaces.
Librerías
Nuestras librerías de diseño están en Figma y contienen todos los componentes y estilos que están disponibles para tus diseños. Activa desde el panel de Assets las librerías que se ajusten a tus necesidades, según el tipo de producto que vayas a realizar (Web, App...) Y recuerda seguir la metodología de trabajo y revisar las buenas prácticas de uso, para asegurarte de estar al día con las últimas versiones de componentes.
Assets. Todos los recursos que necesitas
Energy no es solo una colección de componentes y estilos, es un ecosistema completo de diseño. Además de nuestras librerías principales, contamos con una serie de librerías de Assets, el complemento perfecto para aplicar el sistema de forma eficiente y coherente.
Piensa en Energy como una orquesta bien afinada. Los componentes y estilos son los instrumentos principales: violines, pianos, trompetas… esenciales para crear armonía. Pero para que la música suene realmente bien, también hacen falta partituras, atriles y metrónomos. Eso son nuestros Assets: el soporte que mantiene el ritmo, ordena la composición y permite que cada pieza encaje a la perfección.
Un ejemplo de que elementos puedes llegar a encontrar en las librerías de assets son: Elementos de marca para ultilizar en tus diseños, la iconografía corporativa, nuestras microilustraciones...
Metodologia
En nuestro equipo de diseño, trabajamos en Figma organizando los archivos en tres entornos según la etapa del proyecto. Task es como el taller de creación, donde todo está en proceso y en constante exploración. Main es nuestra sala de exposición, donde los archivos ya están listos y perfeccionados para entregarse al equipo de desarrollo. Finalmente, Archive es el almacén donde guardamos lo que ya no está en uso, pero que queremos conservar como parte de nuestro histórico, como un baúl de ideas pasadas. Esta estructura nos ayuda a mantener todo ordenado y accesible, facilitando la colaboración y el flujo de trabajo.
¿Qué es Energy?
¿Vas a desarrollar un producto con el lenguaje visual de Energy? Entonces este es tu punto de partida. Aquí encontrarás todo lo necesario para comenzar a implementar el sistema de diseño y construir experiencias digitales consistentes y eficientes.
Energy es mucho más que un sistema de diseño: es un lenguaje común que conecta a diseñadores y desarrolladores como si hablaran el mismo idioma. Imagina una orquesta donde cada instrumento suena en armonía: eso es lo que consigue Energy en los productos digitales de Repsol.
Este sistema colaborativo proporciona componentes reutilizables ya alineados con diseño, lo que permite desarrollar más rápido, mantener con facilidad y evolucionar sin perder coherencia. Además, ayuda a crear un ecosistema visual sólido y reconocible en todas nuestras plataformas.
Todo lo que necesitas para construir con Energy
Para que puedas poner manos a la obra, Energy cuenta con librerías técnicas listas para usar en aplicaciones web desarrolladas con Vue. Estas librerías son como una caja de herramientas bien organizada: contienen todo lo necesario para construir interfaces que cumplen con nuestros estándares de diseño.
Actualmente disponemos de dos librerías principales que te permitirán implementar los componentes y estilos definidos desde diseño. Con ellas, el desarrollo se vuelve más ágil, más claro y mucho más alineado con la experiencia que queremos ofrecer a nuestros usuarios.
Accede a la documentación
Librerías diseñadas para cubrir necesidades especiales y extender el sistema de diseño. Ofrecen guidelines y plantillas listas para insertar, reduciendo la complejidad del diseño.
Recursos adicionales
Explora los recursos disponibles y comienza a crear con los elementos que Energy pone a tu disposición.
Contacto