Diseñando tableros de Power BI con un toque creativo

Cuando pensamos en tableros de Power BI, solemos imaginarnos diseños funcionales, pero a veces un poco rígidos y repetitivos. ¿Y si pudiéramos darles un giro más atractivo y dinámico?
En el equipo de Data de Syloper 🚀 nos propusimos justamente eso: romper con el estilo clásico y explorar nuevas formas de diseño usando Figma. 🎨✨

Con esta herramienta, logramos potenciar la interfaz, hacerla más amigable y visualmente impactante, sin perder de vista la usabilidad y el valor de los datos.

En este post te contamos cómo transformamos un tablero convencional en algo mucho más atractivo ¡Mirá este paso a paso con el proceso completo! 👇

1. El paso previo

Hay que tener en claro que Figma viene a complementar el diseño de nuestros tableros. Es decir, primero necesitamos tener una referencia sobre la que trabajar. Para ello, es tan sencillo como hacer una captura de pantalla del tablero, específicamente en los límites del fondo de lienzo.

En Power BI hicimos la carga y el modelado de los datos, definimos gráficos, filtros, botones, etc. Es decir, ya tenemos el esquema básico de nuestro tablero.

2. Aterrizando en Figma

• Nuevo proyecto: Abrí Figma y creá un nuevo proyecto.
• Definición del frame: Configurá un frame con las proporciones 16:9, resolución de 720 x 1280, igual que nuestros tableros de Power BI.
• Importación de la captura: Desde la barra inferior de herramientas, importá la imagen de la captura del tablero, arrastrala al frame y adaptala a las dimensiones establecidas.
  
  

3. El Diseño

• Paleta de colores e iconografía:
  • Navegamos en coolors.co para elegir una paleta ideal.
  • Buscamos imágenes en formato png (por ejemplo, una taza de café y granos) en freepik y, en algunos casos, usamos Photoshop para correcciones leves (¡aunque también se puede hacer en Figma!).
• Definición de áreas:
  • Creamos dos rectángulos: uno para el fondo del tablero y otro para la barra de menú a la izquierda, siguiendo la captura original como guía.
  • Aplicamos degradados usando la herramienta (panel derecho, Design > Fill) para lograr un efecto de capas.
    

• Delimitación de gráficos:
  • En el sector derecho del tablero, usamos rectángulos con bordes redondeados, colores derivados del fondo (oscurecidos) y añadimos degradados y sombras.
    
    

• Iconos:
  • Descargamos iconos en formato SVG desde flaticon.es, por ejemplo, uno para el panel de filtro, otro para la página de información y un cohete para acceder directamente a la página de Syloper.
    

4. Menú de filtros

• Procedimiento similar:
  • Importamos una captura del menú desplegado.
  • Usamos un rectángulo para definir el área y agregamos un botón que, en Power BI, se configurará para cerrar el menú.
    

5. Exportación

Figma permite exportar:

• Todo el frame.
• Grupos de elementos.
• Elementos individuales.

En este caso, exportamos todo el tablero en conjunto, a excepción del menú agrupado con su botón, que se exporta de forma separada.

6. Implementación en Power BI

• Aplicación del diseño:
  • El diseño exportado desde Figma es un archivo PNG que se utiliza como Fondo de lienzo.
  • Configuramos la paleta de colores en Power BI basándonos en la seleccionada en Figma.
  • Acomodamos cada gráfico en sus respectivos marcos y definimos la funcionalidad de los botones usando botones blancos superpuestos.
    
    

• Detalles finales:
  • Se agrega el título y el logo de Syloper.
  • Se incorpora la página de información, que incluye imágenes, textos y botones de navegación propios.
    

No nos limitamos a Power BI; elegimos sumar herramientas para abrir nuevas posibilidades de diseño. La visualización de un tablero no tiene por qué restringirse a lo convencional.
Experimentar con elementos sencillos, pero impactantes, puede transformar la experiencia del usuario, haciendo el tablero más amigable y atractivo.

Te invitamos a comprobarlo explorando el resultado acá.