Cómo desarrollar visualizaciones personalizadas con Figma e IA
La visualización Lipstick. La construí para comparar valores reales frente a objetivos sin usar una tabla desordenada.
No soy un desarrollador profesional. Sé lo suficiente de la sintaxis de D3.js para leer código, pero escribirlo desde cero requiere un esfuerzo increíble. Se siente desconectado de mi flujo de trabajo. Pienso en historias. Me gusta usar Figma porque mantiene el enfoque en la experiencia del usuario.
Encontré un ancla técnica para esto. Utilizo SVG como lenguaje compartido entre mi diseño y el agente de IA. Esto hace que el prototipado sea rápido.
La fricción del lenguaje natural
El lenguaje natural es una forma terrible de describir un gráfico complejo. Pasas horas en bucles intentando que el agente vea lo que quieres decir. Figma es diferente. Es excelente para el diseño, pero produce código muerto.
La exportación SVG soluciona esto. Al exportar desde Figma, le estoy dando a la IA un plano técnico. Contiene la geometría y las clases CSS necesarias para el código final. Incluso con la visión de IA moderna, tener el código SVG proporciona un anclaje que evita que el modelo alucine el diseño. Encuentro que nombrar mis capas intencionalmente en Figma hace que este anclaje sea aún más fuerte.
¿Por qué la visualización Lipstick?
Elegí la visualización Lipstick para mi primer experimento porque resolvía un problema de diseño. Normalmente, comparar métricas reales frente a objetivos requiere dos cosas separadas. Necesitas un gráfico de barras para lo visual y una tabla para los números. Ocupa demasiado espacio.
La visualización Lipstick empaqueta todos esos datos en una sola forma. Incluye el valor real junto al objetivo. Elimina la necesidad de una tabla.
Figma como guion gráfico
Mi flujo de trabajo es una mezcla de diseño guiado por especificaciones y diseño iterativo. Uso Figma como un guion gráfico de cine. Es donde fallo rápido con los diseños. No quiero probar conceptos con código todavía.
Una vez que la idea central es sólida, paso a un entorno HTML local. Aquí es donde fallo rápido con los errores y las animaciones. La configuración local utiliza un simulacro de la plataforma de destino.
const testData = {
tables: {
DEFAULT: [
{ dimensionCol: ["Region A"], valueCol: [80], targetCol: [100] },
{ dimensionCol: ["Region B"], valueCol: [120], targetCol: [100] }
]
}
};
Le pido al agente estos datos de inmediato. Los graficamos y vemos la visualización en vivo. Ajustamos los hovers y las transiciones en un entorno simplificado. Este ciclo es rápido porque la base ya está ahí. Me enfoco en la estética mientras el agente maneja las matemáticas.
La velocidad de fallo es una característica central de este flujo de trabajo. Al probar en un entorno HTML controlado antes de pasar a Looker Studio, puedo realizar múltiples iteraciones en el tiempo que tomaría guardar y actualizar un panel en vivo una sola vez.
Echa un vistazo a las visualizaciones terminadas
He utilizado este método para construir una galería de componentes personalizados, desde el gráfico Lipstick hasta jerarquías de árboles interactivas.
Explorar Visualizaciones Personalizadas →Este enfoque me resulta natural. Utiliza el poder multimodal de la IA moderna para conectar la interfaz de diseño directamente con el código de producción. No necesito ser un experto en D3 para construir algo único.